1. requestAnimationFrame 简介
在学习如何使用 requestAnimationFrame 控制 fps 之前，我们先来简单了解一下 requestAnimationFrame 的基本知识。
requestAnimationFrame（简称 rAF）是一个由浏览器提供的 API，用于在浏览器下一次重绘之前执行指定的回调函数。这个 API 的使用可以避免直接使用 setTimeout 或 setInterval 操作 DOM，从而带来更好的性能表现。
下面是一个使用 requestAnimationFrame 的示例代码：
function step() {
// 执行动画操作
window.requestAnimationFrame(step);
}
// 启动动画
window.requestAnimationFrame(step);
在这段代码中，我们定义了一个叫做 step 的函数，然后使用 requestAnimationFrame 来周期性地调用这个函数。这个函数就是我们要执行的动画操作，我们只需要不断地执行它，就能够让动画持续运行。
2. 什么是 fps？
在继续学习如何控制 fps 之前，我们需要先了解一下 fps 的概念。
fps 是 frames per second 的缩写，即每秒帧数。在动画中，帧数表示动画在一秒内进行了多少次渲染，而 fps 表示在一秒内播放了多少帧动画。因此，fps 越高，动画就越流畅。
事实上，一帧动画的渲染时间是固定的，而真正影响动画流畅度的是每两帧之间的间隔时间。如果间隔时间过长，就会导致动画卡顿不流畅。
要想让动画流畅，我们需要根据当前设备的性能来控制 fps，避免间隔时间过长。下面就是利用 requestAnimationFrame 控制 fps 的主要思路。
3. requestAnimationFrame 控制 fps 思路
requestAnimationFrame 并没有提供专门控制 fps 的方法，但我们可以利用它的工作原理来实现这个目的。
在使用 requestAnimationFrame 时，浏览器会尽力维持 60fps，但如果执行的代码量过大，就可能导致一些帧之间的时间间隔过长，从而导致动画卡顿不流畅。因此，我们需要计算出每帧应该执行多少代码，才能保证在设备性能有限的情况下也能保持流畅。
下面的代码展示了如何使用 requestAnimationFrame 控制 fps：
let fps = 60; // 设定帧率为60fps
let interval = 1000 / fps; // 计算每帧的间隔时间
let now, lastTime = Date.now(), delta;
function step() {
// 获取当前时间
now = Date.now();
// 计算两帧之间的间隔时间
delta = now - lastTime;
// 如果间隔时间大于每帧间隔，则执行代码
if (delta > interval) {
// 执行动画操作
}
// 在下一帧执行 step 函数
requestAnimationFrame(step);
// 记录上一帧的时间
lastTime = now;
}
// 启动动画
requestAnimationFrame(step);
在这段代码中，我们首先定义了帧率为 60fps，然后根据帧率计算出每帧的间隔时间，这样我们就可以根据间隔时间来控制每帧的代码量了。
接下来我们定义了 step 函数，并使用 requestAnimationFrame 来周期性地调用它。在每次执行 step 函数时，我们会记录下当前时间，然后计算出两帧之间的间隔时间。
如果间隔时间大于每帧间隔时间，则说明需要执行一次动画操作。在执行完动画操作之后，我们就会在下一帧继续执行 step 函数，这样就可以不断地更新动画了。
4. 注意事项
4.1. 浏览器兼容性
虽然 requestAnimationFrame 已经得到了大部分现代浏览器的支持，但是在编写跨浏览器代码时还是需要考虑兼容性问题。
以下是一个简单的跨浏览器 requestAnimationFrame 实现：
window.requestAnimationFrame = (
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame
);
这段代码将会检查浏览器是否支持 requestAnimationFrame，并使用相关浏览器提供的实现。
4.2. CPU 和内存的压力
当我们使用 requestAnimationFrame 控制 fps 时，需要注意代码的执行次数。如果代码执行次数过多，就会导致 CPU 的负荷过大，从而可能影响用户体验。
另外，如果在执行代码时创建了大量的对象，也有可能给内存带来不必要的压力，从而导致页面运行不稳定。
4.3. 帧率过高的问题
当我们设置的帧率过高时，虽然可以使动画更加流畅，但也会带来一些问题。首先，帧率越高，每帧可执行的代码量就越少，这意味着我们需要更高效地编写代码，从而避免代码执行过长导致帧率下降。
另外，帧率过高还可能导致设备温度升高，从而对硬件造成损害。因此，我们应该根据设备性能和用户需求来选择合适的帧率。
5. 总结
在本文中，我们详细介绍了 requestAnimationFrame 的基本知识以及如何使用它来控制 fps。我们了解了 fps 的概念，掌握了如何在代码中计算出每帧应该执行多少代码量，从而保证动画的流畅性。
最后，我们还介绍了在使用 requestAnimationFrame 时需要注意的一些问题，以及如何写出高效、稳定的代码。