闭包阻碍垃圾回收的根本原因是其对外部dom的强引用使本该不可达的对象保持可达；只要闭包捕获了dom变量（如btn或el），即使仅访问一次属性，整个dom子树就被持续持有，无法被gc回收。
闭包中的外部引用之所以会阻碍垃圾回收，根本原因在于它让本该“不可达”的 DOM 对象继续保持“可达”状态。只要 GC 能顺着某条引用链从根对象（如 window、全局变量、活跃的定时器或事件监听器）访问到某个 DOM 节点，这个节点及其整棵子树就永远不会被标记清除。
怎么看出闭包里偷偷引用了 DOM？
关键不是看代码有没有写 document.getElementById，而是看闭包函数是否在定义时捕获了包含 DOM 节点的变量——哪怕只用了一次属性，整个节点对象仍被强持有。
- 常见写法：
const btn = document.querySelector('#submit'); btn.addEventListener('click', () => console.log(btn.textContent));—— 这里闭包直接引用了btn，只要监听器没移除，btn和它所有子元素（比如表单里的 input、label、嵌套 div）都持续存活 - 更隐蔽的写法：
function setupHandler(el) { return () => el.dataset.status = 'done'; } const handler = setupHandler(document.querySelector('#app'));——el是参数，但一旦被闭包捕获，整个 DOM 子树就被锁住 - 循环中误捕获：
for (var i = 0; i —— <code>var导致所有闭包共享同一个i所在的作用域，而该作用域还持有着list和items数组，可能间接拖住大量 DOM 节点
为什么 DOM 树一卡就是整棵树？
DOM 节点之间存在天然父子/兄弟引用关系。一个节点被闭包持有，意味着：
- 它自身不可回收
- 它的
parentNode、childNodes、nextSibling等原生属性构成的引用链全部有效 - 如果它是容器元素（如
<div id="list">），那它下面几十甚至上百个子节点、文本节点、事件监听器绑定的对象，全都被“连坐”保留 <h3>如何验证是不是闭包在拖住 DOM？</h3> <p>用 Chrome DevTools 的 Memory 面板做堆快照对比：</p> <ul> <li>操作前拍一次快照，筛选 <code>Detached DOM tree或搜索目标元素 ID - 执行疑似泄漏的操作（比如打开弹窗又关闭）
- 再拍一次快照，用 “Comparison” 模式查看新增的、未释放的 DOM 节点
- 点开任一残留节点，看 “Retainers” 标签页——如果路径里出现
Closure→function→[[Scopes]]→ 某个变量名，基本就能确认是闭包引用所致
真正有效的解法不是避免闭包，而是切断不必要的强引用
闭包本身无害，问题出在“引用谁”和“引用多久”：
- 只提取需要的值：把
el.id、el.dataset.id提前读出来传入闭包，而不是把整个el塞进去 - 及时清理监听器：
el.addEventListener(...);后，对应地在合适时机调用el.removeEventListener(...) - 主动断开大对象：
handler = null;或myModule.domRef = null;，让引用链断裂 - 避免全局缓存 DOM：
window.cacheEl = document.querySelector(...)是高危操作，改用弱引用（WeakMap）或带 TTL 的缓存策略
