js requestAnimationFrame

2026-05-10 07:00:34 1626阅读 0评论

动画掉帧？别再只用 setInterval 了，requestAnimationFrame 才是正解

做前端开发久了，肯定遇到过这种尴尬：精心调优的加载动画或拖拽效果，在 Mac 上丝滑无比，一旦放到旧款安卓手机或者高分屏上，立马掉帧严重，甚至出现画面撕裂。排查半天才发现，问题不出在算法复杂度，而是基础动画逻辑还在用 setTimeout 或 setInterval。

这就像是开车，定时任务好比是你自己踩着油门不管车速，浏览器重绘却像限速路标。两者步调不一致，必然卡顿。而 requestAnimationFrame（简称 rAF）的核心价值，就在于它主动告诉浏览器：“我要开始干活了，请在下一次重绘前调用我。”

为什么它更顺滑？

浏览器的渲染机制本质是“帧”。大多数屏幕刷新率是 60Hz，意味着每秒钟有 60 次机会更新画面，每次间隔约 16.6 毫秒。

传统的定时器完全无法感知这个节奏。如果 setInterval 设置的间隔是 10 毫秒，浏览器还没完成上一帧渲染，你的回调就已经准备好了，导致浏览器被迫跳过某些帧或合并操作；反之如果设为 20 毫秒，又会出现画面停顿。

使用 requestAnimationFrame 时，浏览器会自动调整回调函数的调用频率，确保在每个垂直同步信号之前执行。这不仅保证了动画流畅度，还能自动适配高刷屏设备。

实际开发中的坑

很多教程只教你怎么启动动画，却很少提如何安全地停止，这也是新手容易埋雷的地方。

想象一下，你在写一个弹窗动画组件。用户点击打开，触发了 rAF 循环。这时候用户迅速关闭弹窗并跳转到了新页面。如果不手动清理，之前的动画回调依然会在后台继续运行，直到被垃圾回收机制强制终止。这不仅浪费 CPU 资源，严重时还会引发内存泄漏。

正确的做法是持有回调 ID，并在组件销毁时清除。看下面这段示例代码：

let animationId = null;

function startAnimation() {
  if (animationId) return; // 防止重复启动

  const animate = (time) => {
    // 执行具体的样式更新逻辑
    element.style.transform = `translateX(${position}px)`;

    position++;
    if (position < 100) {
      animationId = requestAnimationFrame(animate);
    } else {
      cancelAnimationFrame(animationId); // 达到目标后手动结束
      animationId = null;
    }
  };

  animationId = requestAnimationFrame(animate);
}

function stopAnimation() {
  if (animationId) {
    cancelAnimationFrame(animationId); // 关键步骤：及时清理
    animationId = null;
  }
}

这里有个细节值得注意：必须在下次请求时传递回调，而不是直接把函数扔给浏览器。这样可以保证你有权随时通过返回的 ID 进行干预。