Question

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

我的问题是，如果我的假设是正确的，我们如何进行测试呢？

Answer 1

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

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

然而，很容易确定特定操作是否泄漏内存，因为您只需要在无限循环中重复它。 e.g。

删除对现有html元素的引用
构建新的html元素
将它们添加到页面

试试这段代码：

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）：

让循环无休止地运行而不删除任何内容最终导致“Aw！Snap”屏幕，这表示内存已耗尽
使用removeChild技术可以使内存使用率稳定在750MB左右
使用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?

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

1 个答案: