Web Worker 是为解耦计算与UI而设计的后台线程，专注纯计算以保主线程60fps；它无DOM访问能力，仅通过postMessage通信，不可跨域加载，适用于临时性密集计算任务。
Web Worker 是前端面试中关于“浏览器多线程”和“性能优化”的核心考点，不是考会不会写 new Worker()，而是考你是否真正理解它的设计动机、能力边界和工程权衡。答得好，能体现你对 JavaScript 运行机制、主线程瓶颈和用户体验的系统性思考。
为什么需要 Web Worker？单线程卡顿的本质是什么？
JavaScript 是单线程语言，所有任务（渲染、事件响应、脚本执行）都挤在同一个主线程里。一旦遇到耗时计算（比如解析 10 万条 JSON、图像像素处理、加密解密），主线程就会被长时间占用——用户点击无响应、滚动卡顿、动画掉帧，甚至触发浏览器“页面未响应”提示。
这不是代码写得不好，而是语言模型决定的：DOM 操作必须在主线程，为避免多线程并发修改导致渲染不一致，JS 主动放弃多线程 DOM 访问权。所以 Web Worker 的出现，不是为了“让 JS 多线程”，而是为了“把不该在主线程干的活，挪到隔离的后台线程去干”。
- 本质是解耦：UI 线程（主线程）专注渲染与交互；Worker 线程专注纯计算
- 关键指标不是“快多少”，而是“主线程是否保持 60fps 响应”
- 不能解决所有性能问题：如果瓶颈在 DOM 重排/重绘、大量 layout 触发或网络请求，Worker 无效
Worker 能做什么？不能做什么？（必考限制点）
Worker 不是另一个 window，它运行在独立的上下文，没有 DOM、没有 window、没有 document，但也不是“功能残缺”。回答时要分清“禁止”和“不可用”：
-
明确禁止：访问 DOM（
document.getElementById）、操作全局对象（window.alert）、使用 localStorage/sessionStorage（同源策略下也不行） -
可用但受限：可发起
fetch或XMLHttpRequest；可调用setTimeout/setInterval；可使用console.log、navigator（部分属性如navigator.userAgent）、location（只读） -
通信硬约束：只能通过
postMessage传递数据，且数据会被结构化克隆（function、undefined、RegExp、Date对象等无法传；ArrayBuffer可转移，避免拷贝开销） -
加载限制：Worker 脚本必须同源；不能加载
file://协议资源；若需 npm 包，需借助worker-loader或comlink封装
如何正确通信？常见错误与优化技巧
通信不是“发消息就完事”，高频出错点在于：主线程阻塞等待、消息格式混乱、未及时终止 Worker。
- 主线程不要用
while(!result) {}轮询等待结果——这反而会卡住主线程；必须用onmessage异步监听 - 推荐使用
Promise + async/await封装通信逻辑，提升可读性：
主线程示例：
async function runInWorker(data) {<br> const worker = new Worker('calc.js');<br> return new Promise(resolve => {<br> worker.onmessage = e => { resolve(e.data); worker.terminate(); };<br> worker.postMessage(data);<br> });<br>} - 大数组/二进制数据传输，用
transferable选项避免深拷贝：worker.postMessage(arrayBuffer, [arrayBuffer]); - Worker 完成任务后，主线程应主动调用
worker.terminate()；否则长期驻留浪费内存
对比 Service Worker 和 Shared Worker，突出定位差异
面试官常混淆三者，需一句话说清角色：
- Web Worker：页面专属后台线程，生命周期绑定当前 JS 执行上下文，适合临时性计算任务（如导出 Excel、实时滤镜）
-
Service Worker：浏览器级代理线程，独立于页面存在，用于离线缓存、消息推送、网络拦截，不访问 DOM，也不直接与页面通信（需通过
postMessage或ClientsAPI） - Shared Worker：跨 Tab 共享的 Worker，多个同源页面可共用一个实例，适合状态同步场景（如多标签页聊天未读数统一更新）；但兼容性略差，实际项目中较少用
一句话总结：Worker 是“你的计算协程”，Service Worker 是“浏览器的网络管家”，Shared Worker 是“多窗口共享的轻量服务端”。
