什么是RAF？requestAnimationFrame

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

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

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

requestAnimationFrame

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

requestAnimationFrame

的执行，从而节省资源。

如何优化

requestAnimationFrame

的性能？

1. 避免在回调函数中进行复杂的计算。

   requestAnimationFrame

   的回调函数应该尽可能简单，只负责更新动画的状态。如果需要进行复杂的计算，可以考虑使用 Web Worker。

2. 尽量减少 DOM 操作。 DOM 操作会触发浏览器的重排和重绘，影响性能。可以考虑使用

   transform

   属性来移动元素，或者使用 Canvas 来绘制动画。

3. 使用

   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);

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

updateGame

函数负责更新游戏的状态，

renderGame

函数负责绘制游戏场景。

requestAnimationFrame

会在每次浏览器刷新之前调用

gameLoop

函数，从而保证游戏以 60 FPS 的速度运行。