JavaScript游戏循环依赖requestAnimationFrame（rAF）实现帧率调度，而非事件循环；rAF自动匹配刷新率、提供时间戳、需递归调用；可通过累积时间实现目标FPS节流；须避免单帧耗时过长阻塞交互。
在 JavaScript 游戏开发中，不能直接“结合”事件循环来调度帧率——因为浏览器的事件循环本身不提供帧率控制能力；真正负责帧率调度的是 requestAnimationFrame（rAF），它是浏览器专门为动画和游戏循环设计的、与刷新率同步的机制。事件循环只负责协调宏任务、微任务和 rAF 回调的执行顺序，而帧率控制逻辑必须由开发者基于 rAF 主动组织。
用 requestAnimationFrame 构建稳定游戏循环
rAF 会自动匹配显示器刷新率（通常是 60Hz），每次屏幕重绘前触发一次回调。这是游戏循环的基石：
- 它不是定时器，不保证固定间隔，但能避免丢帧、减少卡顿，并节省电量
- 回调参数是高精度时间戳（DOMHighResTimeStamp），可用于计算真实 Δt（帧间隔时间）
- 需手动递归调用自身才能持续运行，形成“循环”
基础结构示例：
function gameLoop(timestamp) {
const delta = timestamp - lastTime;
lastTime = timestamp;
<p>update(delta); // 逻辑更新（物理、输入、AI等）
render(); // 渲染画面</p><p>requestAnimationFrame(gameLoop); // 下一帧
}
let lastTime = 0;
requestAnimationFrame(gameLoop);</p>实现目标帧率（如 30fps 或 60fps）的节流控制
rAF 默认尽可能快（≈60fps），但有时需降帧以适配低端设备、节省性能或匹配特定逻辑节奏。这时要在 update 阶段做时间采样，而非改变 rAF 调用频率：
立即学习“Java免费学习笔记（深入）”；
- 记录上一次逻辑更新的时间点
- 仅当经过足够时间（如 1000/30 ≈ 33.3ms）才执行 update
- render 仍每帧都调用，保持视觉流畅（可插值或跳帧）
示例（固定 30fps 逻辑更新）：
const TARGET_FPS = 30;
const FRAME_TIME = 1000 / TARGET_FPS; // ≈33.33ms
let accumulator = 0;
let lastUpdate = 0;
<p>function gameLoop(timestamp) {
const delta = timestamp - lastTime;
lastTime = timestamp;</p><p>accumulator += delta;</p><p>// 累积足够时间才更新逻辑
while (accumulator >= FRAME_TIME) {
update(FRAME_TIME); // 恒定步长，利于确定性模拟
accumulator -= FRAME_TIME;
lastUpdate = timestamp;
}</p><p>render(); // 每帧渲染，可用 lastUpdate 和 accumulator 插值
requestAnimationFrame(gameLoop);
}</p>避免阻塞事件循环影响交互响应
游戏逻辑（尤其是复杂物理或 AI）若单帧耗时过长，会阻塞事件循环，导致用户输入延迟、滚动卡顿、甚至 rAF 掉帧。应主动拆分工作：
- 将大任务切片（如每帧只处理 200 个敌人 AI）
- 用
setTimeout(..., 0)或queueMicrotask让出控制权，但慎用——会破坏帧同步 - 更推荐：用
performance.now()监控单帧耗时，超限时跳过部分非关键逻辑
例如：
const MAX_UPDATE_TIME = 8; // 允许最多 8ms 更新逻辑
function update(delta) {
const start = performance.now();
while (hasWork() && performance.now() - start < MAX_UPDATE_TIME) {
processOneUnitOfWork();
}
}
不要用 setInterval 或 setTimeout 控制主循环
它们与屏幕刷新不同步，容易引发：
- 帧撕裂（render 在非垂直同步点发生）
- 掉帧或重复渲染（尤其 tab 切换后恢复时）
- 无法获取准确时间戳，Δt 计算失真
rAF 是唯一被浏览器优化、暂停感知（页面不可见时自动暂停）、且时间精度高的选择。所有现代 Web 游戏引擎（Phaser、Three.js、PixiJS）均基于它构建主循环。
