javascript - 我们如何测试 `div.innerHTML=""` 是否会占用内存，直到页面刷新或浏览器关闭？

Question

我怀疑如果我设置 div.innerHTML="" 而不是使用 while(div.firstChild)div.removeChild(div.firstChild) 内存将被占用，直到页面刷新或浏览器关闭。

我的问题是我们如何真正去测试我的假设是否正确？

Answer 1

首先，内存是否返回到系统取决于Javascript垃圾收集器(gc)，因此结果会因浏览器而异。

通过查看进程来测量内存使用情况很困难，因为存在多层内存管理。要了解这会产生什么影响，请考虑一个巨大的 javascript 对象可能已被永远删除，但该内存可能尚未释放回操作系统，因为 Web 浏览器可能会保留它以备您需要时使用创造更多的大物体。另一个例子是，大多数 gc 例程只是定期运行，因此对象可能仍在内存中，但稍后会被回收。

但是，确定特定操作是否泄漏内存非常容易，因为您所要做的就是无限循环地重复它。例如

1. 删除对现有 html 元素的引用
2. 构造新的 html 元素
3. 将它们添加到页面

试试这个代码:

var div = document.getElementById("test")

while(true) {

    // remove operation, change me
    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    // create some new content
    for(var i=0; i<1000; i++) {
        var p = document.createElement('p');
        p.appendChild(document.createTextNode('text'));
        div.appendChild(p);
    }
}

我在 Chrome 中使用任务管理器 (shift+esc) 得到的结果:

1. 让循环无限运行而不删除任何内容最终会导致出现“噢!快照”屏幕，这表明内存已耗尽
2. 使用removeChild技术可以使内存使用量稳定在750MB左右
3. 使用innerHTML技术可以使内存使用量稳定在750MB左右

如果内存没有泄漏，您会注意到与此类似的模式:增加到 300，下降到 150，增加到 400，下降到 250，最终稳定。这是内存管理系统内存不足，触发 gc 回收已释放的内存，并每次增加可用内存占用量，直到达到为避免进程影响其他进程而设置的软限制。这是一个典型的内存管理方案，可以通过阅读这篇维基百科文章找到更多内容:http://en.wikipedia.org/wiki/Garbage_collection_(computer_science)

由于这两种结果都稳定，我得出的结论是(至少对于 Chrome)这两种技术的工作原理是相同的，尽管您可能会从其他浏览器得到不同的结果。

由于似乎没有区别，因此应该首选removeChild，因为innerHTML 未包含在W3C 标准中，并且受到一些开发人员的反对。在这里查看更多:Alternative for innerHTML?

innerHTML 和removeChild 没有区别的原因是因为在底层，它们都必须取消引用元素以阻止它们在屏幕上可见。当您有循环引用(A 指向 B，B 指向 A，没有其他人指向任何一个)时，最有可能发生内存泄漏，但这只是旧版浏览器中的问题。此链接有一些关于如何避免 js 内存泄漏的良好指南:Javascript memory management pitfalls?