Web Worker 可实现 JavaScript 的多线程并发，避免阻塞主线程；它在独立上下文运行，无法访问 DOM，仅通过 postMessage/onmessage 与主线程通信，支持结构化克隆传输数据。

JavaScript 本身是单线程的，但通过 Web Worker 可以在后台运行独立的脚本线程，实现真正的并发执行，避免阻塞主线程（尤其是 UI 渲染和用户交互）。

Web Worker 的基本使用方式

Worker 在独立上下文中运行，不能直接访问 DOM、window 或 document 对象，只能通过消息机制与主线程通信。

• 创建 Worker：用 new Worker('worker.js') 加载并启动一个 JS 文件
• 主线程发消息：调用 worker.postMessage(data)，支持结构化克隆（可传对象、数组、ArrayBuffer 等）
• 主线程监听消息：绑定 worker.onmessage = e => { console.log(e.data) }
• Worker 内部收发：使用 self.onmessage 接收，self.postMessage() 发送

一个简单示例：计算斐波那契数列不卡页面

主线程中：

const worker = new Worker('fib-worker.js');
worker.postMessage(40); // 请求计算第40项
worker.onmessage = e => {
  console.log('结果：', e.data); // 避免主线程被长计算阻塞
};

在 fib-worker.js 中：

self.onmessage = function(e) {
  const n = e.data;
  function fib(n) { return n <= 1 ? n : fib(n-1) + fib(n-2); }
  self.postMessage(fib(n));
};

注意要点和限制

• Worker 脚本必须来自同源（协议、域名、端口一致），不能加载本地 file:// 路径（需 HTTP 服务）
• 不能使用 alert、fetch（可用）、setTimeout（可用），但无 document、localStorage（可用 indexedDB）
• 可使用 importScripts('a.js', 'b.js') 加载其他脚本（同步阻塞）
• 终止 Worker：主线程调用 worker.terminate()，Worker 自己调用 self.close()

更实用的进阶用法

• SharedArrayBuffer + Atomics：Worker 间或 Worker 与主线程共享内存（需跨域设置 crossorigin 和 COOP/COEP 头）
• OffscreenCanvas：配合 Worker 进行 Canvas 渲染计算，提升图形性能
• Service Worker 是一类特殊 Worker，用于拦截网络请求、离线缓存等，用途不同