CSS 动效页越跑越慢查未清理的 rAF、监听器和 DOM 引用动效页越跑越慢先查循环是否停止、监听器是否解绑、闭包是否还引用已销毁节点。两次 Heap Snapshot 的引用链比一句“浏览器泄漏”更可信。用快照确认引用链在 DevTools 的 Memory 面板分别截取进入页面、离开页面、重复进入后的 heap snapshot。关注 Detached DOM tree、持续增长的数组以及 Event Listener 的 retainers。一次快照只能提供线索两个时间点的对比才更有意义。把动效绑定到生命周期无论使用 rAF、Web Animations API 还是事件监听都应在组件卸载时释放。下面的封装把清理函数集中起来export function createMotionScope() { const cleanups new Set(); return { on(target, type, handler) { target.addEventListener(type, handler); cleanups.add(() target.removeEventListener(type, handler)); }, frame(callback) { const id requestAnimationFrame(callback); cleanups.add(() cancelAnimationFrame(id)); }, dispose() { cleanups.forEach((cleanup) cleanup()); cleanups.clear(); }, }; }如果是持续动画frame需要在每次重新调度时更新清理句柄也可以直接采用框架的 effect 清理回调少维护一层状态。长时间运行怎么测写一个脚本反复挂载和卸载页面期间记录 heap、监听器数量与控制台异常。只要曲线持续上升就继续沿引用链找。内存不一定回到完全相同的数值但应该在一段时间后趋于稳定。生成艺术可以慢慢铺开颜色资源管理必须干脆谁创建谁清理。
