什么是RAF？requestAnimationFrame-js教程-PHP中文网

什么是RAF？requestAnimationFrame

煙雲

发布： 2025-08-17 15:09:01

原创

1012人浏览过

requestAnimationFrame（RAF）是浏览器提供的API，用于在下一次重绘前执行动画代码，确保动画与屏幕刷新率同步，提升流畅性。它基于浏览器渲染机制，在每帧刷新前调用回调函数，避免了setTimeout或setInterval可能造成的掉帧问题。RAF在页面后台时会自动暂停，节省资源，支持通过返回ID用cancelAnimationFrame取消。性能优化建议包括减少DOM操作、使用transform和will-change属性、避免复杂计算。现代浏览器兼容性良好，可通过polyfill支持旧浏览器。在游戏开发中，RAF常用于构建游戏循环，实现稳定的60FPS更新与渲染。

什么是raf？requestanimationframe

RAF，也就是

requestAnimationFrame

登录后复制

，本质上是一个浏览器提供的 API，它允许你在浏览器下一次重绘之前执行动画相关的代码。简单来说，就是告诉浏览器：“嘿，我这里有一些动画要做，请你在下次刷新屏幕之前帮我执行一下。” 这样做的好处是，动画会与浏览器的刷新率同步，通常是 60Hz 或更高，从而保证动画的流畅性和性能。

解决方案：

要理解

requestAnimationFrame

登录后复制

，我们需要从浏览器的渲染机制说起。浏览器在渲染页面时，会进行一系列的操作，包括解析 HTML、CSS，构建 DOM 树、CSSOM 树，然后将它们合并成渲染树，最后进行布局和绘制。这个过程是周期性的，通常每秒钟进行 60 次，也就是我们常说的 60 FPS（帧每秒）。

requestAnimationFrame

登录后复制

的作用就是在每次浏览器刷新之前，给你一个机会来更新动画的状态。你可以把动画相关的代码放在

requestAnimationFrame

登录后复制

的回调函数中，浏览器会在下次刷新之前执行这些代码，从而实现动画效果。

一个简单的例子：

function animate(element, start, end, duration) {
  let startTime = null;

  function step(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = (timestamp - startTime) / duration;
    const value = start + (end - start) * progress;

    element.style.transform = `translateX(${value}px)`;

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

const box = document.getElementById('box');
animate(box, 0, 200, 1000); // 将 box 从 0px 移动到 200px，耗时 1 秒

登录后复制

这段代码实现了一个简单的平移动画。

animate

登录后复制

函数接收一个元素、起始位置、结束位置和动画持续时间作为参数。

step

登录后复制

函数是

requestAnimationFrame

登录后复制

的回调函数，它会根据时间戳计算动画的进度，并更新元素的位置。

requestAnimationFrame

登录后复制

的返回值是一个 ID，你可以使用

cancelAnimationFrame(id)

登录后复制

来取消动画。这在某些情况下很有用，比如当组件卸载或者动画不再需要时。

为什么使用

requestAnimationFrame

登录后复制

而不是

setTimeout

登录后复制

或

setInterval

登录后复制

？

setTimeout

登录后复制

和

setInterval

登录后复制

都是基于时间的，它们并不能保证动画与浏览器的刷新率同步。这意味着，即使你设置了很小的间隔时间，动画也可能出现卡顿或掉帧的情况。另外，当页面处于后台标签页时，浏览器可能会降低

setTimeout

登录后复制

和

setInterval

登录后复制

的执行频率，从而导致动画出现问题。

Layx是一款网页弹窗Javript插件

Layx 是一款网页弹窗Javript插件，她将助力于互联网Web开发，提供优质的弹窗体验

查看详情

requestAnimationFrame

登录后复制

则不同，它是由浏览器统一调度的，可以保证动画与浏览器的刷新率同步。当页面处于后台标签页时，浏览器也会暂停

requestAnimationFrame

登录后复制

的执行，从而节省资源。

如何优化

requestAnimationFrame

登录后复制

的性能？

避免在回调函数中进行复杂的计算。
```
requestAnimationFrame
```
登录后复制
的回调函数应该尽可能简单，只负责更新动画的状态。如果需要进行复杂的计算，可以考虑使用 Web Worker。
尽量减少 DOM 操作。 DOM 操作会触发浏览器的重排和重绘，影响性能。可以考虑使用
```
transform
```
登录后复制
属性来移动元素，或者使用 Canvas 来绘制动画。
使用
will-change
登录后复制
属性。
```
will-change
```
登录后复制
属性可以告诉浏览器，某个元素可能会发生变化，从而让浏览器提前进行优化。例如，如果你要对一个元素进行平移动画，可以设置
```
will-change: transform
```
登录后复制
。

requestAnimationFrame

登录后复制

的兼容性如何？

requestAnimationFrame

登录后复制

的兼容性非常好，几乎所有的现代浏览器都支持它。对于不支持

requestAnimationFrame

登录后复制

的旧版本浏览器，可以使用 polyfill 来进行兼容。

window.requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
    setTimeout(callback, 1000 / 60);
  };

登录后复制

这段代码定义了一个简单的 polyfill，如果浏览器不支持

requestAnimationFrame

登录后复制

，就使用

setTimeout

登录后复制

来模拟。

requestAnimationFrame

登录后复制

在游戏开发中的应用？

在游戏开发中，

requestAnimationFrame

登录后复制

扮演着至关重要的角色。它不仅能保证游戏的流畅运行，还能有效地利用硬件资源。例如，在一个简单的游戏中，你可以使用

requestAnimationFrame

登录后复制

来更新游戏角色的位置、绘制游戏场景、处理用户输入等等。

function gameLoop() {
  // 更新游戏状态
  updateGame();

  // 绘制游戏场景
  renderGame();

  // 再次调用 gameLoop
  requestAnimationFrame(gameLoop);
}

// 启动游戏循环
requestAnimationFrame(gameLoop);

登录后复制

这段代码定义了一个简单的游戏循环。