一、JS 单线程困境JS 是单线程所有任务在主线程排队无法并行。阻塞问题耗时计算会阻塞 UI 渲染、交互导致页面卡顿、掉帧。设计原因保证 DOM 操作原子性避免多线程竞态冲突。二、Web Worker 是什么允许 JS 创建独立后台线程不阻塞主线程。专门处理耗时计算、大数据处理。主线程负责 UIWorker 负责计算真正并行。三、核心能力与限制✅ 能做复杂计算、循环、数据处理fetch/XHR网络请求setTimeout/setIntervalPromise、IndexedDB、WebSocket❌ 不能做禁区不能操作 DOM无 document、window不能用localStorage/sessionStorage不能用alert/confirm四、通信机制主线程 ↔ Worker 线程通过postMessage通信。传值不传址使用结构化克隆算法深拷贝传递不共享内存线程安全。接收数据用onmessage或addEventListener(message)。五、创建与使用// 主线程constworkernewWorker(./task.js,{type:module})worker.postMessage(data)worker.onmessage(e){/* 接收结果 */}// worker.jsself.onmessage(e){// 处理耗时任务self.postMessage(result)}六、关闭线程生命周期主线程强制关闭jsworker.terminate()立即停止可能丢失数据。Worker 内部优雅关闭jsself.close()完成当前任务后关闭更安全。七、错误处理onerror监听 Worker 内部运行错误。onmessageerror监听数据序列化 / 解析失败。八、模块化与依赖传统方式importScripts(./a.js, ./b.js)ES 模块new Worker(task.js, { type: module })支持import/export。九、SharedWorker共享线程同源多标签页共享同一个线程。用于跨页通信、状态同步、共享计算。基于port通信需监听connect事件。典型场景多标签页同步计数、音乐播放状态、在线文档协同。十、结构化克隆算法比 JSON 更强支持Date、RegExp、Blob、ArrayBuffer、循环引用。不能克隆Function、Error、DOM 节点。Transferable二进制数据可转移所有权零拷贝性能极高。十一、最佳使用场景大量数据计算、解析、排序、加密解密图像处理、Canvas 数据计算长循环、大数据遍历多页面状态同步SharedWorker十二、总结Web Worker 浏览器给 JS 开的后台计算线程不卡 UI、不碰 DOM、靠消息通信、传值不传址。