Ajax页面刷新致Firefox崩溃？如何解决内存占用过高问题

嘿，这个问题我做项目时也踩过坑！用setInterval配合.load()定时刷新表格，确实容易在长时间运行后出现内存泄漏，Firefox的内存检测工具总能揪出这个问题。咱们来一步步拆解原因，然后给出可行的解决办法：

为什么会出现内存泄漏？ #

• .load()本质是封装了AJAX请求，每次调用都会用新的DOM元素替换旧表格。如果旧表格上绑定了事件、或者有其他代码保留了对旧元素的引用，浏览器的垃圾回收机制就没法回收这些内存，次数多了内存就会越积越多。
• setInterval是“到点就触发”的，哪怕某次AJAX请求超时、失败或者还在pending状态，它依然会按时发起新的请求，导致多个请求堆积，进一步加剧内存压力。

具体解决方法 #

1. 先清理旧表格的事件与内容，再刷新

在替换表格内容前，手动解绑旧元素上的所有事件，清空子元素，避免残留引用：

var url_one = './url_one';
var url_two = './url_two';

$(window).on("load", function() {
  setInterval(function() {
    // 清理第一个表格的事件和内容
    $("#firstTable").off().empty();
    $("#firstTable").load(url_one);
    
    // 清理第二个表格的事件和内容
    $("#secondTable").off().empty();
    $("#secondTable").load(url_two);
  }, 60000);
});

这里.off()会移除表格元素上所有绑定的事件，.empty()清空子节点，让旧元素失去引用，方便垃圾回收。

2. 用setTimeout替代setInterval，避免请求堆积

setInterval的最大问题是不管上一次请求是否完成都会触发新请求，换成setTimeout，在每次刷新完成的回调里再触发下一次，能保证请求串行执行：

var url_one = './url_one';
var url_two = './url_two';

function refreshTables() {
  // 先刷新第一个表格，完成后再处理第二个
  $("#firstTable").off().empty().load(url_one, function() {
    $("#secondTable").off().empty().load(url_two, function() {
      // 两个表格都刷新完成后，再设置下一次定时
      setTimeout(refreshTables, 60000);
    });
  });
}

$(window).on("load", function() {
  // 启动首次刷新
  refreshTables();
});

这种方式既不会让请求排队，也给了浏览器足够的时间回收内存。

3. 改用事件委托，减少重复绑定

如果你的表格行/单元格需要绑定点击等事件，别直接绑定在表格元素上，改用事件委托绑定在父元素（比如document或者表格的容器）上：

// 事件委托：只绑定一次，表格刷新后依然有效
$(document).on("click", "#firstTable tr", function() {
  // 处理表格行的点击逻辑
});

事件委托不需要每次刷新表格都重新绑定事件，既节省内存，也避免了重复绑定导致的内存泄漏。

4. 排查其他内存泄漏点

可以用Firefox的开发者工具（内存面板）做几次内存快照，对比刷新前后的内存变化，看看有没有未被回收的DOM对象或者全局变量。比如有没有全局变量不小心持有了表格元素的引用，或者第三方插件在表格上留下了残留数据，这些都可能是内存泄漏的隐藏点。

内容的提问来源于stack exchange，提问作者majkoz0rd