为什么浏览器会因为大量的DOM元素而变慢

Question

我知道这个问题听起来非常简单，但我只是想知道浏览器如何处理DOM以及是什么让它变得越来越慢，因为大量的DOM元素？这只是大小吗？如果DOM元素的数量不是很多但javascript对象是什么呢？它还会缓慢响应吗？

我想，如果有javascript对象附加事件并且我们不处理它们，它响应缓慢，因为它必须执行所有事件处理程序（以顺序方式），但除此之外是什么内存泄漏的其他原因＆＃39;减慢浏览器的速度？ （假设浏览器占用了大量内存，但系统中仍有足够的内存）。

更新： 令人惊讶的是，当浏览器响应缓慢时，CPU和内存使用总是受到控制。

Answer 1

如果一个页面加载了它的所有元素并且它没有改变，那么无论DOM元素的数量多少都没有理由它变慢。但是，如果您有动态页面，则会有大量操作导致整个布局重绘自身。这称为layout thrashing，可能会对性能产生巨大影响。

Answer 2

最明显的是，您的浏览器消耗了所有内存，并且在滚动期间呈现内容时，例如它没有更多内存。 如果没有内存问题，那么JohanP就是写的 - 没有理由。

Answer 3

为什么浏览器在加载大量数据时会变慢？因为他们必须加载大量数据。就负载速度而言，大图像显然是最糟糕的罪魁祸首，但页面负载与传输的千字节数直接相关。如果你有很多代码，它将有一个大的文件大小。

对于JavaScript，泄漏有四个主要原因：

1. 意外全局变量 - 未明确定义的变量将采用全局范围：

   function foo(arg) { bar = "This is a global variable"; }

2. 被遗忘的计时器或回调 - 在setInterval(function() {})等定时函数中声明变量时，变量在间隔结束时仍然存在。

   < / LI>

3. 超出DOM引用 - 分配对元素的引用（稍后删除）时，引用仍然存在：

   var button: document.getElementById('button'); document.body.removeChild(document.getElementById('button'));

4. 闭包 - 循环通常不会“正确”关闭，丢失变量范围，并在此过程中泄漏。请参阅 JavaScript closures 。

有关JavaScript内存泄漏的详细信息，请参阅 4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 。

希望这有帮助！