Web Worker 和 Service Worker 都是浏览器提供的 JavaScript 多线程技术，但它们的用途和工作方式有显著区别。
| 对比项 | Web Worker | Service Worker |
|---|---|---|
| 用途 | 用于在后台线程执行 CPU 密集型任务，避免阻塞主线程 | 主要用于离线缓存、网络请求拦截、推送通知等 PWA（渐进式 Web 应用）功能 |
| 生命周期 | 由页面创建，页面关闭后终止 | 独立于页面，即使页面关闭也能运行（直到被浏览器终止） |
| DOM 访问 | ❌ 不能访问 DOM | ❌ 不能访问 DOM |
| 网络请求 | ⚠️ 可以发起 `fetch`，但不能拦截请求 | ✅ 可以拦截、修改网络请求（`fetch` 事件） |
| 存储能力 | ⚠️ 可使用 `IndexedDB`、`localStorage`（同步 API 不可用） | ✅ 可使用 `Cache API`、`IndexedDB` |
| 通信方式 | ✅ `postMessage` 与主线程通信 | ✅ 通过 `postMessage` 与页面通信，也支持 `BroadcastChannel` |
| 典型应用场景 | 大数据计算、图像处理、复杂算法 | 离线缓存、资源预加载、后台同步、推送通知 |
| 注册方式 | `new Worker('worker.js')` | `navigator.serviceWorker.register('sw.js')` |
| 作用范围 | 仅影响当前页面 | 可控制多个页面（作用域内） |
| 是否支持 `importScripts` | ✅ 支持 | ✅ 支持 |
Web Worker（专用 Worker）
- 用途：在独立线程运行脚本，防止主线程卡顿（如计算、数据处理）。
- 特点：
- 由页面创建，页面关闭后 Worker 终止。
- 不能访问 DOM、`window`、`document`。
- 通过 `postMessage` 与主线程通信。
```html