清理闭包中 DOM 引用的核心是主动切断强引用，推荐设为 null、用事件委托、WeakReference 缓存及结合框架生命周期管理。
清理闭包中存储的 DOM 对象，核心是主动切断闭包对外部 DOM 元素的强引用，让垃圾回收器能识别并释放它。DOM 节点本身体积大、关联复杂，一旦被闭包长期持有，极易引发明显内存增长。
手动将 DOM 引用设为 null
这是最直接、兼容性最好的方式。在闭包不再需要访问该 DOM 元素时（比如组件卸载、事件处理完成、功能停用），显式把变量赋值为 null。
- 不要依赖“元素从 DOM 中移除”就自动释放——只要 JavaScript 还持有它的引用，它就不会被回收
- 推荐在闭包返回的对象里暴露一个
destroy方法，集中清理所有相关引用 - 示例：
const element = document.getElementById('box');
const handler = () => { console.log(element.offsetWidth); };
// 使用后主动释放
element = null;
改用事件委托，避免闭包直接持 DOM
如果闭包只是为了响应某个子元素的点击，没必要每个子元素都绑定一个闭包并引用自身。用父容器监听 + 事件冒泡，只持有一个轻量闭包，且不强引用具体子节点。
- 原写法（危险）：
btn.addEventListener('click', () => console.log(btn.id))—— 每个btn都被闭包捕获 - 优化写法：
container.addEventListener('click', e => e.target.matches('.btn') && console.log(e.target.id))—— 不持有任何 DOM 节点引用
用 WeakReference 缓存（ES2023+，需注意兼容性）
当确实需要在闭包中“记住”某个 DOM 元素，又不想阻止其被回收时，可用 WeakReference 替代直接引用。
- 它不会阻止 GC 回收目标对象，适合做缓存或临时关联
- 使用前先
deref()判断是否还存在，避免访问已销毁节点 - 示例：const weakRef = new WeakReference(document.getElementById('target'));
return () => { const el = weakRef.deref(); if (el) el.style.color = 'red'; };
结合生命周期管理（框架场景）
在 React、Vue 等框架中，闭包常出现在事件回调或定时器里。务必利用框架提供的清理机制，在组件卸载时一并解除引用。
- React：
useEffect(() => { const handler = () => {}; window.addEventListener('scroll', handler); return () => { window.removeEventListener('scroll', handler); } }, []) - Vue：
onBeforeUnmount(() => { element = null; })或在beforeDestroy钩子中置空 - 关键不是“删掉事件”，而是“断掉闭包对 DOM 的持有链”
