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的性能？
-
避免在回调函数中进行复杂的计算。
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);这段代码定义了一个简单的游戏循环。
updateGame函数负责更新游戏的状态，
renderGame函数负责绘制游戏场景。
requestAnimationFrame会在每次浏览器刷新之前调用
gameLoop函数，从而保证游戏以 60 FPS 的速度运行。
