Web Workers 允许在浏览器中启动独立于主线程的子线程处理耗时计算，避免阻塞 UI；需通过 postMessage 通信，Worker 必须从独立 JS 文件加载，使用结构化克隆传递数据，支持 transferable 提升性能，任务应分片并可中断，调试可通过 DevTools Workers 面板进行。
Web Workers 允许你在浏览器中启动独立于主线程的子线程，专门处理耗时的计算任务，避免阻塞 UI 渲染和用户交互。关键在于把计算逻辑从主线程剥离，通过 postMessage 通信，而不是直接共享变量或 DOM。
创建专用 Worker 文件并加载
Worker 必须从独立的 JavaScript 文件中初始化，不能内联定义（除 Blob URL 外）。例如：
- 新建一个文件
calculator.js，在里面写纯计算逻辑（不能访问window、document等）； - 在主脚本中用
new Worker('./calculator.js')实例化； - 确保该文件能被服务器正确返回（MIME 类型为
application/javascript），开发时注意本地文件协议（file://）限制，建议用本地服务（如live-server或 Vite）运行。
主线程与 Worker 之间安全通信
双方只能通过消息传递交换数据，且默认是**结构化克隆**（不传函数、DOM 节点、undefined 等）。常见模式：
- 主线程调用
worker.postMessage({ type: 'start', data: hugeArray })发送任务； - Worker 中监听
self.onmessage = (e) => { ... }，收到后执行计算； - 计算完成后，Worker 调用
self.postMessage(result)把结果发回； - 主线程用
worker.onmessage = (e) => { console.log(e.data) }接收结果； - 注意：大数组或对象可使用
transferable（如ArrayBuffer）提升性能，避免拷贝——传入postMessage(data, [data.buffer])后原主线程就无法再访问该 buffer。
处理长时间任务时的响应性优化
即使用了 Worker，若单次计算过长，仍可能让 Worker 内部“卡住”，影响其响应其他消息（比如取消请求）。建议：
- 将大任务拆成小块，用
setTimeout或queueMicrotask分片执行（Worker 中可用）； - 在每块之间检查
self.aborted标志（由主线程通过消息设置）实现可中断； - 对超长任务，考虑加进度通知：Worker 定期
postMessage({ type: 'progress', percent: 65 })； - 不再需要时，及时调用
worker.terminate()释放资源，尤其在 SPA 页面跳转前。
调试与兼容性注意事项
Worker 运行在独立上下文，Chrome DevTools 支持单独调试（Application → Workers 面板），但断点需设在 Worker 文件中。兼容性方面：
- 所有现代浏览器都支持，IE10+ 也支持基础版（但无
transferable和模块 Worker）； - 若要用 ES 模块，需用
new Worker('./worker.js', { type: 'module' })，注意模块 Worker 不支持importScripts； - 避免在 Worker 中做网络请求（除非用
fetch）、操作 localStorage 或生成随机数（Math.random()在 Worker 中有效，但种子相同可能导致重复——如需真随机，应由主线程生成后传入）。
