如何实现代码真正稳定60fps运行，达到游戏动画最佳流畅度？

setInterval的调度逻辑本身不保证精确的触发间隔，根本不适合高帧率动画、游戏场景使用：

• 你设置的16ms间隔对应触发频率为 1000/16 = 62.5次/秒，高于60fps要求的16.666ms/帧的触发频率，多出来的触发次数会累积导致跳帧，表现为移动速度偶尔翻倍
• 设置为17ms时对应频率为 1000/17 ≈ 58.8次/秒，低于60fps的要求，缺失的帧会导致偶尔卡顿
• 除此之外setInterval回调属于宏任务，会受主线程其他任务（DOM操作、网络请求、其他JS逻辑执行）阻塞，实际执行时间偏差可能远超过1ms，完全无法保证稳定的帧间隔

1. 优先使用requestAnimationFrame（RAF） #

这是浏览器专门为动画、游戏场景提供的帧调度API，会和设备屏幕的刷新频率严格同步，绝大多数消费级设备屏幕刷新率为60Hz，RAF会自动按照16.666ms/帧的间隔触发，完全匹配60fps的要求，不会出现多触发或者缺帧的问题。
基础用法示例：

function gameLoop(timestamp) {
  // 帧逻辑：状态计算、画面渲染等
  requestAnimationFrame(gameLoop);
}
// 启动游戏循环
requestAnimationFrame(gameLoop);

2. 配合增量时间（Delta Time）做速度校正 #

即使使用RAF，遇到设备刷新率非60Hz、或者主线程偶尔阻塞掉帧的场景，也可能出现速度异常，增加增量时间校正逻辑可以保证不管实际帧率波动多少，运动速度始终稳定：

let lastFrameTime = 0;
function gameLoop(timestamp) {
  // 计算与上一帧的时间差，单位转换为秒
  const deltaTime = (timestamp - lastFrameTime) / 1000;
  lastFrameTime = timestamp;

  // 所有位移、动画计算都乘以deltaTime
  // 例：要求物体每秒移动120像素，写法为
  // player.position.x += 120 * deltaTime;

  requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

该方案下，帧率高不会出现运动加速，帧率低也不会出现运动减速，最多只会出现少量帧未渲染的视觉卡顿，不会出现速度跳变的问题。

3. 极端兼容场景的setTimeout模拟方案 #

如果需要兼容完全不支持requestAnimationFrame的极老旧环境，不要使用setInterval，改用setTimeout动态调整每帧的延迟时间，抹平执行耗时带来的偏差：

let lastFrameTime = Date.now();
const targetFrameInterval = 1000 / 60;

function gameLoop() {
  const currentTime = Date.now();
  const deltaTime = (currentTime - lastFrameTime) / 1000;
  lastFrameTime = currentTime;

  // 执行帧逻辑
  // player.position.x += 120 * deltaTime;

  // 动态计算下一帧的延迟，抵消当前帧执行的耗时
  const nextDelay = Math.max(0, targetFrameInterval - (Date.now() - currentTime));
  setTimeout(gameLoop, nextDelay);
}
setTimeout(gameLoop, targetFrameInterval);

内容的提问来源于stack exchange，提问作者tempacc