Web Worker 通过独立线程执行耗时计算任务，避免阻塞主线程。需单独 JS 文件实现，使用 self.onmessage/self.postMessage 通信，不可访问 DOM，支持 fetch 等 API；主线程用 new Worker 启动并监听 onmessage，推荐 Transferable 优化大数据传输。
直接在独立线程里跑耗时逻辑，主线程就不再卡顿了。Web Worker 不是“让 JS 变成多线程”，而是浏览器给你开了个后台厨房——主厨（主线程）继续炒菜上菜，后厨（Worker）专炖汤、剁肉、发面，互不耽误。
创建一个专用 Worker 文件
Worker 必须写在单独的 .js 文件里，不能是内联脚本。比如建一个 processor.js：
- 用 self.onmessage 接收主线程传来的数据
- 处理完后调用 self.postMessage(result) 把结果发回去
- 不能访问 document、window、DOM，也不能用 alert 或 console.log（但现代浏览器支持 console，仅限调试）
- 可以使用 fetch、WebCrypto、setTimeout、ArrayBuffer 等 API
主线程中启动并通信
在你的主 JS（如 app.js）里：
- 用 new Worker('./processor.js') 实例化一个 Worker
- 用 worker.postMessage(data) 发送可序列化的数据（注意：函数、undefined、Date 对象等无法直接传，需转成 JSON 或用 Transferable）
- 监听 worker.onmessage 拿到返回结果，再更新 UI 或做后续操作
- 记得出错时监听 worker.onerror，避免静默失败
注意数据传递的开销和方式
postMessage 不是共享内存，而是拷贝（或转移）数据：
- 普通对象走结构化克隆，大数组或文件建议用 Transferable（如 ArrayBuffer），传完主线程就失去引用，零拷贝，性能更好
- 别频繁发小消息——合并批量任务，减少通信次数
- Worker 生命周期由主线程控制；用完可调 worker.terminate() 主动销毁，释放资源
适合交给 Worker 的典型场景
不是所有逻辑都值得拆出去，重点看是否满足两个条件：**计算密集、无需 DOM**：
- 大文件哈希（SHA-256、MD5）
- CSV/JSON 解析与清洗（几十 MB 数据）
- 图像像素处理（滤镜、缩放、格式转换）
- 复杂路径规划、图遍历、数值模拟
- 前端加密解密、JWT 签名验证
不复杂但容易忽略——关键不在“能不能用”，而在“该不该切”和“怎么传才快”。用对了，页面丝滑；用错了，反而增加通信负担。
