如何使用javascript优化呈现大量DOM元素？

在一个网页上，我有一个相当大的项目列表（比如，产品卡，每个都包含图像和文本）——大约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")
}

for（var i=0，l=this.entries.length；i

dict是允许项ID的哈希

此函数本身会立即运行，但渲染会挂起。是否有比更改DOM元素的“显示”属性更优化的重新渲染方法

---

提前感谢您的回答。

都德-处理“大量DOM元素”的最佳方法是不要在客户端上执行，和/或如果可以避免的话，不要使用Javascript

---

如果没有更好的解决方案（我相信可能有！），那么至少将您的工作集划分为您当时实际需要显示的内容（而不是整个、大的、嗡嗡叫的enchilada！）

为什么要加载1000个项目？首先，你应该考虑分页之类的东西。每页显示大约30个项目。这样，您就不会加载那么多

那么，如果你真的进入了“循环很多项目”，考虑使用超时。我曾经说过，这说明了循环的后果。它会阻塞用户界面，并会导致浏览器延迟，尤其是在长循环上。但是当使用计时器时，您会延迟每次迭代，允许浏览器偶尔呼吸一次，并在下一次迭代开始之前执行其他操作

---

另一件需要注意的事情是，您应该避免，这意味着避免在不必要的时候移动元素和更改样式。另外，另一个技巧是从DOM中删除实际上不可见的节点。如果不需要显示某些内容，请将其删除。为什么要浪费内存放一些实际上看不见的东西

您可以使用

setTimeout

技巧，从主线程卸载循环调用并避免客户端冻结。我怀疑整个处理过程（从开始到结束）将持续相同的时间，但至少这样界面仍然可以使用，结果是更好的用户体验：

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

for（var i=0，l=this.entries.length；i

重新渲染1000个元素需要1-2秒，你会感到惊讶吗？由于我怀疑1000个元素在任何时候都是可见的，也许您应该处理可见的项目，然后在后台工作以使其余的项目可用（在每个批之间使用setTimeout（）每次执行50次，以使浏览器保持活动状态）。或者，您应该只在它们由于滚动而变得可见时才重新渲染。它也不能帮助您运行1000个单独的选择器操作，每个操作都必须搜索整个DOM。这段代码中有很多丰富的内容。谢谢你的“回流”提示-不了解这个可爱的浏览器的机制是不可原谅的，即使是像我这样的新手。我已经从DOM中删除了列表的容器，更改了元素的显示属性，然后将容器返回给DOM。瞧，没有回流-没有挂断！我对你的答案投了反对票，因为在客户端/使用JavaScript处理大量DOM元素并没有什么必然的错误。普通计算机可以在一秒钟内处理涉及数万（如果不是更多）元素的DOM更新，前提是将算法、回流等的复杂性降至最低。在实践中，这通常比往返服务器的响应速度快得多，特别是因为客户端仍然会使用服务器提供的任何HTML更新DOM。问题不在于JavaScript，而在于如何使用它。2014年在客户端渲染中说“不要使用JavaScript”是非常糟糕的。尤其是当谷歌、Mozilla、微软等公司每年投资数百万美元，为最终用户提供更快、更好、免费的网络服务时。也许这就是为什么对于最新的交易应用程序、云解决方案、音乐播放器、CAD和图形应用程序、大型商店，你所需要的只是一个可以免费下载的浏览器。这个人说的是实话。这是不受欢迎的事实，但事实并非如此。