用Chrome DevTools堆快照定位DOM引用泄漏，需先拍“before”快照，执行清理后拍“after”，在Comparison视图中筛选Detached节点，通过Retainers追查JS持有者，结合常见关键字和Dominators视图定位根级泄漏源。
直接用 Chrome DevTools 的堆快照（Heap Snapshot）定位 JS 项目中遗留的 DOM 引用，核心是抓住“本该被回收却仍被 JS 对象强持有”的异常引用链。关键不在于找 DOM 节点本身，而在于找出那些不该活这么久、却把 DOM 节点拽在手里的 JS 对象。
先拍快照，再对比变化
DOM 引用泄漏往往发生在用户操作后（比如关闭弹窗、切换路由、销毁组件），但节点没被释放。正确做法是：
- 在疑似泄漏前（如打开弹窗后），点击 Memory 面板 → Take heap snapshot，命名为 “before”
- 执行清理动作（如点击关闭、离开页面、调用 dispose()），等待几秒让 GC 发生
- 再拍一张快照，命名为 “after”
- 在快照列表中选中 “after”，顶部切换到 Comparison 视图，左侧选 “before”
- 按 Constructor 排序，重点关注 Detached HTMLDivElement、Detached HTMLButtonElement 等带 Detached 前缀的构造器 —— 它们就是已从 DOM 树移除、却仍在内存中的节点
顺着 retainers 追查 JS 持有者
找到 Detached 节点后，双击它进入详细视图，切到 Retainers 标签页。这里显示的是“谁在引用它”。重点看最顶层的几层：
- 如果上层是 Closure 或 Object，展开它，看属性名（比如
cache、handlers、instance、_el）—— 很可能就是你代码里某个长期存活的对象缓存了这个 DOM - 如果上层是 EventListener，说明事件监听器没卸载，检查是否漏掉了
removeEventListener，或用了匿名函数无法移除 - 如果上层是 WeakMap / WeakSet，通常安全；但如果是 Map / Set / 普通对象，则属于强引用，需确认是否及时
delete或clear()
关注常见泄漏模式对应的关键字
在 Retainers 或 Dominators 视图中搜索这些典型字段名，能快速定位问题源头：
- cache、map、registry：全局缓存对象未清理，例如把 DOM 节点作为 key 存进 Map
- handler、callback、on*：回调函数闭包捕获了 DOM 节点，且该回调被定时器、Promise、第三方库（如动画库）长期持有
- _ref、el、$el、dom：类实例属性直接保存了 DOM 引用，但实例没销毁（比如 Vue/React 组件卸载后，手动创建的 class 实例还在）
- __vue、__reactFiber：框架内部引用，一般不用管；但如果看到大量 Detached 节点关联着已卸载组件的实例，说明组件销毁逻辑有缺陷（比如异步回调中更新了已卸载组件的状态）
用 Dominators 视图看“谁占了大头”
如果 Detached 节点数量多、体积大，切到 Dominators 视图，按 Distance 或 Retained Size 排序。顶部几个深色节点往往是“根级持有者” —— 比如一个全局单例对象、一个未销毁的模块级变量、一个常驻的 event bus 实例。找到它，就等于找到了泄漏的“主干”。
不复杂但容易忽略。
