内存泄漏的本质#

在 JavaScript 中，垃圾回收器（Garbage Collector, GC）负责自动回收不再使用的内存。然而，当某些对象被错误地保留引用时，GC 无法识别它们为”垃圾”，导致内存无法释放。这种意外保留的引用就是内存泄漏的根源。

小知识：JavaScript 采用**标记-清除（Mark-and-Sweep）**算法进行垃圾回收。GC 会从根对象（如全局对象、活动栈帧）出发，标记所有可达对象，然后清除未被标记的内存。

1. 被遗忘的定时器#

// 泄漏！即使组件已卸载，setInterval 仍在运行
function startTimer() {
  setInterval(()**** => {
    console.log("定时器仍在运行...");
  }, 1000);
}

// 修复方案：务必清除定时器
let intervalId;
function startTimer() {
  intervalId = setInterval(() => {
    console.log("定时运行...");
  }, 1000);
}
function stopTimer() {
  clearInte
  rval(intervalId);
}

🚨 特别注意：React 组件卸载后未清除的定时器会导致内存泄漏。

// React 组件中的定时器泄漏示例
function MyComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("组件已卸载但定时器仍在运行！");
    }, 1000);
  
    // 忘记返回清理函数
    // return () => clearInterval(timer);
  
    return () => {
      clearInterval(timer);
      console.log("定时器已清除");
    };
  }, []);

  return <div>我会泄漏内存</div>;
}

2. 游离的事件监听器#

// 泄漏！元素移除后监听器仍存在
document.getElementById('button').addEventListener('click', onClick);

// 修复方案：及时移除监听器
const button = document.getElementById('button');
button.addEventListener('click', onClick);

// 使用后...
button.removeEventListener('click', onClick);

🔥 专业建议：在 React 中，务必在useEffect的清理函数中移除事件监听。

useEffect(() => {
  const handleResize = () => {
    console.log("窗口大小改变");
  };

  window.addEventListener('resize', handleResize);

  // 清理函数
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

3. 闭包持有引用#

// 泄漏！闭包导致 bigData 无法释放
function processData() {
  const bigData = new Array(1000000).fill("💾");
  return function() {
    console.log("闭包仍持有 bigData 内存！");
  };
}

const leakedFn = processData();
// 只要 leakedFn 存在，bigData 就无法被垃圾回收

💡 修复方案：处理完大型变量后显式置为 null。

// 修复闭包泄漏的示例
function processData() {
  const bigData = new Array(1000000).fill("💾");

  // 使用后立即释放
  bigData = null;

  return function() {
    console.log("闭包不再持有 bigData");
  };
}

// 泄漏！移除的 DOM 节点仍被 JS 引用
let detachedNode = document.createElement('div');
document.body.appendChild(detachedNode);

// 移除后...
document.body.removeChild(detachedNode);
// 但 detachedNode 仍存在于内存中！

// 修复 DOM 节点泄漏
function createAndRemoveNode() {
  const node = document.createElement('div');
  document.body.appendChild(node);

  // 使用后...
  document.body.removeChild(node);
  node = null; // 显式释放引用
}

1. 拍摄堆快照（Heap Snapshot）#

1. 打开 Chrome DevTools（F12 或右键检查）。
2. 切换到 Memory 面板。
3. 选择 Heap Snapshot 选项。
4. 点击 Take Snapshot 按钮多次（操作前后各拍一次）。
5. 对比快照，查找新增但未被释放的对象。

堆快照分析技巧

• Comparison 模式：对比两次快照，找出新增的对象。
• Statistics 视图：查看哪些构造函数占用了最多内存。
• Retainers 面板：追踪对象的引用链，找出泄漏源头。

2.记录内存分配时间线（Allocation Timeline）#

1. 在 Memory 面板选择 Allocation instrumentation on timeline。
2. 执行可能触发泄漏的操作。
3. 停止记录后，查看内存分配情况。
4. 定位持续增长的内存分配区域。

3. 查看性能监控器（Performance Monitor）#

1. 打开 DevTools 的 Performance 面板。
2. 点击左下角的 Performance Monitor。
3. 观察以下指标：

• JS 堆大小（Heap Size）
• 文档节点数（DOM Nodes）
• 事件监听器数（Event Listeners）

性能监控器警示信号

• JS 堆大小持续增长：表明存在泄漏。
• DOM 节点数异常高：可能是 DOM 节点泄漏。
• 事件监听器数不匹配：说明有未移除的监听器。

1. 及时清理定时器和事件监听#

// 使用 WeakMap 管理定时器
const timerMap = new WeakMap();

function setupTimer(element) {
  const timer = setInterval(() => {
    console.log("定时器运行");
  }, 1000);

  timerMap.set(element, timer);

  return () => {
    clearInterval(timerMap.get(element));
    timerMap.delete(element);
  };
}

2. 避免全局变量#

全局变量会一直存在于内存中，直到页面刷新。使用模块化设计或立即执行函数（IIFE）限制作用域：

// 避免全局污染
(function() {
  const data = "不会被全局污染";
  // ...
})();

3. 使用 WeakMap/WeakSet 实现缓存#

WeakMap 和 WeakSet 的键是弱引用，当键对象被垃圾回收时，对应的条目会自动清除：

// 使用 WeakMap 缓存 DOM 元素关联数据
const elementCache = new WeakMap();

function cacheElement(element, data) {
  elementCache.set(element, data);
}

// 当 element 被移除时，缓存会自动清理

4. 长期运行测试#

通过 DevTools 监测内存变化：

1. 打开 Performance 面板。
2. 点击 Record 按钮，长时间运行应用。
3. 观察内存曲线是否持续上升。

内存泄漏的典型曲线

• 正常情况：内存使用在 GC 后回落。
• 泄漏情况：内存持续增长，GC 后仍保持高位。

场景1：React 组件中的事件监听#

// 泄漏示例
function MyComponent() {
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    // 忘记返回清理函数
  }, []);

  // 修复
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
}

场景2：Vue 组件中的定时器#

// 泄漏示例
export default {
  mounted() {
    this.timer = setInterval(this.updateData, 1000);
  },
  // 忘记在 beforeDestroy 中清除
  // 修复
  beforeDestroy() {
    clearInterval(this.timer);
  }
};

场景3：第三方库的订阅未取消#

// 泄漏示例
const unsubscribe = store.subscribe(this.handleStoreChange);
// 忘记调用 unsubscribe()

// 修复
const unsubscribe = store.subscribe(this.handleStoreChange);
return () => unsubscribe();