Web Worker 是浏览器为 JavaScript 提供的后台线程，解决单线程导致的页面卡顿问题：将 CPU 密集型任务（如大数据计算、图像处理）移至独立线程执行，主线程专注渲染与交互，通过 postMessage 异步通信，不可操作 DOM，需同源 HTTP/HTTPS 环境。
Web Worker 不是让 JavaScript 变成多线程语言，而是浏览器给 JS 提供的“后台工作间”——主线程专注渲染和交互，Worker 专干重活，彼此不抢资源、不卡对方。
它解决什么问题？
JavaScript 天生单线程，所有任务排队执行。一旦遇到大数据计算、复杂算法、图像处理这类 CPU 密集型操作，主线程就会被长时间占用，导致：
- 页面卡顿、按钮点击无响应
- 滚动掉帧、动画撕裂
- 浏览器弹出“页面未响应”警告
Web Worker 把这类任务挪到独立线程运行，主线程照常渲染 DOM、响应用户输入，体验丝滑如初。
它能做什么、不能做什么？
能做的：
- 执行任意 JavaScript 逻辑（循环、递归、数学运算、加密解密等）
- 发起网络请求（
fetch、XMLHttpRequest） - 读写 IndexedDB
- 使用
setTimeout、setInterval、console - 访问
self、navigator、只读的location
不能做的：
- 直接操作 DOM（
document、Element、localStorage等） - 访问
window、parent、frameElement - 调用
alert、confirm、prompt - 加载非同源脚本（必须与主页面协议、域名、端口一致）
- 在
file://协议下运行（需 HTTP/HTTPS 服务环境）
怎么通信？就靠消息传递
主线程和 Worker 彼此隔离，通信唯一方式是异步发消息：
- 主线程用
worker.postMessage(data)发送数据（会自动序列化） - Worker 用
self.onmessage = e => { ... }接收 - Worker 回传用
self.postMessage(result) - 主线程监听用
worker.onmessage = e => { ... }
注意：传递的是数据副本，不是引用；大对象传输建议用 transferable（如 ArrayBuffer）避免拷贝开销。
常见类型和适用场景
Dedicated Worker（专用）：最常用，一对一绑定页面，适合单页内耗时计算（如表格聚合、实时滤镜、密码哈希）。
Shared Worker（共享）：多个标签页或 iframe 共用一个 Worker，适合跨页状态同步（如聊天未读数、全局计时器）。
Service Worker：不在此列，它是网络代理层，用于缓存、离线、推送，和计算无关。
实际项目中，优先选 Dedicated Worker；Shared Worker 需额外处理端口管理，调试成本略高。
