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 + 显式生命周期管理