Detached HTMLDivElement数量随切换次数线性增长可通过Chrome内存快照对比确认：拍3次Heap Snapshot后在Comparison视图筛选Detached HTMLDivElement，若Delta列呈1→3→6→9式递增则存在DOM泄漏。
Detached HTMLDivElement数量随切换次数线性增长怎么确认
打开 Chrome DevTools → Memory → 拍 Heap Snapshot #1（刚加载完标签页）→ 执行一次“打开新标签 + 关闭旧标签”操作 → 等 2 秒 → 拍 Snapshot #2 → 再重复该操作 2 次，拍 Snapshot #3。切到 Comparison 视图，筛选 Constructor 为 Detached HTMLDivElement，看 Delta 列是否呈现 1 → 3 → 6 → 9 这类稳定递增趋势。不是“有没有”，而是“是否累积”。若每次都是 0 或 1 且不叠加，基本排除 DOM 泄漏。
el-tabs 动态添加后关闭不销毁的典型原因
ElementUI 的 el-tabs 默认不会销毁已关闭的 tab pane 节点，尤其当使用 v-show 隐藏而非 v-if 卸载时，DOM 和组件实例都还活着。更隐蔽的是：tab-pane 内部若用了第三方图表库（如 ECharts）、富文本编辑器（如 Quill），它们常自行绑定 window.resize 或 document.scroll，而未暴露 destroy 接口。
- 检查 Elements 面板里关闭后的 tab-pane 是否仍存在于 DOM 树中（非 display:none，而是真实存在）
- 在 Console 执行
getEventListeners(document)，看是否有残留监听器指向已关闭 tab 的节点 - 用
performance.memory.totalJSHeapSize对比开关前后数值，若增长 > 2MB/次，大概率有未释放资源
React/Vue 中手写 addEventListener 导致的闭包泄漏
框架只卸载组件，不帮你解绑原生事件。常见错误是：在 useEffect 或 onMounted 里用箭头函数绑定事件，却在 cleanup 阶段调用 removeEventListener('click', () => {}) —— 这个新箭头函数和之前绑定的不是同一个引用，解绑失败。
- 必须定义具名函数或用
useCallback，且依赖数组写全（比如漏了[props.id]就会每次生成新函数） - 优先用
{ once: true }，适用于初始化、加载完成等一次性事件 - 对
IntersectionObserver或ResizeObserver，务必调用其disconnect()方法，不能只靠移除 DOM - 全局监听器（如
window.addEventListener('resize', ...)）必须在 unmount 阶段显式清除，否则永远挂在 window 上
iframe 嵌套在动态 tab 里如何真正释放
仅调 iframe.remove() 或设 src = "" 不够。现代浏览器中，HTMLIFrameElement 和其内部的 Detached HTMLDocument 仍可能被父页面变量、闭包或未清理的 contentWindow 引用锁住。
立即学习“前端免费学习笔记（深入）”；
- 先设
iframe.src = "about:blank" - 用
requestAnimationFrame(() => { ... })或setTimeout(() => { ... }, 0)延迟执行后续动作 - 延迟后依次执行：
iframe.contentWindow?.document.write("")→iframe.contentWindow?.close()→iframe.remove() - 检查是否缓存了
iframe.contentWindow引用（比如存在全局 map 或 ref.current 中），若有，需一并置 null
getEventListeners 和 $$('*').length 交叉验证，而不是只信框架文档里的“自动销毁”说法。 
