如何实现最快的非阻塞无限循环？

Great question—getting a tight, high-frequency loop that’s decoupled from display refresh is a common goal for simulation-heavy games or real-time systems. The setInterval(loopFunction, 0) approach you’re using hits the browser’s minimum timer delay (usually ~4ms in Chrome), so let’s dive into faster, more reliable alternatives:

1. MessageChannel 驱动循环（主线程最快方案） #

Browser timers like setInterval have hard-coded minimum delays (enforced to prevent tab throttling), but MessageChannel bypasses this by using inter-port messaging, which has near-zero scheduling overhead.

Here’s how to implement it:

const channel = new MessageChannel();
const triggerPort = channel.port2;

// 循环回调逻辑
channel.port1.onmessage = () => {
  loopFunction();
  // 触发下一次循环
  triggerPort.postMessage(null);
};

// 启动循环
triggerPort.postMessage(null);

In most modern browsers, this loop will run with intervals as low as 1ms—far faster than setInterval(0). The only caveat is that if the main thread gets blocked by rendering tasks or heavy JS, the loop will defer, but that’s unavoidable with any main-thread execution.

2. Web Worker 独立循环（完全脱离主线程阻塞） #

If your game logic can be separated from rendering, moving the core loop to a Web Worker is the best way to get a stable, high-frequency loop that’s 100% decoupled from display refresh. Workers don’t share the main thread’s rendering context, so they won’t be delayed by requestAnimationFrame or layout tasks.

Worker code (game-worker.js): #

let isRunning = true;
const fixedStep = 1; // 1ms per logic tick (adjust as needed)
let lastTick = performance.now();

function workerLoop() {
  const now = performance.now();
  let delta = now - lastTick;

  // 固定步长执行逻辑，避免跳帧
  while (delta >= fixedStep) {
    updateGameLogic(fixedStep);
    delta -= fixedStep;
  }

  // 把计算结果发送给主线程渲染
  postMessage({ type: 'logic-tick', state: getGameState() });
  
  if (isRunning) {
    // 用MessageChannel在worker内部循环（比setTimeout更快）
    setTimeout(workerLoop, 0);
  }
}

// 监听主线程指令
onmessage = (e) => {
  if (e.data.type === 'start') workerLoop();
  if (e.data.type === 'stop') isRunning = false;
};

Main thread code: #

const gameWorker = new Worker('game-worker.js');
gameWorker.postMessage({ type: 'start' });

// 用requestAnimationFrame处理渲染，和逻辑循环完全解耦
gameWorker.onmessage = (e) => {
  if (e.data.type === 'logic-tick') {
    requestAnimationFrame(() => {
      renderGame(e.data.state);
    });
  }
};

This setup lets your logic run at ~1000 ticks per second (if needed) while rendering stays synced to the display’s refresh rate—perfect for physics-heavy games where you need precise, consistent updates.

3. 固定步长校正（必加优化） #

No matter which loop method you use, add fixed-step logic to ensure your game state updates consistently, even if the loop gets delayed. The code snippet above already includes this, but here’s a standalone example for your existing loop:

let lastUpdateTime = performance.now();
const TICK_DURATION = 1; // 每步1ms

function loopFunction() {
  const now = performance.now();
  let timeSinceLastUpdate = now - lastUpdateTime;

  // 把累积的时间拆分成固定步长执行
  while (timeSinceLastUpdate >= TICK_DURATION) {
    updateGame(TICK_DURATION);
    timeSinceLastUpdate -= TICK_DURATION;
  }

  lastUpdateTime = now - timeSinceLastUpdate;
}

This prevents your game from speeding up or slowing down when the loop is blocked temporarily.

Key Notes #

• High-frequency main-thread loops will increase CPU usage, so only use this if your game actually needs sub-4ms tick rates (most 2D/3D games get by with 60 ticks per second just fine).
• Test on target browsers—while MessageChannel and Web Workers are widely supported, edge cases (like mobile browsers) might have slightly different performance characteristics.

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