动画变慢主因是dom堆积而非动画老化；反复插入未清理的节点、innerhtml+=、clonenode未解绑、setinterval添加未清除等操作导致内存泄漏，需同时移除dom和js引用链。
animation变慢不是动画本身老化，是DOM在悄悄堆积
CSS animation 本身不“老化”，也不会随时间推移自动变慢。运行一阵后卡顿，大概率是页面中反复插入、克隆或未清理的 DOM 节点导致内存占用持续上升，最终拖垮渲染性能。尤其常见于轮播图、通知弹窗、列表无限加载等场景——每次触发都新建元素，却没移除旧的。
哪些 DOM 操作容易引发内存泄漏式卡顿
以下行为若未配对清理，会持续增加内存压力：
-
document.createElement后未element.remove()或未从父节点removeChild - 用
innerHTML +=替换内容 → 实际是先销毁再重建全部子节点，旧节点若被 JS 引用（如绑定过事件、存了dataset），就无法回收 - 通过
cloneNode(true)复制带事件监听器的元素，又没用removeEventListener解绑 - 使用
setInterval定期添加动画元素，但清除逻辑缺失或条件判断失效
如何快速验证是不是 DOM 泄漏导致的变慢
打开 Chrome DevTools → Memory 面板 → 点击 “Record heap allocation” → 播放动画 20–30 秒 → 停止录制 → 按 Constructor 筛选 HTMLDivElement、HTMLSpanElement 等。若数量随时间线性增长，且“Retained Size”持续变大，基本可确认泄漏。
更轻量的方法：在控制台执行 document.querySelectorAll('*').length，隔 1 分钟再执行一次。数值明显上涨（比如从 1200 → 1800），而页面结构本不该变，就是 DOM 在堆积。
修复时别只删节点，还要断引用链
单纯调用 element.remove() 不够。如果该元素曾被 JS 变量持有、绑定过事件、或作为 Map/WeakMap 的 key，GC 仍不会回收它。
- 移除前先解绑：
element.removeEventListener('animationend', handler) - 清空自定义属性：
element.dataset = {}或直接删掉delete element.dataset.xxx - 若用
Map缓存节点状态，记得map.delete(element) - 避免闭包长期持有所操作的 DOM：
function animate(el) { const id = el.id; return () => console.log(id); }这种写法会让el无法释放
真正干净的清理，是让该节点脱离 DOM 树 + 所有 JS 引用同时消失。动画越频繁，这点越关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
