通过 Javascript 更新 DOM 导致内存泄漏（仅在 Firefox 中？）答案

【问题标题】：Updating DOM via Javascript causing memory leaks (only in Firefox?)通过 Javascript 更新 DOM 导致内存泄漏（仅在 Firefox 中？）
【发布时间】：2011-09-22 15:50:14
【问题描述】：

我知道以前有人问过这个问题，但似乎没有一个答案能解决这个问题。我正在测试一个 AJAX 网页，它通过 javascript 更新 DOM 中的元素。

每分钟，都会向服务器查询新数据，并相应地更新 DOM。据我所知，Chrome 中此页面的内存使用量有所增长，但不会太多（它从 40 MB 左右开始，最大可能达到 80 MB）。然而，在 Firefox 中，内存使用量从大约 120 MB 开始，可以扩展到超过 400 MB。我已经使用 Firebug 逐步完成了 Javascript，当通过我的 Javascript 方法更新 DOM 时，内存似乎扩展得最多。

DOM操作很简单，比如：

var myTable = document.createElement("table");

var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th = document.createElement("th");
th.appendChild(document.createTextNode("column1"));
tr.appendChild(th);

for(var test in obj.testObjs){
    th = document.createElement("th");
    th.appendChild(document.createTextNode(obj.testObjs[test].myVar));
    tr.appendChild(th);
}

在将新数据附加到 DOM 中的节点之前，我首先清除现有数据。我尝试了很多方法，包括这里描述的：How to remove DOM elements without memory leaks?

还有一个简单的方法比如：

function clearChildren(node){
    if(node != null){
        while (node.hasChildNodes()) node.removeChild(node.firstChild);
    }
}

我还读到 (Cyclic adding/removing of DOM nodes causes memory leaks in JavaScript?) 浏览器只有在达到一定级别时才开始收集垃圾？可以确认吗？由于内存不断增长，我感觉我的电脑在一段时间后运行缓慢。

我觉得必须有一个解决方案，因为我测试过执行相同功能步骤的商业网站不会导致内存使用量增加。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： javascript ajax firefox memory-leaks dhtml

【解决方案1】：

可以确认吗？

视情况而定。

一般来说，浏览器会在他们喜欢的时候进行 GC，并且启发式方法可以经常更改。我怀疑如果您每晚尝试 Firefox，您会看到与上面描述的完全不同的行为。自 Firefox 5 发布以来，至少有 2 次 GC 启发式更改。

【讨论】：

我们现在是什么FF版本？我迷路了
Firefox 5 是当前的稳定版本。 6 计划于 8 月中旬举行。

【解决方案2】：

innerHTML=''

准备变量用于 GC 处理的方法是错误的。
您需要对元素和该元素引用的每个元素使用 delete 函数。
很多，对吧？
这就是为什么我们有为我们编写的 JS 库。我检查了 Mootools 中的代码（下载并搜索 destroy），在我看来它写得正确。
我想其他图书馆也一样。

【讨论】：

感谢您的回复 - Mootools 会干扰 JQuery 吗？我一直在我的网站上使用 JQuery，在尝试使用 Mootools destroy() 函数时，我收到一个 JS 错误，提示“destroy() 不是函数”
您需要正确设置才能一起玩（在我的网站上他们做得很好）。就像，在 Mootools 依赖代码中不要使用 $，您需要使用 document.id('selectors...')
谢谢 - 现在似乎内存使用量并没有持续增长，而且我确实看到它有时会缩小。感谢您的帮助。