JavaScript什么是WebWorker_多线程编程怎么实现

Web Worker 是浏览器中运行在独立线程、不阻塞 UI 的 JS 执行环境，无法访问 DOM 和 window；通过 new Worker() 创建并用 postMessage() 通信，数据经结构化克隆传输；SharedArrayBuffer+Atomics 支持零拷贝共享内存，但需 HTTPS 与 Cross-Origin-Isolated 环境。

Web Worker 是什么：浏览器里能跑的独立 JS 线程

Web Worker 不是“让 JavaScript 变成多线程语言”，而是提供一种机制，让你在浏览器主线程之外启动一个**独立的、不阻塞 UI 的脚本执行环境**。它运行在单独的线程上，有自己的全局对象（self）、作用域和事件循环，但不能访问 window、document、DOM 或任何主线程的变量。

怎么创建并通信：用 new Worker() + postMessage()

Worker 必须从外部 JS 文件加载（不能内联），通信靠消息传递，不是共享内存。常见错误是直接传函数或 DOM 节点——这会报 DataCloneError。

• Worker 构造函数只接受一个 URL 字符串，路径需同源（或满足 CORS）
• 主线程用 worker.postMessage(data) 发送数据，worker.onmessage 接收
• Worker 内部用 self.postMessage(data) 回传，监听 self.onmessage
• 传输的数据默认被结构化克隆（structuredClone），支持 ArrayBuffer、TypedArray 等，但不支持 function、undefined、RegExp、Error

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

为什么不能直接操作 DOM：设计约束不是 bug

Worker 没有 document、getElementById、fetch（旧版 Safari 甚至不支持 fetch 在 Worker 中）等 API。这不是限制，而是隔离设计的核心：避免竞态和渲染冲突。所有 UI 更新必须回到主线程做。

• 需要更新界面？Worker 计算完后 postMessage，主线程收到再操作 DOM
• 想发网络请求？Worker 支持 fetch（现代浏览器），但响应体需手动解析（response.json() 等可用）
• 大量数组排序/加密/解析 JSON？适合放 Worker；但只是加个 class 或改个 textContent？别绕路，就在主线程做

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

普通 Worker 之间、Worker 和主线程之间默认不共享内存，只能拷贝。若要零拷贝高性能协作（比如音视频处理、游戏逻辑），得用 SharedArrayBuffer 配合 Atomics。但这不是开箱即用的功能：

立即学习“Java免费学习笔记（深入）”；

• 页面必须启用 Cross-Origin-Isolated（通过 COOP 和 COEP HTTP 头）
• 主流托管平台（如 GitHub Pages、Vercel）默认不支持这些响应头，本地 file:// 协议也无效
• Atomics.wait() 等操作需要严格同步逻辑，写错容易死锁，调试困难

绝大多数业务场景不需要它。先确认你真在处理 GB 级数组或毫秒级同步需求，再考虑这条路径。