检测 requestanimationframe 泄漏的核心方法是使用 chrome devtools 的 performance 面板录制页面运行过程，并观察 request animation frame 事件是否在没有用户交互或动画需求时持续出现。如果页面处于静止状态但 cpu 占用率依然很高，且性能时间轴上不断生成新的帧记录，通常意味着存在未清理的回调函数。排查时重点检查全局作用域或闭包中注册的 raf 任务，确认是否有对应的 cancelanimationframe 调用与之匹配。
Performance 面板中如何识别 rAF 泄漏
在 Performance 面板中，requestAnimationFrame 泄漏表现为主线程（Main）上密集的 Request Animation Frame 事件条。正常情况下，当页面没有动画时，这些事件应该消失或频率极低。如果看到它们像波浪一样连续不断，说明浏览器正在执行无意义的渲染循环。通过点击这些事件条，可以在下方的详细视图中查看具体的调用栈，从而定位到注册该回调的代码位置。
const animationId = requestAnimationFrame(update);
function update() {
// 模拟一些计算
const data = heavyCalculation();
render(data);
// 错误示例：如果没有条件退出，这里会无限递归
if (isAnimating) {
requestAnimationFrame(update);
}
}
// 正确做法：在不需要动画时取消
// cancelAnimationFrame(animationId);
如何通过代码逻辑主动排查 rAF 泄漏
除了依赖工具，开发者可以通过在代码中添加日志或使用断点来主动排查。一种有效的方法是在 requestAnimationFrame 调用处设置断点，观察调用堆栈。如果发现在非预期的生命周期阶段（如组件卸载后）仍然有调用发生，则说明存在泄漏。此外，可以封装一个管理 rAF ID 的工具函数，确保在组件销毁或任务结束时统一调用 cancelAnimationFrame，从而从源头上避免泄漏。
let rafId = null;
function startAnimation(callback) {
if (rafId !== null) return; // 防止重复注册
rafId = requestAnimationFrame(function loop(timestamp) {
callback(timestamp);
// 假设这是某个条件判断
if (shouldContinue()) {
rafId = requestAnimationFrame(loop);
} else {
rafId = null; // 正常结束，清空ID
}
});
}
function stopAnimation() {
if (rafId !== null) {
cancelAnimationFrame(rafId);
rafId = null;
}
}
基于 isAnimating 变量为 false 时的具体行为
当 isAnimating 变量被设置为 false 时，如果代码逻辑中没有显式调用 cancelAnimationFrame，之前注册的 requestAnimationFrame 回调可能仍然会在下一帧被执行一次，或者如果回调内部再次调用了 requestAnimationFrame，则会导致泄漏。关键在于，cancelAnimationFrame 只能取消尚未执行的回调。如果在回调函数内部已经进入了执行体，即使此时 isAnimating 变为 false，当前的回调也不会被中断，必须依靠回调内部的逻辑判断来停止后续的递归调用，或者在外部立即调用 cancelAnimationFrame 来阻止下一次触发。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
