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 到主线程同步执行