WeakMap能自动回收DOM节点关联状态，因其键为弱引用，当DOM节点被移除且无其他强引用时，对应键值对随GC自动清除；需模块级单例WeakMap、避免间接强引用，并用DevTools内存快照验证。
WeakMap 为什么能自动回收 DOM 节点关联的状态
因为 WeakMap 的键是弱引用，当 DOM 节点被浏览器 DOM 树移除且无其他强引用时，整个键值对会随垃圾回收器自动消失——不需要手动调用 delete 或清理函数。
这和 Map、对象属性（el.__state）、WeakRef + FinalizationRegistry 都不同：Map 会阻止节点回收；对象属性污染原型或引发命名冲突；WeakRef 只能读取不能存状态，还得自己注册回调清理。
关键前提是：状态只通过 WeakMap 关联，且业务代码中不额外保留对该节点的强引用（比如缓存在全局数组里）。
正确初始化和读写 WeakMap 状态的写法
必须在模块作用域创建单例 WeakMap，而不是每次函数调用都新建——否则无法跨函数共享状态，也失去“绑定”意义。
const nodeState = new WeakMap(); // ✅ 模块级单例
function initNode(el) {
if (!nodeState.has(el)) {
nodeState.set(el, { loading: false, lastFetch: 0 });
}
}
function updateLoading(el, value) {
const state = nodeState.get(el);
if (state) state.loading = value; // ✅ 直接修改对象属性
}
- 不要用
nodeState.set(el, {...})频繁替换整个值对象——会丢失引用，新对象需重新赋值给变量才能被后续读取 - 读取前务必检查
nodeState.has(el)，因为节点可能已被移除，get()返回undefined - 避免把原始值（如
number、string）直接塞进WeakMap，它只接受对象作键；DOM 节点天然符合
常见导致内存泄漏的错误操作
看似用了 WeakMap，但实际仍泄漏，多数是因为「间接强引用」破坏了弱引用前提。
- 在事件监听器里捕获节点并长期持有：
el.addEventListener('click', () => console.log(el))—— 这个闭包让el无法被回收 - 把节点 push 到全局数组：
window.liveNodes.push(el)—— 数组是强引用容器 - 用
setTimeout回调引用节点，且未 clearTimeout：setTimeout(() => el.classList.add('done'), 5000) - 使用
querySelectorAll后未清空引用，又把它传给WeakMap：节点虽在 DOM 中，但若后续被innerHTML = ''清掉，而你还在 JS 里拿着 NodeList 里的节点引用，它也不会立刻回收
如何验证 WeakMap 确实起效
不能只靠逻辑推断，得用 Chrome DevTools 的 Memory 面板实测。
步骤：打开 Memory 面板 → Take heap snapshot → 操作（添加/删除节点）→ 再 Take snapshot → 对比两份快照 → 筛选 Detached DOM tree 和 WeakMap 条目。
如果节点已从 DOM 移除、没其他强引用、且对应 WeakMap 条目在第二次快照中消失，就说明回收成功。
注意：WeakMap 条目不会实时显示在快照中——它只在 GC 后才真正释放。所以两次快照之间要手动触发垃圾回收（点击面板左上角的垃圾箱图标），否则可能看到“残留”。
真正难的是确保所有路径都切断：不只是 DOM 树，还有定时器、事件监听器、Promise 回调、Web Worker 引用……任何地方多留一个引用，WeakMap 就救不了。
