Web Workers 是浏览器原生后台线程，用于执行纯逻辑密集型任务而不阻塞 UI；需独立 JS 文件，通过 postMessage 通信，不支持 DOM 操作但可用 fetch 等 API，适用于大数据处理等场景。
Web Workers 是浏览器原生支持的后台线程机制，专为把耗时计算或数据处理任务从主线程剥离而设计。它不直接操作 DOM，也不阻塞 UI，适合做纯逻辑密集型工作——比如解析大数组、加密解密、图像像素处理、质数筛选、斐波那契计算等。
创建独立 Worker 文件
Worker 代码必须放在单独的 .js 文件中（如 worker.js），不能是内联脚本。这个文件拥有独立作用域和执行环境：
- 用 self.addEventListener('message', ...) 接收主线程发来的数据
- 用 self.postMessage(...) 把结果传回主线程
- 不能访问 document、window、alert 等 API，但可使用 fetch、setTimeout、JSON 和基础数学运算
主线程中启动并通信
在主页面脚本里，通过 new Worker('worker.js') 实例化，再用标准消息机制交互：
- worker.postMessage(data) 发送可序列化的数据（对象、数组、字符串、数字）
- worker.onmessage = event => { ... } 监听返回结果，event.data 即 Worker 传回的内容
- 任务结束可调用 worker.terminate() 或让 Worker 自行执行 self.close()
典型场景：避免卡顿的批量处理
比如要对 10 万条用户记录做格式转换或校验，直接在主线程循环会卡死界面。改用 Worker 后流程更清晰：
- 主线程切分数据块（如每 5000 条一组），逐批 postMessage 给 Worker
- Worker 接收后处理该批次，完成后 postMessage 返回结果
- 主线程收到后更新局部 DOM（如进度条、表格片段），不重绘整个页面
注意事项与常见坑
Worker 虽好，但不是万能胶：
- 传递的数据需可序列化——函数、DOM 节点、Date 对象（需转成字符串）、RegExp 等无法直接传，要用 JSON 或结构化克隆
- 频繁通信有开销，别每算一个数就发一次消息；建议批量处理+批量返回
- 调试时 Chrome DevTools 的 Application → Workers 面板可查看活跃 Worker 并设断点
- IE 不支持，现代浏览器均兼容；若需降级，可在 if (window.Worker) 中启用，否则 fallback 到主线程同步执行
