優化了巨大的無序列表使用Javascript

Question

我現在有，搜索圖像，並返回結果作爲像這樣一個列表元素在我的網站的搜索框：

​​

然後，每個圖像具有點擊事件相關聯它只是添加一個疊加到單擊圖像的父級李。

有時我的搜索結果將包含300多個結果，這些結果在桌面上並不是什麼大問題，但在移動設備上會造成巨大的延遲，當有人點擊圖片添加疊加層時，疊加層出現前可能需要4-5秒。

現在我想到了一個辦法來解決這個問題是下面的：

1. 添加所有li元素到數組（字符串不是一個DOM元素）

2. 破壞原有的li元素。

3. 計算屏幕的大小和多少圖像可以在同一時間

4. 添加滑塊UI元素被示出爲用於滾動好像列表

5. 基於對位置滑塊和多少元素，我們可以安裝到 從數組中的元素，我們可以清楚地看到屏幕提取物和銷燬，其餘

6. 循環雖然返回數組結果和所有結果添加到單個字符串。 然後將包含我們可以看到的所有結果的字符串追加到UL中。

我的問題是這會不會讓我的表現增加？正如我相信我的初始問題是在太多的元素。

也是這是一個常見的事情要做，或者是否有更好的方法來做到這一點？

感謝

Answer 1

上移動緩慢的表現似乎是由於大量的DOM項目。我已經試過各種方法，以加快對的jsfiddle代碼（例如，減少jQuery的DOM請求的數量），但它仍然低迷http://jsfiddle.net/5LfMt/15/

我提出的建議的變化在你原來的問題：http://www.strudel.org.uk/test/stack.html它是非常粗糙的，沒有任何錯誤檢查，但表明基本思想的工作原理和速度更快。它應該也可以幫助頁面渲染時間，因爲瀏覽器不需要最初渲染所有500個圖像。

我假設你所有的圖片都有相同的已知高度。我創建了一個文件名的數組，然後確定哪些是可見的。列表的頂部填充得到更新，以確保我們保持在文檔中的正確位置。我附加了一個更新列表的滾動監聽器 - 刪除列表項，然後添加可見的列表項。從DOM中刪除它們的一個結果是覆蓋層也被刪除了，所以我創建了一個數組來記錄疊加層的狀態。