脱离文档树（detached DOM）泄漏是前端典型内存泄漏，指DOM节点已从文档移除但JS仍强引用致无法回收；常见于事件监听器未解绑、全局缓存未清理、闭包捕获及框架外操作DOM等场景。
DOM引用未释放导致的脱离文档树（detached DOM）泄漏，是前端内存泄漏中非常典型且容易被忽视的问题。核心在于：节点已被从文档中移除，但JavaScript仍持有对它的强引用，使其无法被垃圾回收器清理。
什么是脱离文档树节点
脱离文档树节点指已通过 remove()、innerHTML = ''、replaceChild() 等方式从DOM树中移除，但JS变量、闭包、事件监听器或缓存结构中仍保留对该节点（或其子节点）引用的元素。这类节点不再渲染，却持续占用内存。
常见触发场景
- 事件监听器未解绑：给动态创建的DOM节点绑定事件后，仅移除节点却不调用 removeEventListener()，尤其在使用匿名函数时无法精确解绑
- 全局或长生命周期对象缓存DOM引用：例如将节点存入 window.cache、模块级 Map 或类实例属性中，后续忘记清理
- 闭包意外捕获DOM引用：定时器、Promise回调、Ajax成功处理函数中引用了已卸载组件的DOM节点
- 框架边界问题：手动操作DOM（如用 document.getElementById）后，在React/Vue等框架更新时未同步清理原生引用
如何检测脱离文档树泄漏
Chrome DevTools 是主要手段：
- 打开 Memory 面板 → 点击 Take heap snapshot
- 快照加载后，在左上角筛选器输入 Detached，查看 Detached DOM tree 类型对象
- 点击具体条目，在右侧 Retainers 标签中追踪是谁持有了该节点（如 closure、global property、event listener）
- 对比多次操作（如打开关闭弹窗）后的快照，观察 Detached 节点数量是否持续增长
可靠释放策略
- 显式解绑事件：优先使用具名函数或 AbortController（现代推荐），避免匿名函数；组件销毁前统一调用 removeEventListener
- 清空引用再移除：在移除节点前，将相关变量设为 null，并从缓存结构中 delete / clear
- 利用 WeakMap / WeakSet：存储DOM关联数据时，用 WeakMap 替代普通 Object，使键（DOM节点）可被自动回收
- 框架内优先使用声明式API：如React中避免直接操作 ref.current，Vue中用 v-if 替代 v-show 控制存在性，让框架接管生命周期
不复杂但容易忽略——关键不是“有没有移除DOM”，而是“JS里还记不记得它”。每次手动操作DOM后，多问一句：这个引用，现在还需要吗？
立即学习“Java免费学习笔记（深入）”；
