WeakMap 是预防缓存类内存泄漏的关键手段，通过弱引用 DOM 节点等生命周期对象，使节点移除后自动被 GC 回收，避免普通 Map 因强引用导致的 detached DOM trees 泄漏。
WeakMap 不是用来“排查”内存泄漏的工具，而是从设计源头预防缓存类泄漏的关键手段——尤其当你用缓存关联 DOM 节点、组件实例等有明确生命周期的对象时。
为什么普通缓存会引发泄漏
用 Map 或 plain object 做缓存时，DOM 节点作为 key 会被强引用：
- 节点调用
remove()或父元素清空innerHTML后，仍被缓存持有 - 垃圾回收器认为该节点“可达”，无法释放，连带其子树和绑定数据一起滞留内存
- DevTools 中表现为持续增长的 detached DOM trees，且手动 GC 后不回落
WeakMap 缓存的核心防护逻辑
它不阻止节点回收，只在节点“活着且被其他地方强引用”时才有效存取：
- 键必须是真实 Node 实例：
if (node && node instanceof Node)校验不可省略 - 节点从 DOM 移除 + 无其他 JS 引用 → 立刻被 GC 回收 → WeakMap 中对应条目自动消失
- 你不需要监听
MutationObserver，也不用在remove后手动delete
安全缓存实践要点
不是所有缓存都适合 WeakMap，要聚焦“依附于对象生命周期”的场景：
立即学习“Java免费学习笔记（深入）”；
-
只存轻量状态：如
{ loaded: true, retryCount: 2 }，避免把大型对象、组件实例、闭包函数当 value - 模块级单例封装：全局只导出一个受控 WeakMap 实例，禁止直接暴露原始实例以防传入非法键
-
搭配 isConnected 判断使用：读取缓存后，先检查
node.isConnected再操作 UI，避免对已移除节点误操作 -
不用于通用缓存：WeakMap 没有
size、不能遍历、无法主动清理，不适合做 LRUCache 或需批量失效的场景
典型修复示例
将原来危险的 Map 缓存：
❌ 危险写法（泄漏根源）const cache = new Map();<br>cache.set(document.getElementById('btn'), { disabled: true });<br>// 节点 remove 后，cache 仍持引用，泄漏发生
改为 WeakMap 封装：
✅ 安全写法（自动解耦生命周期）const elementState = new WeakMap();<br>function setButtonState(btn, state) {<br> if (btn && btn instanceof Node) {<br> elementState.set(btn, state);<br> }<br>}<br>// 节点移除后，无需任何操作，数据自然消失 
