帶有剔除JS的DOM虛擬化，CSS顯示：無

Question

我想發布一個我一直在努力用KnockoutJS創建虛擬列表的小部件，並找出我可能缺少的任何優化。

使用CSS display：none虛擬化屏幕外元素時，我得到的答案是混合的。 我聽說這樣做可以避免瀏覽器的“渲染”周期，但是在“ dom”更新周期中仍然會觸及元素。 在我的測試中，似乎設置display：none （通過綁定剔除可見）肯定會加速添加初始數量的項目。

最后，在我的虛擬化綁定處理程序中，我當前通過獲取滾動位置和窗口高度來獲取當前的viewPort。 這使我可以將窗口內索引（索引* rowHeight）設置為display：block 。 但是，為了隱藏其他不可見的索引，我進行遍歷並將每個索引設置為display：none 。 這顯然是執行整個操作的O（n），但我看不到其他解決方法。 有沒有一種方法可以對此進行優化？ 最好將重置顯示：none卸載到隊列中，因為它不必立即發生？

http://jsbin.com/axupap/56/edit

任何見解將不勝感激！

Answer 1

將設置為不顯示是沒有意義的。 為了使用“ if”綁定獲得更好的性能，這種方式將元素完全從DOM中刪除，這就是您獲得所有性能提升的地方，瀏覽器需要用較小的樹做更少的工作，重新繪制和重排它要容易得多。

例如，請參見此Big Scroll演示，如果您將所有項目放入樹形瀏覽器，則會進行爬網。

Answer 2

在像Web這樣的不一致和較差的平台上，您可以做的最好的事情是使瀏覽器僅渲染落在視口中的元素。 我建議以下算法。

      1) get the current scroll height
      2) compute the index of the element at the top
      3) get the remaining elements (using offsets from top index)
      4) push these to the rendering queue which finally renders the elements.

這樣，您就不會碰到if綁定，因為if綁定非常繁重，並且不必要地重新評估了所有同級綁定。

還有一件事，如果要處理大量數據，請不要使用敲除foreach綁定或模板綁定。 而是使用純JavaScript，而dom API為您提供了一個稱為“ DocumentFragment”的東西，可以大大提高性能。