内存泄漏排查：Chrome DevTools 实战

用 Chrome DevTools 的 Memory 面板定位前端内存泄漏，从堆快照到时间线分析的完整排查流程。

一舟 2026年9月21日 1 分钟阅读

前端内存泄漏往往不引人注意，却会在长时间运行后导致页面越来越卡。本文介绍一套可复用的排查流程。

常见泄漏源

前端内存泄漏的高发场景：

未清理的定时器：setInterval 没有 clearInterval；
未解绑的事件监听：组件卸载后监听仍引用 DOM；
闭包持有大对象：长生命周期闭包引用了不再需要的对象；
游离的 DOM 引用：JS 变量持有已删除节点的引用。

用 Performance 面板初判

先在 Performance 面板录制一段操作，观察 JS Heap 曲线是否呈「锯齿上升」——正常应是周期性回落的锯齿状，若持续上涨则疑似泄漏。

堆快照对比法

打开 Memory 面板，选择 Heap Snapshot；
执行一轮操作后拍快照 A；
再执行一轮同样操作，拍快照 B；
比较 A/B 的新增对象，定位每轮操作后没有被回收的对象。

重点关注 Detached（游离 DOM）节点——它们本应被回收却仍被引用。

常见修复

组件卸载时清理定时器、解绑事件；
避免在模块顶层持有对组件实例的引用；
对大型数据，处理完及时置空引用。

useEffect(() => {
  const timer = setInterval(fn, 1000);
  return () => clearInterval(timer); // 清理
}, []);

结语

内存泄漏的排查考验耐心，但流程是固定的：初判 → 对比快照 → 定位引用链 → 修复清理。把「清理副作用」变成习惯，比事后排查更省心。