jQuery (2.0.2) empty() html() 内存消耗持续增长答案

【问题标题】：jQuery (2.0.2) empty() html() Memory Consumption Continually GrowsjQuery (2.0.2) empty() html() 内存消耗持续增长
【发布时间】：2013-06-10 08:49:00
【问题描述】：

我已经为这个问题苦苦挣扎了 3 天，希望有人能提供一些我还没有遇到的信息来帮助我（我很绝望！）。提供一些上下文：

浏览器：IE9.0.8112.16421（64位）； jQuery 版本：2.0.2

基本上我所做的是进行一个简单的 ajax 调用并检索一些信息，然后通过成功处理程序将这些信息插入到元素中。相关代码行如下所示：

var onLoadViewGroupSuccess = function(data) {        
    var target = $("#viewGroupContent");
    //for(var i=0;i<1000;i++) {
        target.empty().html(data);
    //}
}

target对应如下html标签：

<tr id="viewGroupContent">...</tr>

上面注释掉的 for 循环旨在放大问题（通过单个事件点击触发器很难检测到）。基本上，当循环到位时，单次调用的内存从 46MB 变为 ~113MB。

随后的调用表现出相同的行为，内存不断增长。我最初认为这是一个我未能清理的事件处理程序的问题，但排除了这一点，因为我注释掉了我几乎所有的 javascript 逻辑，所以上面的内容基本上就是所有内容（即没有绑定事件处理程序，没有自定义对象或函数调用） - 即不是关闭问题。

将 for 循环移到 ajax 调用之外（因此进行 1000 次 ajax 调用）会产生相同的内存配置文件（因此排除了任何模糊的 ajax 内存泄漏）。我插入的内容是一个包含大量内容的 TD 标记（即您可以想到的每个 HTML 标记的实例，包括图像），所以想知道我插入的内容是否是导致泄漏的原因。

我已经阅读了一些关于 IE 自身清理能力的有趣博客文章，包括以下似乎最有希望的文章 (http://com.hemiola.com/2009/11/23/memory-leaks-in-ie8/)。不幸的是，到目前为止还没有解决方案或变通方法。

我很茫然，因为我已经将我的应用程序剥离到了最基本的部分，而 $(...).empty().html(...) 无能为力。内存泄漏缓慢但持久....

另外，作为一个仅供参考，我已经尝试了使用 innerHTML、DOM 方法的非 jQuery 解决方案来删除表格行并重建它，然后将 ajax 内容插入表格单元格，将丢弃的内容移动到垃圾箱 DIV 和然后调用innerHTML，一切都无济于事，而且在许多情况下使泄漏变得更糟......

【问题讨论】：

请添加一些段落，让这堵文字墙更容易阅读。
@FelixKling 希望更好...
在.html()之前做.empty()有什么用？ .html()在添加值之前更改整个html不是清空DOM吗？
空的我很确定是多余的，但我相信你是对的，所以我很绝望，html 可能就足够了，但把它留在里面（但两者都试过了，但没有影响）
这种行为是 IE9 特有的吗？你在其他IE上测试过吗？铬合金？火狐？

标签： jquery performance memory memory-leaks

【解决方案1】：

请参阅上面我的最终评论，看来我认为内存泄漏只是等待 GC 处理的对象，但由于我的应用程序的性质（即 99% 的导航通过 ajax 完成），IE 根本就没有执行完整的 GC，直到发生实际的页面导航（即 window.top 已卸载）。注销时碰巧注意到这一点，突然我的 IE 实例的内存从 200-63MB 骤降……我尝试手动调用 GC（但这似乎不起作用……）。所以现在，要用实际的页面导航代替每 n 个 ajax 导航来清理这些东西……并不理想，但暂时会这样做，直到我能找到更好的方法。

【讨论】：

【解决方案2】：

尝试更新 jQuery 库，看看是否有一些改进。

并且，删除“empty()”函数。这不是必需的，因为 html() 将覆盖所有的寒意。这可以帮助您避免使用内存。

【讨论】：

【解决方案3】：

您是否尝试将接收到的数据放入您在下一次迭代中删除的包装元素中？

var onLoadViewGroupSuccess = function(data) {
    var target = $("#viewGroupContent");
    //for(var i=0;i<1000;i++) {
        target.find('>div').remove();
        target.append($('<div>').html(data));
    //}
}

如果有某种与clean() API 相关的泄漏，你可以摆脱它。

【讨论】：

【解决方案4】：

我也有同样的问题，这样解决：

JQuery setInterval with append, increase memory

您必须比较数据是否与目标相同。如果不是，则插入数据，否则，什么也不做。

【讨论】：