chrome memory面板核心是定位长期驻留的不该存活对象，需用dominators视图分析支配关系：拍快照→选dominators→排查retained size异常高的(closure)、detached dom或业务类，下钻retaining tree追源头，并结合allocation timeline验证泄漏。
Chrome Memory 面板不是用来“看内存结构”的工具，而是帮你识别谁在长期占用内存、谁阻碍了垃圾回收——核心是定位 不该存活却一直驻留的对象。关键不在结构本身，而在对象间的支配与引用关系。
先拍快照，再选对视图
打开 DevTools → Memory 面板 → 点击 “Take heap snapshot” 拍摄堆快照。快照加载后，左上角下拉菜单必须选 Dominators（支配者）视图——这不是“堆树图”，但它是唯一能直接揭示“谁卡住释放”的逻辑树。Summary、Containment 或 Comparison 视图无法替代它。
- Dominators 视图按 Retained Size 降序排列，前几行就是高风险目标
- 跳过 window、document、globalThis 这类顶层宿主对象——它们必然排第一，但问题藏在它们的某个属性里（比如 window.cache、document._handlers）
- 别点错：选错视图会导致你花半小时看错路径
盯住三列，快速识别可疑对象
每行代表一个支配者节点，重点看：
- Constructor：关注 (closure)、Detached DOM、你的业务类名（如 ApiClient、ModalManager），而不是 Object 或 Array 这类泛型
- Retained Size：该对象及其整个支配子树占的总内存。若数值异常高（比如几 KB 的 closure 拖着 80MB），说明它锁住了大量下游对象
- Shallow Size：对象自身大小。Retained Size 远大于 Shallow Size，是闭包或缓存泄漏的典型信号
双击下钻，顺引用链追到源头
双击某一行，右侧自动展开 Retaining Tree（支配路径），它显示这个支配者“直接支配了哪些对象”：
- 看到 (closure)，展开看它捕获的变量：是不是已卸载组件的 this？是不是未清理的 Map 缓存？
- 看到 HTMLDivElement 或 DocumentFragment 带有 detached 标记，说明 DOM 已被移除，但仍有 JS 引用——检查 Retaining Tree 中是否有 EventListener、data 属性或 Vue/React 组件实例
- 右键某行 → “Reveal in Summary view”，跳转后点击 Constructor 名称，可查同类对象总实例数，确认是否异常堆积
配合时间轴，验证泄漏行为
单次快照只能定性，要确认是否真泄漏，需结合 Allocation Timeline：
- 在 Memory 面板选择 “Record allocation timeline”，点击录制 → 执行疑似泄漏操作（如反复打开关闭弹窗）→ 停止录制
- 观察蓝色柱状图（新分配）是否持续不回落，尤其注意操作结束后是否还有大片蓝色残留
- 暂停录制后手动触发 GC（点击垃圾回收图标），再对比快照——若对象数量没下降，基本可判定泄漏
