JavaScript如何实现多线程？WebWorker使用教程

JavaScript 本身是单线程的，但通过 Web Workers 可在浏览器中实现真正的多线程并发——Worker 运行于独立线程，完全隔离 DOM 和全局浏览器 API（如 document、window、localStorage），仅能通过 postMessage 与主线程安全通信；它支持 fetch、ArrayBuffer、WebAssembly 等能力，配合 Transferable 对象可零拷贝传递大数据，进阶还可借助 SharedArrayBuffer 与 Atomics 实现跨线程共享内存（需 HTTPS 与严格的跨域隔离策略）；不过需警惕常见陷阱：Worker 内错误默认静默、结构化克隆会丢弃函数和 DOM 节点、创建开销不容忽视——它并非万能解药，而是专为 CPU 密集型任务（如图像处理、加密计算、大数组分析）量身定制的高性能利器。

Web Workers 不能直接操作 DOM

这是最常踩的坑：试图在 Worker 里调用 document.getElementById 或修改 innerHTML，会立刻报错 ReferenceError: document is not defined。Worker 运行在独立线程，没有全局 window、document、alert 等浏览器 API。

只能通过 postMessage 和主线程通信，把计算结果传回去，由主线程负责更新界面。

• Worker 内可用：console、setTimeout、fetch、JSON、ArrayBuffer、WebAssembly
• Worker 内不可用：document、window、localStorage（但可用 indexedDB）、XMLHttpRequest（推荐用 fetch）
• 主线程创建 Worker 必须是同源脚本，不能是 data: 或内联 blob: URL（除非显式用 Blob + URL.createObjectURL）

如何正确创建和通信：主线程与 Worker 的双向 postMessage

通信靠 postMessage + onmessage，注意参数会被结构化克隆（structuredClone），函数、DOM 节点、undefined 会被丢弃。

/* main.js */
const worker = new Worker('./calc-worker.js');
<p>worker.postMessage({ type: 'start', data: [1, 2, 3, 4, 5] });</p><p>worker.onmessage = function(e) {
const { type, result } = e.data;
if (type === 'done') {
console.log('计算完成:', result); // 15
}
};</p><p>/<em> calc-worker.js </em>/
self.onmessage = function(e) {
const { type, data } = e.data;
if (type === 'start') {
const sum = data.reduce((a, b) => a + b, 0);
self.postMessage({ type: 'done', result: sum });
}
};</p>

• 主线程中用 new Worker('./xxx.js')，路径必须是相对或绝对 URL（不能是模块路径，如 ./worker.ts）
• Worker 内用 self.postMessage() 发送，用 self.onmessage = ... 接收（self 指向 Worker 全局作用域）
• 若需传大量数据（如图像像素），用 postMessage(data, [transferList]) 零拷贝转移 ArrayBuffer，避免复制开销

SharedArrayBuffer + Atomics 实现真正共享内存（需 HTTPS + Cross-Origin-Isolated）

普通 Worker 间数据靠拷贝，SharedArrayBuffer 允许主线程与 Worker 直接读写同一块内存，但启用门槛高：

• 页面必须开启 cross-origin-isolated：响应头需含 Cross-Origin-Embedder-Policy: require-corp 和 Cross-Origin-Opener-Policy: same-origin
• 现代 Chrome/Firefox 支持，Safari 仍不支持 Atomics.wait 等高级同步原语
• SharedArrayBuffer 本身不带锁，必须配合 Atomics 操作（如 Atomics.add、Atomics.wait）防止竞态

// 主线程
const buffer = new SharedArrayBuffer(8);
const sabView = new Int32Array(buffer);
sabView[0] = 0;
<p>const worker = new Worker('./counter-worker.js');
worker.postMessage({ buffer });</p><p>// counter-worker.js
self.onmessage = function(e) {
const view = new Int32Array(e.data.buffer);
Atomics.add(view, 0, 1); // 原子加 1
Atomics.notify(view, 0); // 唤醒等待者
};</p>

常见错误：Worker 报错不显示在主线程控制台

Worker 内抛出未捕获异常（如 ReferenceError、TypeError）默认静默，不会触发主线程的 window.onerror，也看不到堆栈。

• 务必在 Worker 内加 self.onerror = console.error 或自定义上报
• 开发时用 chrome://inspect → “Remote Target” 找到你的 Worker，可断点调试
• 构建工具（如 Webpack/Vite）打包 Worker 时，需配置 worker: { type: 'module' } 才能支持 import 语法；否则只能用 importScripts()
• Vite 中动态引入 Worker 要写成 new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })

多线程不是银弹：Worker 启动有开销（约几毫秒），频繁创建销毁反而更慢；适合 CPU 密集型任务（加密、解析大 JSON、Canvas 像素处理），不适合简单逻辑或 I/O 等待型操作。

本篇关于《JavaScript如何实现多线程？WebWorker使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！