WeakMap 能防止 DOM 动画状态内存泄漏，因其键为弱引用：节点被移除后，关联的动画元数据（如 startTime、duration）自动释放，无需手动清理，raf 回调中通过 has() 和 isConnected 可安全终止循环。
WeakMap 能在 DOM 节点关联动画状态时防止内存泄漏，关键在于它让动画元数据（如当前进度、缓动配置、是否暂停）与节点共存亡——节点被移除后，状态自动失效，无需手动清理。
为什么动画状态容易引发内存泄漏
给 DOM 元素添加动画时，常需维护额外状态：比如用 requestAnimationFrame 循环更新、记录起始值、保存回调引用。若把这些状态存在全局对象、普通 Map 或直接挂到元素上（el._animState = {...}），就会形成强引用链：
- 动画循环闭包捕获了元素 → 元素无法被 GC
- 全局 Map 把元素当 key 存着 → 即使元素已
remove()，仍被强持有 - 未注销的
raf回调持续运行，又间接持有着元素和上下文
用 WeakMap 关联动画状态的正确做法
创建单例 WeakMap 实例，只用于存储与动画相关的轻量元数据，不存大对象或长生命周期函数：
- 键必须是真实存在的 DOM 元素（
node instanceof Element），且要校验非 null - 值建议为纯对象，包含可序列化字段（如
{ startTime, duration, easing }），避免反向强引用节点本身 - 动画启动前先检查：
if (!animStates.has(el)) { animStates.set(el, initState); } - 在
raf循环中通过animStates.get(el)获取状态，若返回undefined，说明节点已销毁，应退出循环
配合 raf 和 cleanup 的实用模式
WeakMap 不负责停止动画，但能帮你安全地识别“该不该继续”：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 每次
requestAnimationFrame回调开头检查：if (!animStates.has(el) || !el.isConnected) return; - 元素卸载时，不需要显式调用
animStates.delete(el)—— WeakMap 会自动清理 - 若使用 CSS 动画 + JS 控制，可把播放状态（
isPlaying）、时间偏移（currentTime）存在 WeakMap 中，样式层负责渲染，JS 层只管逻辑 - 避免在动画回调里新建闭包并长期持有大数组或组件实例；如有必要，把外部依赖抽成 WeakMap 的 value，而非闭包变量
一个最小可行示例
（仅核心逻辑，不含兼容性处理）
const animStates = new WeakMap();<br>function startFadeIn(el, duration = 300) {<br> if (!(el instanceof Element)) return;<br> if (animStates.has(el)) return;<br> animStates.set(el, { startTime: performance.now(), duration });<br> function animate() {<br> const state = animStates.get(el);<br> if (!state || !el.isConnected) return;<br> const elapsed = performance.now() - state.startTime;<br> const progress = Math.min(elapsed / state.duration, 1);<br> el.style.opacity = progress;<br> if (progress < 1) requestAnimationFrame(animate);<br> }<br> requestAnimationFrame(animate);<br>} 
