检测 dom 节点是否被 js 强引用持有，需通过 chrome devtools 堆快照对比、detached 节点筛选及 retainers 引用链分析：先拍空闲态与操作后快照并对比新增 dom；再筛选 detached 节点查 retained size；最后展开 retainers 定位闭包、事件监听器或缓存导致的持有源。
检测 DOM 节点是否被 JS 对象强引用持有，关键不是看它“还在不在页面上”，而是看它“明明已脱离文档，却仍驻留在内存里”。核心方法是借助 Chrome DevTools 的堆快照（Heap Snapshot）对比 + Detached 节点筛选 + Retainers 引用链分析。
一、抓取有意义的对比快照
单张快照看不出问题，必须有参照：
- 在页面空闲、无交互时拍第一张快照（Snapshot 1），作为基准
- 执行一次可能引发泄漏的操作（比如打开弹窗、渲染组件、切换路由），然后手动触发垃圾回收（点击 Memory 面板的垃圾桶图标）
- 立即拍第二张快照（Snapshot 2）；如有必要，重复操作+GC+快照，获取 Snapshot 3 观察增长趋势
- 选中 Snapshot 2，在右上角视图切换为 Comparison，与 Snapshot 1 对比，重点关注新增（New）数量异常的 DOM 类型（如 HTMLDivElement、SVGElement）
二、聚焦 Detached DOM 节点
Detached 是 Chrome 标识“已从 DOM 树移除但 JS 仍在引用”的专用标记：
- 在快照视图左上角 Class filter 输入框中，直接输入 Detached，回车——所有脱离文档却未被回收的节点会高亮列出
- 也可输入具体节点类型（如 HTMLButtonElement），再观察其右侧是否带 (detached) 后缀
- 点击某类 Detached 节点，在下方 Summary 或 Objects list 中查看其 Retained Size：数值越大，说明它连带持有的其他对象越多，泄漏影响越严重
三、顺藤摸瓜看 Retainers 引用链
Retainers 列表显示的是“谁拽着这个节点不让 GC 回收”，这是定位根源的突破口：
- 展开某个 Detached 节点的 Retainers，逐层向上点开引用路径（常见起点包括 closure、EventListener、Map、Object）
- 若看到
closure → someHandler → element：说明某个闭包函数捕获了该 DOM 节点，且该函数被长期持有（如挂载在全局、事件回调未解绑、定时器未清除） - 若看到
EventListener → handler → element：重点检查是否在元素移除前忘了调用removeEventListener，或监听器绑定在window/document等长生命周期对象上 - 若看到
myCacheMap → key → element：说明用了Map或普通对象缓存 DOM，但没在节点销毁时同步清理对应条目
四、辅助验证与快速确认
快照分析之外，还有几个低成本验证手段：
- 在控制台运行
getEventListeners(document.getElementById('xxx'))，检查目标元素是否仍有残留监听器 - 打开 Elements 面板，右键目标元素 → “Break on” → “node removal”，看移除时是否有 JS 代码意外阻止或重引用
- 用 Performance 面板录制操作过程，勾选 Memory 复选框，观察 JS Heap 和 DOM Nodes 曲线是否同步持续上升，且手动 GC 后回落不明显
- 若怀疑是缓存导致，搜索代码中是否出现
const cache = new Map()或someObj.domRef = el类写法，尤其注意模块级或类实例属性上的长期持有
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
