Web Workers 是浏览器提供的后台线程 API，用于执行计算或 I/O 密集型任务而不阻塞主线程；它不能操作 DOM 或访问 window/document，但支持 fetch、setTimeout 等部分 API；通过 postMessage/onmessage 与主线程通信。
JavaScript 本身是单线程的，但 Web Workers 提供了一种在后台线程中运行脚本的机制，让耗时任务不阻塞主线程，从而保持页面响应流畅。
Web Workers 是什么？
Web Workers 是浏览器提供的 API，允许你在独立于主线程的后台线程中执行 JavaScript。它不能直接操作 DOM，也不能访问 window、document 等全局对象，但可以使用 fetch、setTimeout、WebSockets、IndexedDB 等部分 Web API。
它的核心价值在于：把计算密集型或 I/O 密集型任务（比如图像处理、大数据解析、加密解密）移到后台线程，避免卡住 UI。
如何创建和使用 Worker？
创建一个 Worker 很简单，分三步：
立即学习“Java免费学习笔记（深入）”；
- 写一个单独的 JS 文件（例如 worker.js），里面放要后台执行的逻辑
- 在主脚本中用 new Worker('worker.js') 实例化一个 Worker 对象
- 通过 postMessage() 和 onmessage 在主线程与 Worker 之间传递数据
注意：Worker 中的 this 指向的是 WorkerGlobalScope，不是 window；所以要用 self.postMessage 发送消息，用 self.onmessage 接收。
一个简单例子：计算斐波那契数列
假设你想算第 40 项斐波那契数，直接在主线程算会卡顿几秒。用 Worker 就能避免：
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));
};
main.js：
const worker = new Worker('worker.js');
worker.postMessage(40);
worker.onmessage = function(e) {
console.log('结果：', e.data); // 不会阻塞页面
};
Worker 的类型与适用场景
主要有三种 Worker：
- Dedicated Worker ：一对一绑定，最常用，适合长期运行的独立任务
- Shared Worker ：多个页面/iframe 可共享同一个 Worker，适合跨 tab 协作（如实时同步状态）
- Service Worker ：用于拦截网络请求、实现离线缓存和推送，本质是特殊的事件驱动 Worker
日常开发中，Dedicated Worker 覆盖大多数多线程需求；Shared Worker 使用较少，需注意跨源限制；Service Worker 更偏向 PWA 场景，不属于传统“多线程计算”范畴。
