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

Posted 2023-05-07

【中文标题】我们如何测试 `div.innerHTML=""` 是不是会占用内存直到页面刷新或浏览器关闭？

【英文标题】：how do we test if `div.innerHTML=""` will hog the memory until the page refreshes or the browser is closed?我们如何测试 `div.innerHTML=""` 是否会占用内存直到页面刷新或浏览器关闭？

【发布时间】：2011-09-13 23:43:54

【问题描述】：

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

我的问题是，如果我的假设是真的，我们该如何去检验？

【参考方案1】：

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

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

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

删除对现有 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?

【讨论】：

你告诉我 removeChild 比 innerHTML 更受欢迎，因为它包含在标准中，你给了我那个链接***.com/questions/718091/alternative-for-innerhtml。但是该链接的普遍共识是使用innerHTML，因为它是HTML5标准并且速度更快..