有太多dom节点的Javascript性能问题？

Question

我正在调试一个ajax聊天，它无休止地用DOM元素填充页面。 如果你有3个小时的聊天时间，你最终会知道有多少个DOM节点。

与极端 DOM使用相关的问题是什么？

用户界面是否可能完全没有响应（特别是在Internet Explorer中）？

（与此问题相关的当然是解决方案，如果除了手动垃圾收集和删除dom节点之外还有其他任何解决方案。）

Answer 1

大多数现代浏览器应该能够很好地处理巨大的DOM树。 而“大多数”通常不包括IE。

所以，是的，你的浏览器可能会变得没有响应（因为它需要太多RAM - >交换）或因为它的渲染器只是不堪重负。

标准解决方案是删除元素，比如在页面有10,000行的聊天之后。 即使是100'000线也不应该是一个大问题。 但是我开始对比这大得多的数字感到不安（比如数百万行）。

[编辑]另一个问题是内存泄漏。 即使JS使用垃圾收集，如果您在代码中出错并在全局变量中保留对已删除DOM元素的引用（或者从全局变量引用对象），即使页面本身只包含少量内容，也会耗尽内存千元素。

Answer 2

只是拥有大量的DOM节点应该不是什么大问题（除非客户端缺少RAM）; 但是， 操纵大量DOM节点会非常慢。 例如，循环浏览一组元素并更改每个元素的背景颜色，如果您对100个元素进行此操作就可以了，但如果您在100,000个元素上执行此操作可能需要一段时间。 此外，一些旧的浏览器在使用巨大的DOM树时会遇到问题 - 例如，滚动数十万行的表可能会慢得令人无法接受。

一个很好的解决方案是缓冲视图。 基本上，您只显示在任何给定时刻在屏幕上可见的元素，当用户滚动时，您将删除隐藏的元素，并显示显示的元素。 这样，树中DOM节点的数量相对恒定，但实际上并没有丢失任何东西。

另一个类似的解决方案是对任何给定时间显示的消息数量实施上限。 通过这种方式，过去的所有邮件（例如100）都会被删除，要查看它们，您需要点击显示更多内容的按钮或链接。 如果您需要参考，这就是Facebook对其个人资料的处理方式。

Answer 3

极端 DOM使用的问题可以归结为性能。 DOM脚本非常昂贵，因此不断访问和操作DOM会导致性能（和用户体验）不佳，特别是当元素数量变得非常大时。

例如，考虑HTML集合，例如document.getElementsByTagName('div') 。 这是对文档的查询，每次需要最新信息时都会重新执行，例如集合的长度。 这可能导致效率低下。 访问和操作循环内的集合时会出现最糟糕的情况。

有许多考虑因素和例子，但它们取决于应用程序。