17370845950

Chrome DevTools Memory面板堆快照比对是定位JS内存泄漏最直接方式：执行操作后拍三次快照，用Comparison视图查#Delta为正且数量持续上升的对象，再通过Retainers树定位未清理的事件监听、全局变量、定时器或DOM引用。

JavaScript 内存泄漏不会立刻报错，但会导致页面卡顿、崩溃或持续增长的内存占用——关键不是“有没有泄漏”，而是“怎么确认它正在发生、来自哪段代码”。

用 Chrome DevTools 的 Memory 面板做快照比对

这是定位泄漏最直接的方式：触发疑似泄漏的操作（比如反复打开关闭模态框），然后手动拍三次堆快照（Heap Snapshot）并比对。

• 打开 DevTools → Memory → Heap Snapshot，点击录制图标拍下 Snapshot 1（初始状态）
• 执行操作（如渲染列表 → 删除 → 重新渲染），再拍 Snapshot 2 和 Snapshot 3
• 切换到 Comparison 视图，选中 Snapshot 3 并对比 Snapshot 1，重点关注 Constructor 列中数量持续上升且 #Delta 为正的对象（如 Closure、Array、自定义类名）
• 点开某行，右侧的 Retainers 树会显示谁持有着这些对象——常见泄漏源是未清理的 addEventListener、全局变量引用、定时器闭包、DOM 节点被 JS 变量意外保留

用 Performance 面板录制定时器和 DOM 引用异常

某些泄漏不体现在堆快照里（比如频繁创建又丢弃的定时器），Performance 面板能抓到运行时行为模式。

• 在 Performance 面板勾选 Memory 复选框，点击录制，执行操作（如滚动加载），停止后查看内存曲线是否阶梯式上涨
• 展开 Bottom-Up 或 Call Tree，筛选 setInterval、setTimeout、attachEvent 等调用，看是否随操作次数线性增加
• 注意 Detached DOM tree 条目：表示 DOM 节点已被移除但仍有 JS 引用（比如缓存了 document.getElementById('xxx') 后没置空），这类节点会持续占内存

用 window.performance.memory 做轻量级运行时监控

适合在测试环境或灰度阶段加一段简单检测逻辑，不依赖 DevTools。

立即学习“Java免费学习笔记（深入）”；

• window.performance.memory 提供 usedJSHeapSize、totalJSHeapSize 和 jsHeapSizeLimit，但仅 Chromium 内核可用
• 不要只看绝对值，要关注相对变化：比如连续 5 次操作后 usedJSHeapSize 增长 > 20MB 且未回落，就值得怀疑
• 示例检测逻辑：

let lastUsage = window.performance.memory?.usedJSHeapSize || 0;
function checkMemoryLeak() {
  const current = window.performance.memory?.usedJSHeapSize || 0;
  if (current - lastUsage > 10 * 1024 * 1024) { // 增长超 10MB
    console.warn('Possible memory leak detected', { lastUsage, current });
  }
  lastUsage = current;
}
// 在关键生命周期钩子（如组件卸载后）调用 checkMemoryLeak()

第三方工具只起辅助作用，别依赖它们自动报警

像 heapdump（Node.js）、memwatch-next 或前端 @airbnb/webpack-plugin-memory-leak-detector 这类工具，要么不适用于浏览器环境，要么只能捕获粗粒度趋势，无法定位具体对象链。

• 浏览器里真正有效的仍是 DevTools 自带工具——其他库多数只是封装了 performance.memory 或轮询快照，掩盖了分析过程
• 自动化脚本（如 Puppeteer + heap snapshot 导出）可行，但必须配合人工比对 Retainers，否则一堆 Closure 数字毫无意义
• 真正难的是区分“合理缓存”和“泄漏”：比如一个常驻的 Map 存了 1000 个项，是业务需要还是忘了 .clear()？得看代码上下文，工具给不出答案

内存泄漏的本质是引用关系没按预期释放，而 DevTools 的 Retainers 视图是唯一能让你“看见”这个关系的地方。截图、保存快照、比对三次以上——这些枯燥动作没法跳过。