Web Worker中while(true)模拟CPU周期阻塞EventListener的解决方法

我正在用HTML/JavaScript开发模拟器，GUI通过index.html处理，模拟器核心逻辑放在Web Worker中运行。点击“Start Worker”按钮后，模拟器会进入while(true)循环模拟CPU周期，但此时Web Worker的消息监听会被完全阻塞，无法接收主线程发来的PostMessage；而在启动这个无限循环前，PostMessage是可以正常交互的。

以下是可复现问题的代码：

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Worker Example</title>
</head>
<body>
  <button id="sendMessageButton">Start Worker</button>
  <button id="sendMessageButton1">Send Message to Worker</button>

  <script>
    const worker = new Worker('worker.js');

    document.getElementById('sendMessageButton').addEventListener('click', () => {
      worker.postMessage('start');
    });

    document.getElementById('sendMessageButton1').addEventListener('click', () => {
      worker.postMessage('mex');
    });

    worker.addEventListener('message', (event) => {
      if(event.data === "MEX")
      {
        console.log("MEX...")
      }
    });
  </script>
</body>
</html>

worker.js #

self.addEventListener('message', function(event) {
    
    console.log("EVENT: "+event)
    
    if(event.data === "mex")
    {
        self.postMessage("MEX");
    }
    if(event.data === "start")
    {
        console.log("start")
        while(true);
    }
});

我需要避免while(true)阻塞PostMessage的接收，同时不想用setInterval或setTimeout，因为这会让模拟器运行速度变慢。

Web Worker是单线程环境，一旦进入无限同步循环，就会占用整个线程，无法处理其他事件（包括消息监听）。要解决这个问题，核心是让循环周期性地让出线程，给消息队列留出处理时间，同时尽可能保持模拟器的运行效率，避免定时器带来的延迟。

方案1：用queueMicrotask拆分循环批次 #

把无限循环拆分成“处理N个CPU周期 + 让出线程处理消息”的循环。queueMicrotask会在当前任务结束后、下一个宏任务执行前调度回调，延迟极小，几乎不会影响模拟器性能。

修改后的worker.js示例：

let isRunning = false;
// 每次处理的CPU周期数，可根据性能调整
const BATCH_SIZE = 1000;

self.addEventListener('message', function(event) {
    console.log("EVENT: ", event);
    
    if(event.data === "mex") {
        self.postMessage("MEX");
    }
    if(event.data === "start") {
        console.log("start");
        isRunning = true;
        runSimulationBatch();
    }
    if(event.data === "stop") { // 新增停止指令，方便控制模拟器
        isRunning = false;
    }
});

function runSimulationBatch() {
    if(!isRunning) return;
    
    // 处理一批CPU周期
    for(let i = 0; i < BATCH_SIZE; i++) {
        // 这里写入你的单步CPU模拟逻辑
        // ...
    }
    
    // 让出线程，处理消息后继续循环
    queueMicrotask(runSimulationBatch);
}

方案2：用requestIdleCallback（适合非实时性要求极高的场景） #

如果模拟器可以利用浏览器空闲时间运行，requestIdleCallback会在Web Worker空闲时调用回调，不会抢占核心计算资源，但优先级较低，Web Worker中同样支持这个API：

let isRunning = false;

self.addEventListener('message', function(event) {
    console.log("EVENT: ", event);
    
    if(event.data === "mex") {
        self.postMessage("MEX");
    }
    if(event.data === "start") {
        console.log("start");
        isRunning = true;
        requestIdleCallback(runSimulation);
    }
});

function runSimulation(deadline) {
    if(!isRunning) return;
    
    // 在空闲时间内尽可能多处理周期
    while(deadline.timeRemaining() > 0 && isRunning) {
        // 单步CPU模拟逻辑
        // ...
    }
    
    // 继续请求下一次空闲时间
    requestIdleCallback(runSimulation);
}

关键原理 #

这两种方案都没有用定时器，而是利用了JavaScript的事件循环机制：

• queueMicrotask会把回调加入微任务队列，当前同步代码执行完后立即执行，延迟可以忽略不计，几乎和纯while(true)的效率一致。
• 每次处理一批周期后让出线程，Web Worker就有机会处理新来的消息事件，不会被完全阻塞。

额外优化 #

• 可以根据实际性能动态调整BATCH_SIZE，比如检测Web Worker的CPU占用率来自动调整批次大小。
• 新增停止消息的监听，方便随时终止模拟器运行。

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