Web Worker 可在后台创建独立线程处理计算密集型任务，避免阻塞主线程；通过 postMessage 通信，无法访问 DOM，受限于同源策略与上下文隔离。
JavaScript 本身是单线程的，无法真正实现多线程，但可以通过 Web Worker 在后台创建独立的执行线程，实现并发任务处理。它不阻塞主线程（如 UI 渲染、用户交互），适合处理计算密集型或耗时操作。
Web Worker 的核心使用方式
Web Worker 的核心使用方式Worker 通过单独的 JavaScript 文件启动，与主线程通过 postMessage() 和 onmessage 通信，不能直接访问 DOM、window 或 document 对象。
- 创建 Worker：
const worker = new Worker('worker.js'); - 主线程发消息：
worker.postMessage(data); - Worker 接收消息：
self.onmessage = (e) => { /* e.data */ }; - Worker 发送结果：
self.postMessage(result); - 销毁 Worker：
worker.terminate();（主线程）或self.close();（Worker 内）
Web Worker 的主要使用限制
Worker 运行在独立上下文中，权限和能力被刻意隔离，以保障安全和主线程稳定性：
-
无法操作 DOM：没有
document、window、localStorage等 BOM/DOM API -
无全局 this 指向 window：全局对象是
self（等价于WorkerGlobalScope） -
部分 API 不可用：如
alert、fetch（但现代浏览器已支持）、XMLHttpRequest（可用，但推荐用fetch）、setTimeout/setInterval（可用） - 不能跨域加载脚本：Worker 脚本必须同源（或通过 CORS 显式允许）
-
不能共享内存（默认）：普通 Worker 使用结构化克隆传递数据（深拷贝），大对象传输开销高；需用
SharedArrayBuffer+Atomics实现真正共享内存，但受跨域策略和COOP/COEP头限制 - 调试较复杂：Chrome/Firefox 支持在 DevTools 的 “Application → Service Workers” 或 “Sources → Workers” 中调试，但断点和日志需注意上下文
哪些场景适合用 Web Worker
不是所有异步操作都需要 Worker —— Promise、async/await、事件循环已能很好处理 I/O 异步（如网络请求、定时器）。Worker 的价值在于避免 CPU 密集型任务卡住主线程：
- 图像/音视频处理（滤镜、编码、解码）
- 大数据排序、搜索、加密解密（如 AES、RSA 计算）
- 复杂物理模拟、游戏 AI、路径规划
- 前端 Excel 解析、大型 JSON 格式校验与转换
- 离线缓存预处理、索引构建（配合 IndexedDB）
替代方案与补充说明
对于简单并发，可考虑更轻量的方式：
- OffscreenCanvas：配合 Worker 渲染图形（Canvas2D/WebGL），避免主线程绘制压力
- Service Worker：专用于网络代理与离线缓存，生命周期和用途与普通 Worker 不同
-
Module Worker（ESM Worker）：
new Worker('worker.js', { type: 'module' })，支持import语法，更现代但需注意兼容性 -
主线程分片处理：用
setTimeout或queueMicrotask拆分长任务，让出控制权给 UI 更新（适用于中低强度计算）
不复杂但容易忽略：Worker 中的错误不会冒泡到主线程，需主动监听 self.onerror 或 worker.onerror 捕获异常；且 Worker 脚本加载失败时，仅触发 worker.onerror，无详细报错信息，建议配合 try/catch 和日志上报。
