JavaScript中Web Workers是什么？如何实现多线程？

Web Workers 是 JavaScript 中实现后台并发执行的关键机制，它通过进程级隔离的独立上下文卸载 CPU 密集型任务（如大数据计算、图像处理、加密解码），从根本上避免阻塞主线程导致的页面卡顿；虽不提供传统意义上的共享内存多线程，但支持高效的消息传递、ArrayBuffer 零拷贝传输，以及在严格安全策略下启用的 SharedArrayBuffer+Atomics 有限共享内存模型——真正价值不在于“炫技式并发”，而在于精准识别耗时任务、合理权衡通信开销与计算收益，让 Web 应用既保持响应流畅，又释放多核硬件潜能。

Web Workers 不是 JavaScript 的多线程——它没有共享内存，也不能直接操作 DOM。它是独立的执行上下文，靠消息传递通信，本质是「进程级隔离」。

Web Worker 的基本创建和通信机制

主线程通过 new Worker() 启动一个独立脚本，Worker 脚本里用 self.postMessage() 发送数据，主线程用 worker.onmessage 接收；反过来也一样。双方都只能发可序列化的值（比如对象、数组、数字），不能传函数、DOM 节点或 undefined。

常见错误：在 Worker 里调用 console.log 看不到输出？默认不显示在 DevTools 的主控制台，得点开「Workers」标签页才能看到；或者改用 self.console.log 并确保浏览器支持。

• Worker 文件必须是同源的，不能是 data URL 或 blob URL（除非用 new Worker(URL.createObjectURL(blob))）
• Worker 内部没有 window、document、parent，只有 self 和有限的全局对象（如 fetch、setTimeout、importScripts()）
• 传大对象时注意序列化开销，频繁通信反而比单线程慢

/* main.js */
const worker = new Worker('worker.js');
worker.postMessage({ type: 'calculate', data: [1, 2, 3, 4, 5] });
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};
/ worker.js /
self.onmessage = (e) => {
if (e.data.type === 'calculate') {
const sum = e.data.data.reduce((a, b) => a + b, 0);
self.postMessage({ result: sum });
}
};

如何传 ArrayBuffer 实现零拷贝（避免大数组复制）

当需要处理大量二进制数据（如图像处理、音频解码），默认 postMessage() 会结构化克隆整个对象，产生深拷贝开销。用 transferList 参数可以把 ArrayBuffer 的所有权移交给 Worker，主线程立刻无法访问该缓冲区——这是真正意义上的零拷贝。

关键点：只能转移 ArrayBuffer 及其视图（TypedArray、DataView），不能转移普通对象或 JSON。

• 主线程传完后，原 ArrayBuffer.byteLength 变为 0，再读会报错 ArrayBuffer is detached
• Worker 收到后需用 e.data.buffer（不是 e.data）拿到原始缓冲区
• Chrome/Firefox 支持良好，Safari 对 transferList 的兼容性稍弱，建议检测 ArrayBuffer.prototype.transfer 是否存在

/* 主线程 */
const buffer = new ArrayBuffer(1024 * 1024);
const view = new Uint8Array(buffer);
// ... 填充数据
worker.postMessage({ buffer }, [buffer]); // 第二个参数是 transferList
/ Worker /
self.onmessage = (e) => {
const uint8 = new Uint8Array(e.data.buffer); // 直接复用 buffer
// 处理逻辑
};

SharedArrayBuffer + Atomics：有限的“真共享内存”场景

SharedArrayBuffer 允许主线程和 Worker 共享同一块内存，配合 Atomics 实现原子操作（如加法、等待、唤醒）。但它有严格限制：必须启用跨域隔离（Cross-Origin-Opener-Policy + Cross-Origin-Embedder-Policy），且目前仅适用于高性能计算、游戏引擎等极少数场景。

绝大多数业务不需要它。滥用会导致竞态、死锁或难以调试的内存状态混乱。普通任务优先走 message-passing 模型。

• 未启用跨域隔离时，new SharedArrayBuffer() 会抛出 TypeError: SharedArrayBuffer is not defined
• Atomics.wait() 会挂起 Worker 线程，但主线程不能被挂起（否则页面卡死），所以只应在 Worker 中调用
• 调试困难：Chrome 的内存快照不显示 SharedArrayBuffer 内容，需靠日志 + Atomics 操作追踪

Web Workers 的核心价值不在“并发数量”，而在把阻塞主线程的 CPU 密集型任务（比如解析大 JSON、加密、Canvas 像素计算）搬出去。别为了用而用——如果任务本身耗时不到 10ms，开 Worker 反而因启动和通信成本得不偿失。

以上就是《JavaScript中Web Workers是什么？如何实现多线程？》的详细内容，更多关于的资料请关注golang学习网公众号！