使用chrome devtools memory面板拍三张堆快照并对比，可精准定位js内存泄漏：基线快照→操作后快照→重复操作后快照，通过comparison模式分析delta增长项及retainers引用链，结合detached过滤快速识别未释放dom或闭包引用。
直接用 Chrome DevTools 的 Memory 面板拍堆快照（Heap Snapshot），是定位 JavaScript 内存泄漏最有效的方式之一。关键不是“拍得多”，而是“比得准”——通过对比操作前后的快照，找出异常增长、长期驻留的对象。
打开 Memory 面板并准备录制
确保页面处于稳定状态（无动画、无轮询、无持续日志输出）。在 Chrome DevTools 中切换到 Memory 面板，选择 “Heap snapshot” 模式。勾选 “Record allocation stack traces”（记录分配堆栈），这能让后续看到对象是在哪行代码创建的。
分阶段拍摄三张快照
- 第一张：页面加载完成、交互前，作为基线；
- 第二张：执行一次疑似泄漏的操作（如打开一个弹窗、加载一组列表）；
- 第三张：重复该操作 3–5 次后拍摄，或执行“打开→关闭→再打开”循环若干次。
注意每次操作之间稍作等待（1–2 秒），让 GC 有机会回收短期对象，避免噪声干扰。
用 Comparison 模式找增长项
将第三张快照设为当前视图，顶部下拉选择 “Comparison”，再选第一张快照作对比。重点看 Delta 列：
- 正数表示新增实例，负数表示释放；
- 关注
#Delta > 0且数值持续变大的条目，尤其是：-
HTMLDivElement、SVGElement等 DOM 类型（提示 Detached 节点）； -
(closure)（闭包，常因事件监听、定时器或缓存持有外部引用）； - 你项目中自定义的类名（如
ChartView、ModalManager）； -
Array、Object、Map实例数量异常上升（可能缓存失控或数据堆积）。
-
点开可疑构造函数，查 Retainers 链
点击某一行（比如 MyComponent），右侧展开 “Retainers” 树。这是最关键的一步：它显示“谁在引用这个对象”。常见保留者包括：
-
window→ 表明被挂到了全局； -
EventListener→ 对应未解绑的addEventListener； -
setInterval/setTimeout→ 定时器回调仍活跃； -
Map.entries或Object.<property></property>→ 缓存结构仍在持引用； -
bound或function→ 闭包函数被长期持有。
顺着 Retainers 往上逐层点开，最终会落到具体变量名或调用栈位置，基本能定位到源码中的问题语句。
配合 Detached DOM 过滤快速验证
在快照搜索框输入 Detached，可直接列出所有已从 DOM 树移除但仍被 JS 引用的节点。点击任一节点，在 Retainers 中查看是谁在 hold 它——大概率是缓存了 DOM 元素、事件监听未清理，或 React/Vue 组件卸载后仍有闭包引用 this 或 ref。
不复杂但容易忽略。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
