Javascript 使用knockoutJS的DOM虚拟化，CSS显示：无

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

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

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

---

如有任何见解，将不胜感激

将设置为“无”没有意义。为了获得更好的性能，请使用“if”绑定，这样就可以完全从DOM中删除元素，而这正是获得所有性能增益的地方，浏览器需要对较小的树进行更少的工作，重新绘制和回流就容易得多

---

例如，请看此演示，如果将所有项目放入树中，浏览器将是爬行的。

在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”的东西，它大大提高了性能。

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