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 中：
立即学习“Java免费学习笔记（深入）”；
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，用于拦截网络请求、离线缓存等，用途不同
