Web Worker陷入死循环致页面卡顿，如何实现可中断计算？

问题根源 #

你遇到的核心问题是：完全无间隙的死循环会占满Worker线程的全部CPU时间片，导致它根本没机会响应主线程的终止信号。浏览器的worker.terminate()虽然能强制终止Worker，但如果Worker正处于100%占用CPU的死循环状态，浏览器可能无法及时调度执行终止逻辑，甚至会因为CPU负载过高连累主线程卡顿。

可行的解决方法 #

1. 拆分计算任务，让Worker有机会响应终止信号

把大计算拆成多个可中断的小片段，Worker每执行完一小段就检查终止指令，或者主动让出线程间隙来处理消息。

主线程代码：

let worker = new Worker("./scripts/testWorker.js");

// 绑定终止按钮事件
document.getElementById('stop-calc-btn').addEventListener('click', () => {
  worker.postMessage({ action: 'stop' });
  worker = undefined;
});

Worker代码（testWorker.js）：

let stopFlag = false;

// 监听主线程的终止指令
self.addEventListener('message', (e) => {
  if (e.data.action === 'stop') {
    stopFlag = true;
  }
});

function runCalculation() {
  if (stopFlag) return;

  // 只执行一小段计算（比如循环1000次）
  for (let i = 0; i < 1000 && !stopFlag; i++) {
    // 这里写你的核心计算逻辑
    console.log('计算中...');
  }

  // 用setTimeout让出线程，让Worker有机会处理消息
  setTimeout(runCalculation, 0);
}

runCalculation();

2. 使用AbortController（现代浏览器推荐）

现代浏览器支持用AbortController给Worker传递终止信号，比手动发消息更简洁规范。

主线程代码：

const abortController = new AbortController();
const worker = new Worker("./scripts/testWorker.js", {
  signal: abortController.signal
});

// 终止按钮点击事件
document.getElementById('stop-calc-btn').addEventListener('click', () => {
  abortController.abort();
  worker = undefined;
});

Worker代码（testWorker.js）：

// 监听终止信号
self.signal.addEventListener('abort', () => {
  console.log('收到终止信号，停止计算');
  return;
});

function runCalculation() {
  if (self.signal.aborted) return;

  // 小段计算逻辑
  for (let i = 0; i < 1000 && !self.signal.aborted; i++) {
    // 计算操作
  }

  setTimeout(runCalculation, 0);
}

runCalculation();

关键注意事项 #

绝对不要在Worker里写完全无间隙的死循环（比如while(true){}），这种代码会让Worker线程彻底阻塞，无法处理任何外部信号，包括浏览器的强制终止指令。必须给线程留出处理消息的时间窗口，才能让终止逻辑生效。

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