排查JavaScript内存泄漏的核心是“观察增长、定位引用、验证释放”，需用Chrome DevTools拍摄对比堆快照、分析Detached DOM和Closure引用、录制分配时间线并监控内存趋势。
排查 JavaScript 内存泄漏，核心是“观察增长、定位引用、验证释放”。它不是靠猜，而是用工具捕获内存行为，再结合代码逻辑确认谁在阻止垃圾回收。
用 Chrome DevTools 拍摄并对比堆快照
这是最直接有效的手段。打开 DevTools → Memory 面板 → 选择 “Heap snapshot” → 点击 “Take snapshot”。
- 先在页面空闲时拍一张基线快照（Snapshot #1）
- 执行疑似泄漏的操作（比如反复打开/关闭某个模块 3–5 次）
- 再拍一张（Snapshot #2），必要时再操作一次拍第三张（Snapshot #3）
- 选中最新快照，切换视图到 “Comparison”，与 Snapshot #1 对比
- 重点关注 Delta 列中持续增加的类型：如 Detached DOM tree、Closure、自定义类名、Array 或 Object
检查分离的 DOM 节点和闭包引用
很多泄漏源于 JS 仍持有已从页面移除的 DOM 元素，或闭包意外捕获了大对象。
- 在堆快照中搜索关键词 detached，查看哪些节点被标记为脱离文档但仍被引用
- 点击某个 Closure 实例，展开 “Retainers” 查看谁在持有它——可能是全局变量、事件监听器、定时器或缓存 Map
- 特别留意闭包中是否引用了
this、大型数组、组件实例或未清理的 DOM 引用
录制内存分配时间线
适合发现短期对象堆积或某次操作后内存未回落的情况。
立即学习“Java免费学习笔记（深入）”；
- 在 Memory 面板中选择 “Allocation instrumentation on heap” 或 “Record allocation timeline”
- 开始录制，执行操作，停止录制
- 观察蓝色柱状图（新分配对象）和灰色背景（存活对象），若某段操作后灰色区域持续增厚，说明对象未被回收
- 点击柱子可跳转到对应代码位置，快速定位分配源头
监控实时内存使用趋势
辅助判断是否存在缓慢但持续的泄漏。
- 在 Performance 面板中勾选 “Memory”，开始录制，操作页面一段时间后停止
- 查看内存曲线是否呈现阶梯式上升（每次操作后不回落）或持续爬升
- 也可在控制台运行简易检测脚本：
setInterval(() => console.log('Heap:', (performance.memory.usedJSHeapSize / 1048576).toFixed(2) + ' MB'), 3000)
