核心思路是切断闭包对已移除DOM节点的强引用。定位需通过Chrome Memory面板拍摄堆快照并筛选Detached DOM tree，观察Retainers链中是否含Closure；修复要控制捕获范围、配对事件监听、显式清理；预防应解构提取必要字段、用WeakMap存储映射、避免全局赋值；验证需多次挂载卸载后比对快照数据是否稳定。
核心思路不是消灭闭包，而是切断它对已移除 DOM 节点的强引用——只要闭包还活着，且里面存着一个 detached 的 <div>，整棵子树就卡在内存里出不去。
定位：先确认是不是 Detached DOM 被闭包锁住了
打开 Chrome DevTools → Memory 面板 → 点垃圾桶强制触发一次 GC → 拍摄堆快照 → 切换到 Comparison 视图 → 在筛选框输入 Detached DOM tree。如果数量和 Retained Size 在页面跳转或组件卸载后持续上升，问题基本坐实。
点开任意一个 Detached 节点 → 展开右侧 Retainers 链 → 如果路径里出现 Closure → 匿名函数 → this / ref / el / document.querySelector，说明闭包正在持有这个节点。
修复：从源头控制捕获范围 + 显式清理
- 别在事件监听器或定时器回调里直接用
document.getElementById或ref.current；改用参数传入目标节点，例如：el.addEventListener('click', (e) => handleClick(e.target))，而不是const el = document.getElementById('chart'); el.addEventListener('click', () => console.log(el)) - 所有
addEventListener必须配对removeEventListener，且用具名函数或AbortController（现代写法更可靠） - React 中避免在
useEffect里定义并绑定闭包到全局对象（如window.addEventListener），若必须这么做，清理函数里要确保移除监听器，且闭包不隐式捕获ref.current或过期props - Vue 中在
beforeUnmount或onBeforeUnmount里统一执行清理，包括清除定时器、解绑事件、置空ref.value引用
预防：让闭包只拿它真正需要的东西
闭包会连带保留整个词法环境，但你往往只需要其中一两个字段。
- 提前解构提取关键属性，比如：
const { id, className } = el; const handler = () => doSomething(id);，而不是const handler = () => doSomething(el); - 对必须关联 DOM 和状态的场景，优先用
WeakMap存储映射关系，键是 DOM 元素，值是轻量数据；元素被 GC 后，WeakMap自动失效 - 避免把闭包赋值给全局变量、模块顶层变量或长生命周期实例（如 class 实例属性），这类赋值等于人为延长所有被捕获变量的寿命
验证：看清理是否真正生效
改完代码后不要只信逻辑，要验证效果：
- 重复执行“挂载 → 卸载 → 再挂载”操作 3–5 次
- 每次卸载后都拍一次 Heap Snapshot，比对 Detached DOM tree 数量和 Retained Size 是否回落或稳定，而非持续增长
- 观察
performance.memory.totalJSHeapSize是否随操作周期性波动，而非单向爬升
