WeakMap是解决DOM节点关联数据内存泄漏的原生方案，因其键为弱引用，节点移除后自动失效；而普通Map强引用节点导致GC无法回收，引发detached DOM trees堆积。
WeakMap 是解决 DOM 节点与业务数据关联时内存泄漏的原生、可靠方案。它不阻止节点被垃圾回收，只要节点从 DOM 中移除且无其他强引用，对应条目就自动失效——无需手动清理，也不依赖 MutationObserver 或事件监听兜底。
为什么普通 Map 或对象会引发内存泄漏
普通对象或 Map 对键是强引用：
- 即使节点已被
remove()或父元素通过innerHTML = ''清空，只要它还在 Map 里，GC 就无法回收该节点及其整个子树 - DevTools 的 Memory 面板中会出现大量 detached DOM trees，
performance.memory.usedJSHeapSize持续上涨 - 典型错误：
const cache = new Map(); cache.set(btn, { loading: true });
WeakMap 的关键特性与使用前提
它不是“功能更少的 Map”，而是为特定场景设计的内存安全结构：
- 键必须是对象（DOM 节点天然符合），传入字符串、数字、
null会直接抛TypeError - 对键是弱引用：不影响 GC 判定，节点不可达即被回收，WeakMap 条目同步消失
- 不支持
keys()、values()、entries()或size——这正是防止意外延长生命周期的设计保障
推荐的封装方式与注意事项
避免零散创建 WeakMap 实例，统一用模块级单例并做类型防护：
- 校验键是否为真实 DOM 节点：
node instanceof Node，防止误传Window、Array等 - 值（value）本身仍需留意：WeakMap 不管值的生命周期；若定时器、闭包长期持有返回的对象，值仍可能泄漏
- 可封装为语义化工具函数，例如：
setNodeState(node, { disabled: true })和getNodeState(node)
适用场景与替代边界
WeakMap 最适合动态、短生命周期的 DOM 元数据绑定：
- 按钮点击计数、加载状态、配置对象、事件上下文缓存
- 避免污染
dataset或挂载node.__data这类易冲突的属性 - 不适用于需要遍历、持久化、或跨会话保留的场景——此时应选 Map + 显式生命周期管理
