核心是主动切断闭包对DOM元素的强引用以释放内存。显式设为null、事件委托、WeakReference缓存、结合框架生命周期清理，都是有效手段。
核心是主动切断闭包对 DOM 元素的强引用，让垃圾回收器能及时释放它。DOM 节点体积大、关联深，一旦被闭包长期持有又未清理，内存会持续增长，尤其在单页应用中容易暴露。
显式设为 null 断开引用
这是最直接、兼容性最好的方式。只要闭包不再需要访问该 DOM 元素（比如组件卸载、功能停用、事件处理完成），就立刻把变量赋值为 null。
- 别指望“元素从页面移除了，JS 就自动不引用了”——只要你的代码还拿着它的引用，它就不会被回收
- 推荐在闭包返回的对象里暴露一个 destroy 方法，集中清空所有 DOM 引用
- 示例：const el = document.getElementById('box'); const handler = () => console.log(el.offsetWidth); /* 使用后 */ el = 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 是更安全的选择。
立即学习“Java免费学习笔记（深入）”；
- 它不会延长目标对象生命周期，适合做临时关联或缓存
- 使用前必须调用 deref() 判断是否还存在，避免访问已销毁节点
- 示例：const weakRef = new WeakReference(document.getElementById('target')); return () => { const el = weakRef.deref(); if (el) el.style.color = 'red'; };
- 注意浏览器兼容性，旧环境需降级 fallback
结合框架生命周期统一清理
在 React、Vue 等框架中，闭包常出现在事件回调、定时器、API 请求等场景。必须利用框架提供的清理机制，在组件卸载时同步解除引用。
- React：在 useEffect 的返回函数中移除事件监听、清除定时器、置空闭包持有的 DOM 变量
- Vue：在 onBeforeUnmount 或 beforeDestroy 中执行清理逻辑
- 关键不是“删掉事件”，而是“断掉闭包 → DOM 这条强引用链”
