如何使用javascript优化渲染大量的DOM元素？

Question

在网页上,我有一个非常大的项目列表(比如产品卡,每个都包含图像和文本) - 大约1000个.我想在客户端上过滤此列表(仅显示那些未过滤掉的项目),但存在渲染性能问题.我应用了一个非常窄的过滤器,只剩下10-20个项目,然后取消它(因此所有项目都必须再次显示),浏览器(非常漂亮的机器上的Chrome)会挂起一两秒钟.

我使用以下例程重新呈现列表:

for (var i = 0, l = this.entries.length; i < l; i++) {
    $(this.cls_prefix + this.entries[i].id).css("display", this.entries[i].id in dict ? "block" : "none")
}

dict是允许的项目ID的哈希值

这个函数本身就会立即运行,它的呈现会挂起.是否有比更改DOM元素的"display"属性更优化的重新渲染方法？

感谢您提前的答案.

Answer 1

为何加载1000件物品？首先你应该考虑像分页这样的东西.每页显示约30个项目.那样,你没有加载那么多.

然后,如果你真的进入"循环很多项目",考虑使用超时.这是一个曾经说明循环后果的演示.它会阻止UI并导致浏览器延迟,特别是在长循环上.但是当使用计时器时,你会延迟每次迭代,允许浏览器偶尔呼吸,并在下一次迭代开始之前做其他事情.

另外需要注意的是,你应该避免重新涂抹和回流,这意味着避免移动元素和改变样式,这通常是在没有必要时.另外,另一个技巧是从DOM中删除实际上不可见的节点.如果您不需要显示某些内容,请将其删除.为什么浪费记忆放一些实际上看不到的东西？