Web Workers 是浏览器提供的后台线程机制，实现 JS 真正多线程，避免阻塞主线程；通过 postMessage 通信，不可访问 DOM，适用于计算密集型任务。
Web Workers 是浏览器提供的、让 JavaScript 在后台线程中运行的机制，它能真正实现多线程（脱离主线程），避免长时间任务阻塞页面渲染和交互。
Web Workers 的本质是独立线程
JavaScript 本身是单线程的，但 Web Workers 借助浏览器底层能力，在单独的线程中执行脚本。这个线程与主线程完全隔离：不能
访问 DOM、window、document 等全局对象，也不能直接共享变量。
通信只能通过 message 机制 —— 主线程和 Worker 线程互相 postMessage 发送数据，再用 onmessage 接收。传递的是数据副本（结构化克隆），不是引用。
如何创建并使用一个 Worker
需要把要运行的逻辑写进一个单独的 JS 文件（比如 worker.js），然后在主线程中实例化：
主线程（例如 index.js）：
const worker = new Worker('worker.js');
worker.postMessage({ type: 'calculate', data: [1, 2, 3, 4, 5] });
worker.onmessage = function(e) {
console.log('收到结果：', e.data); // { result: 15 }
};
worker.onerror = function(e) {
console.error('Worker 出错：', e.message);
};
worker.js：
self.onmessage = function(e) {
if (e.data.type === 'calculate') {
const sum = e.data.data.reduce((a, b) => a + b, 0);
self.postMessage({ result: sum });
}
};
常见类型与适用场景
- Dedicated Worker（专用 Worker）：最常用，一对一绑定，由创建它的脚本独占使用
- Shared Worker：多个窗口/iframe 可共享同一个 Worker（需通过 port 通信），适合跨 tab 数据同步
- Service Worker：主要用于离线缓存和网络代理，属于特殊用途的 Worker，不直接用于计算任务
适合用 Worker 的典型任务包括：大量数组处理、加密解密、图像处理（如 canvas 像素计算）、复杂 JSON 解析、实时音视频分析等。
注意限制和最佳实践
- Worker 中不能操作 DOM，所有 UI 更新必须交回主线程完成
- 传参尽量轻量，避免频繁 postMessage 大对象（会触发序列化/反序列化开销）
- Worker 脚本路径必须符合同源策略，本地 file:// 协议下多数浏览器会拒绝加载
- 用完记得调用
worker.terminate()，否则线程会一直驻留内存 - Vite / Webpack 等构建工具支持内联 Worker（如
new Worker(new URL('./worker.js', import.meta.url))），更方便模块化管理
基本上就这些。Web Workers 不是魔法，但它让 JS 第一次拥有了可控的、安全的多线程能力。
