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 }
};
<p>/<em> calc-worker.js </em>/
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和COEPHTTP 头） - 主流托管平台（如 GitHub Pages、Vercel）默认不支持这些响应头，本地
file://协议也无效 -
Atomics.wait()等操作需要严格同步逻辑，写错容易死锁，调试困难
绝大多数业务场景不需要它。先确认你真在处理 GB 级数组或毫秒级同步需求，再考虑这条路径。
