Web Worker 是独立于主线程的后台脚本,不共享内存、不可操作 DOM,通过 postMessage 通信,支持 Transferable 优化大数据传输,需显式错误监听,SharedArrayBuffer+Atomics 可实现共享内存但需跨域隔离。

JavaScript 本身是单线程的,Web Worker 不是让 JS 变成多线程,而是让你能在主线程之外启动一个独立的、运行在后台的脚本上下文——它不共享内存,不能操作 DOM,但能真正并行执行 CPU 密集任务。
Web Worker 的创建和通信机制
Worker 是通过构造函数 new Worker('script.js') 启动的,它会加载并执行指定脚本,与主线程完全隔离。通信只能靠 postMessage() 和 onmessage 事件,数据通过结构化克隆(不是引用传递)序列化传输。
常见错误:直接传 function、DOM element 或带循环引用的对象,会报 DataCloneError;试图在 Worker 里调用 document.getElementById 会报 ReferenceError。
- Worker 内部没有
window、document、alert等浏览器 API,只有self(指向 Worker 全局对象) - 主线程和 Worker 都可用
setTimeout、fetch、ArrayBuffer,但localStorage不可用(部分浏览器限制) - 传大数组时优先用
Transferable(如postMessage(data, [data.buffer])),避免拷贝开销
如何正确处理 Worker 中的错误
Worker 内部抛出未捕获异常不会影响主线程,也不会触发 window.onerror。必须显式监听 onerror 或 onmessageerror。
立即学习“Java免费学习笔记(深入)”;
const worker = new Worker('calc.js');
worker.onerror = (e) => {
console.error('Worker script error:', e.filename, e.lineno, e.message);
};
worker.onmessage = (e) => {
console.log('Result:', e.data);
};
在 calc.js 中也应加 self.onerror:
self.onerror = (e) => {
self.postMessage({ error: e.message });
};
否则错误静默失败,调试时找不到源头。
SharedArrayBuffer + Atomics 实现真正共享内存(需 HTTPS)
普通 Worker 之间或 Worker 与主线程之间默认不共享内存,但可通过 SharedArrayBuffer 搭配 Atomics 实现低层同步——不过这要求页面启用跨域隔离(crossorigin 属性 + HTTP 头 Cross-Origin-Embedder-Policy: require-corp)。
不满足条件时,new SharedArrayBuffer(1024) 会返回 undefined,且控制台提示 SharedArrayBuffer is not defined。
- 只适用于高阶场景:比如音频实时处理、物理引擎、多人协作编辑中的状态同步
-
Atomics.wait()和Atomics.notify()可替代轮询,但容易写死锁,务必配超时和检查条件 - V8 和 Firefox 支持较好,Safari 对
Atomics的某些方法支持滞后
Worker 不是万能加速器:启动开销约 5–10ms,小任务反而更慢;调试需在浏览器 DevTools 的 “Application → Service Workers” 或 “Sources → Workers” 标签页下单独打开;长期运行的 Worker 忘记 .terminate() 会造成内存泄漏。











