0

我想发布一个我一直在使用 KnockoutJS 创建虚拟化列表的小部件，并找出我可能缺少的任何优化。

在使用 CSS display:none来虚拟化屏幕外元素时，我得到了不同的答案。我听说这样做可以避免浏览器“渲染”周期，但元素仍然会在“dom”更新周期中被触及。在我的测试中，似乎设置 display:none （通过绑定可见的剔除）确实加快了添加初始数量的项目。

最后，在我的虚拟化绑定处理程序中，我目前通过获取滚动位置和窗口高度来获取当前视口。这允许我将窗口内索引(indexes * rowHeight)设置为display:block。但是，为了隐藏其他不可见的索引，我遍历并将每个索引设置为display:none。这显然是 O(n) 来执行整个操作，但我没有看到另一种解决方法。有没有办法优化这个？将重置display:none卸载到队列中会更好吗，因为它不需要立即发生？

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

任何见解将不胜感激！

4

2 回答 2

1

将 设置为不显示是没有意义的。为了获得更好的性能，使用“if”绑定，这种方式元素完全从 DOM 中删除，这就是你获得所有性能提升的地方，浏览器需要用更小的树做更少的工作，重绘和重排它更容易。

例如看这个Big Scroll演示，如果你将所有项目放入树浏览器中，就会爬行。

于 2013-05-27T20:42:51.057 回答
0

在像 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 绑定，它非常繁重，并且会不必要地重新评估所有同级绑定。

还有一件事，如果您正在处理大量数据，请不要使用淘汰赛 foreach 绑定或模板绑定。而是使用纯 javascript，dom API 为您提供了一种称为“DocumentFragment”的东西，它可以大大提高性能。

于 2013-10-04T20:57:03.973 回答