使用 Jquery 1.10.2 的 Ajax 内存泄漏答案

【问题标题】：Ajax Memory Leak with Jquery 1.10.2使用 Jquery 1.10.2 的 Ajax 内存泄漏
【发布时间】：2014-02-18 05:21:48
【问题描述】：

我在使用 Ajax 时出现内存泄漏，每次调用 ajax 后 Firefox 的内存使用量都会增加。

我使用 jQuery 1.10.2。

是否有针对此错误的解决方法/修复？

编辑：我使用 $.post 而不是 $.ajax。

任何 $.post 函数都会导致泄漏：

$(".Button1").on("click", function(){
    $.post(document.location, "data1=1", function(data) {
        $("#mainDiv").html(data);
    });
});

这是一个示例代码，每次点击按钮内存占用都会增加。

编辑2： 我也在 Chrome 上测试过，同样的问题，所以问题出在 jQuery 上。

我已经尝试过这种解决方法： http://bugs.jquery.com/ticket/10824

但问题依然存在。

当我使用 setInterval 每 10 秒运行一次 Ajax 函数时，这一点会更加明显，此时内存会急剧增加。

【问题讨论】：

您的问题缺少足够的信息来诊断问题。请发布代码的相关部分并详细说明泄露的数据。
听起来应该是 Firefox 的错误报告，而不是 StackOverflow 问题。
@Frederic 查看示例代码
@Venemo 我也在 Chrome 上测试过，同样的问题
如果您通过 AJAX 响应将数据附加到生成的 HTML 中，则可能会导致问题，然后每次运行 AJAX 请求时，之前在 #mainDiv 中的 DOM 元素被销毁，但相关数据可能保持不变。请参阅此堆栈溢出：jQuery memory leak with DOM removal

标签： jquery memory memory-leaks

【解决方案1】：

我认为您正在将整个文档加载到 div 中，然后再次单击，依此类推，因此您不是在加载页面，而是在 div 中加载页面。如果在文档中加载数据会发生什么？

【讨论】：

在实际代码中，我在 div 中加载 div 内容，使用： var html = $(data); $("#mainDiv").replaceWith(("#mainDiv", html));
有什么不同吗？

【解决方案2】：

我找到了问题的原因，是html()函数，如果我使用innerHtml问题就解决了。

我想我找到了使用 html() 函数停止内存泄漏的解决方案：

我将 mainDiv 对象保存到一个变量中，然后只将此变量传递给 $.post：

var main = $("mainDiv");
$(".Button1").on("click", function(){
    $.post(document.location, "data1=1", function(data) {
        main.html(data);
   });
});

并且内存泄漏减少到最低限度（仍然有一些轻微的内存泄漏，但我认为不是来自代码）。

【讨论】：

将对象保存在 cache 中，可以提供小的改进。真正的问题可能是在 #mainDiv 中替换 HTML 时引起的，如果您将数据附加到生成的 HTML，那么每次运行 AJAX 请求时，DOM 之前在#mainDiv 中的元素被销毁，但相关数据可能保持不变。请参阅此堆栈溢出：jQuery memory leak with DOM removal