Web Worker 是浏览器提供的后台线程机制,用于在主线程外并行执行耗时计算任务,避免阻塞 UI 渲染和用户交互;其通过隔离执行环境与 postMessage 消息通信实现职责分离,不共享内存,不可访问 DOM。

Web Worker 是浏览器提供的一种后台线程机制,让 JavaScript 能在主线程之外并行执行耗时计算任务,从而避免阻塞 UI 渲染和用户交互。
它解决的是单线程模型下的“CPU 密集型卡顿”问题
JavaScript 主线程既要处理 DOM 更新、样式计算、布局绘制,又要响应点击、滚动、定时器、fetch 回调等所有事件。一旦遇到同步的重计算——比如遍历百万级数组、逐字节读取大文件、计算文件哈希、图像像素处理——主线程就会被独占,页面立刻失去响应。
异步(Promise、setTimeout)并不能缓解这类问题,因为它们只是把回调排队,执行时仍回到主线程。就像让快递员分批送同一车货,车没换,堵点仍在原地。
核心原理是“隔离 + 消息通信”
Worker 不是主线程的子过程,而是一个独立的执行环境:
- 拥有自己的全局作用域(
self,不是window),无法访问document、DOM、alert等任何 UI 相关 API - 运行在浏览器分配的独立线程中(非操作系统级线程,但具备实际并发能力)
- 与主线程之间不共享内存,靠
postMessage发送数据、onmessage接收消息 - 传输数据默认使用结构化克隆(深拷贝),大数据可借助
transferable对象(如ArrayBuffer)实现零拷贝迁移
本质是一次职责分离
把“算什么”交给 Worker,“怎么展现在界面上”留给主线程。比如上传大文件时,分片、哈希、校验全在 Worker 里跑;主线程只负责监听进度、更新 UI、发起请求。两边互不等待,真正实现并行。


















