Chrome DevTools 堆快照定位对象泄露需“拍得准、比得清、看得深”：在空闲时拍Baseline，操作+清理后拍第二张，重复后可选第三张；对比时关注红色新增对象、Retained Size不降及Detached DOM；通过Retainers路径追踪至Closure、全局变量或未解绑监听器等源头，并结合DOM残留、定时器未清除、Map/Set缓存失控、闭包捕获大对象四类模式验证。
用 chrome devtools 堆快照定位对象泄露，核心是“拍得准、比得清、看得深”——不靠多拍，而靠在关键节点抓取内存状态，并通过对比和引用链锁定本该释放却滞留的对象。
找准时机拍三张关键快照
不是随便点几次“Take Heap Snapshot”，而是按操作生命周期精准捕捉：
- Baseline 快照：页面空闲、无动画、无定时器运行时拍下。可先点垃圾桶图标手动触发 GC，确保起点干净
-
操作后快照：执行目标动作（如打开又关闭模态框、进入并离开某路由页），再主动调用清理逻辑（如
removeEventListener、dispose()、清空数组/Map 引用），立刻拍下 - 重复后快照（可选）：重复上述操作 2–3 次后再拍一张，观察某类对象是否持续新增、Retained Size 是否阶梯式上涨
对比快照时盯紧三个信号
在 Memory 面板中选中两张快照 → 切换为 Comparison 视图 → 按 Constructor 或 Retained Size 排序：
-
红色 + 号行：代表新增对象。重点关注你代码里的类名（如
ChartView、Uploader、ModalController），数量异常增长就是强线索 - Retained Size 大且不回落：比如某个实例占几 MB，两次快照间几乎不变，说明它被长生命周期对象稳稳持有着
-
Detached 开头的 DOM 类型：如
Detached HTMLDivElement、Detached SVGElement，它们已脱离文档但仍存活，90% 以上由 JS 引用导致
顺着 Retainers 追到泄漏源头
点击可疑对象 → 右侧切换到 Retainers 标签页 → 再点 Retaining paths：
- 务必勾选 Show all objects（小齿轮设置里），否则 GC 可达但未回收的对象会被隐藏
- 重点看路径终点：如果是
Closure，往上查它属于哪个函数；如果是window.xxx或globalThis.cacheMap，基本确认是全局缓存未清理 - 路径中出现
EventListener但对应 DOM 已 Detached，说明监听器没解绑；出现setTimeout回调且定时器未清除，闭包就一直活着
结合典型泄漏模式交叉验证
快照中的异常表现，往往对应几类高频问题：
-
DOM 残留：Detached 节点被闭包或 Map 持有 → 检查事件绑定、React/Vue 组件卸载逻辑、
document.createElement后是否漏掉remove() -
定时器未清除：快照里看到大量
Timeout或Interval对象 → 查找setInterval是否配对clearInterval，尤其注意组件销毁时是否遗漏 -
Map/Set 缓存失控：构造函数为
MapEntry的对象数量暴涨 → 检查键是否为对象/函数，是否有过期清理机制 -
闭包意外捕获大对象：Retaining path 终点是 Closure，但其
Retained Size远超自身体积 → 看闭包内是否引用了整个组件实例、大数组或 File 对象
