1. 概述
大多数电脑显示器的刷新频率是60Hz，大概相当于每秒重绘60次，多数浏览器都会对重绘操作加以限制，不超过显示器的刷新频率，因为即使超过显示器的刷新频率用户体验也不会有提升，因此最平滑动画的最佳循环间隔时间1000ms/60，约16.6ms。
2. 方案对比
| requestAnimationFrame | 利用浏览器刷新频率来调度动画帧，确保动画帧的更新在每一帧之间的间隔是最佳的 |
|---|---|
| setTimeout/setInterval | 受限于定时器的精度和浏览器在不同设备上的性能差异 |
定时器的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器的UI线程队列中以等待执行的时间，如果队列前面已经加入了其他任务，动画代码就要等前面的任务完成后再执行（等待执行的时间可能会比浏览器刷新频率的时间间隔大）。
3. 实现（requestAnimationFrame）
let timer= 0;
let fps = 0;
let fpsCount = 0;
let fpsStartTime = performance.now();
const calcFPS = () => {
timer = window.requestAnimationFrame((time) => {
const timeDiff = time - fpsStartTime;
if (timeDiff > 1000) {
fps = Math.round(fpsCount * 1000 / timeDiff);
fpsStartTime = time;
fpsCount = 0;
console.log(`FPS: ${fps}`); // 打印到控制台
// 在这里添加导出fps逻辑
// todo...
} else {
fpsCount++;
}
timer = window.requestAnimationFrame(calcFPS);
})
}
calcFPS();
// cancelAnimationFrame(timer);
