DOM节点隐藏不等于移除或回收，只要被JS引用或仍在文档树中就不会被GC释放；需用el.isConnected判断是否脱离文档，用remove()真正移除，避免强引用和普通对象缓存，用WeakMap和堆快照定位Detached节点，及时清理事件监听器。
DOM节点被隐藏（比如用display: none或visibility: hidden）不等于被移除，更不等于被回收。只要 JavaScript 还持有它的引用，或者它仍挂在文档树中，GC 就不会释放它——哪怕你再也看不见它。
看 DOM 是否真被移除，而不是仅被隐藏
很多“泄漏”其实源于误判：以为el.style.display = 'none'就等于“不用了”，但节点还在 document 里，所有子元素、绑定事件、计算样式都照常存在。真正要检查的是它是否还存在于 DOM 树中。
- 用 Chrome DevTools 的 Elements 面板搜索该节点，确认它是否仍在 HTML 结构中（哪怕不可见）
- 在 Console 执行
el.isConnected——返回false才说明已脱离文档；若为true，即使隐藏了也属于活跃 DOM - 检查是否用了
innerHTML = ''或textContent = ''清空内容，但这不等于移除节点本身；要用el.remove()或parent.removeChild(el)才能真正断开
查 JS 是否还在强引用这个节点
最常见泄漏路径是：节点被 remove 后，JS 变量、闭包、全局对象、缓存数组/Map 里还存着它。
- 搜索代码中类似
const chartEl = document.getElementById('chart')的赋值，确认后续有没有chartEl = null或从缓存结构中删除 - 避免用普通对象缓存 DOM：
cache['chart'] = el→ 改用WeakMap，以 DOM 元素为键，这样节点被 GC 后，WeakMap 自动丢弃对应条目 - 检查 Vue/React 组件内是否把 DOM 节点赋给了
this.$refs、ref或实例属性，并在beforeUnmount/useEffect cleanup中未清理
用堆快照定位 Detached DOM 节点
Chrome / Edge 的 Memory 面板能直接揪出“脱离文档却仍被引用”的 DOM 节点。
立即学习“Java免费学习笔记（深入）”；
- 打开 Memory 面板 → 选 “Heap Snapshot” → 点 “Take snapshot”
- 在快照中切换到 Summary 视图，筛选构造函数为
HTMLDivElement、HTMLCanvasElement等的类型，看 Distance 列：值为 0 表示直连根（如 window），值很大但 Retained Size 显著增长，很可能是 Detached 节点 - 切到 Containment 视图，展开
(window)→Global Properties，逐层查看谁在持有一个已 remove 的节点
验证事件监听器是否残留
即使 DOM 节点已 remove，如果没调用removeEventListener，监听器仍绑定在它身上，而浏览器会保留整个节点防止回调执行时出错。
- 在 Elements 面板右键目标节点 → “Break on” → “attribute modifications”，观察是否还有动态添加 class 或 style 的行为干扰判断
- 用
getEventListeners(el)（DevTools Console）检查该节点是否仍有监听器注册——注意：此方法对已 remove 的节点可能返回空，需在 remove 前执行 - 优先使用
addEventListener(..., { once: true })，或统一用AbortController.signal控制监听器生命周期
