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

Question

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

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

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

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

Answer 1

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

所以,是的,您的浏览器可能不响应(因为它需要太多内存 - >交换),或者因为它的渲染仅仅是不堪重负.

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

[编辑]另一个问题是内存泄漏.即使JS使用垃圾收集,如果你犯了一个错误,在你的代码,并保存在全局变量删除DOM元素的引用(或从一个全局变量对象的引用),你可以运行的内存,即使页面本身只包含几个千元素.

Answer 2

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

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

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