必须分片执行计算密集型任务，否则单线程阻塞会导致无法响应主线程消息、定时器延迟、fetch回调不触发及Worker被标记为无响应；常用setTimeout(0)或Promise.resolve().then()实现控制权让渡。
Worker线程中执行计算密集型任务时，不能让单次运算阻塞整个 Worker 消息循环，否则无法响应主线程的 postMessage 或自身定时器、fetch 等异步回调。分片执行的核心是：把大任务拆成小块，在每块之间主动让出控制权（yield），保证事件循环可继续调度。
为什么必须分片？
JavaScript 是单线程的，即使在 Worker 中，长时间同步计算也会导致：
- 无法及时处理主线程发来的终止指令或新参数
- setTimeout/setInterval 回调延迟甚至丢失
- fetch() 的 Promise.then 不会触发（因为微任务队列被压住）
- Chrome 可能标记该 Worker 为“无响应”，在 DevTools 中显示警告
基本分片模式：requestIdleCallback 或定时让渡
Worker 内部没有 requestIdleCallback，但可用 self.setTimeout(fn, 0) 或 Promise.resolve().then() 实现等效的“下一帧”让渡。典型结构如下：
let currentIndex = 0;
const totalItems = data.length;
const chunkSize = 1000; // 每次处理 1000 个元素
function processChunk() {
const end = Math.min(currentIndex + chunkSize, totalItems);
for (let i = currentIndex; i < end; i++) {
// 执行单个计算单元（如加密、数值迭代、图像像素处理）
compute(data[i]);
}
currentIndex = end;
if (currentIndex < totalItems) {
// 主动让出控制权，交还事件循环
setTimeout(processChunk, 0);
// 或：Promise.resolve().then(processChunk);
} else {
self.postMessage({ done: true, result });
}
}
processChunk();
配合主线程的可控暂停与取消
仅靠 setTimeout 分片还不够，还需支持外部中断。常见做法是监听 message 事件，并用标志位协作：
立即学习“前端免费学习笔记（深入）”；
- 主线程发送 { type: 'pause' } 或 { type: 'cancel' }
- Worker 中声明 let shouldPause = false, shouldCancel = false
- 在每轮 chunk 处理前检查：if (shouldCancel) return;；在 chunk 中间也可插入检查点
- 收到 cancel 后清空状态、释放内存、postMessage({ type: 'cancelled' })
进阶：自动调节 chunkSize 避免卡顿
固定 chunkSize 在不同设备上效果不一。可结合 performance.now() 动态测量单次耗时，逐步调整：
- 初始设 chunkSize = 100，记录 processChunk 开始/结束时间
- 若单次 > 5ms，下次减半；若
- 避免频繁重算，每 5 个 chunk 调整一次即可
不复杂但容易忽略。
