DOM 虚拟化与 knockoutJS、CSS 显示：无答案

【问题标题】：DOM virtualization with knockoutJS, CSS display:noneDOM 虚拟化与 knockoutJS、CSS 显示：无
【发布时间】：2013-05-22 12:52:44
【问题描述】：

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

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

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

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

任何见解将不胜感激！

【问题讨论】：

updated 我能够通过取消移动底层数组而不是 observable 并在添加后手动调用 valueHasMutated 来进一步优化批量添加。现在最多添加 200 项非常快，添加更多是合理的。

标签： javascript css dom knockout.js virtualization

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在像网络这样不一致且最差的平台上，您可以做的最好的事情是让浏览器只呈现位于视口中的元素。我建议使用以下算法。

      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”的东西，可以大大提高性能。

【讨论】：