Web Worker 是受限的后台线程机制,通过 postMessage 通信、无 DOM 访问、不共享内存,适用于纯计算任务;不支持 UI 操作、同步 I/O 或直接线程间通信。

Web Worker 让 JavaScript 能在后台线程中运行脚本,避开主线程阻塞,实现真正的并发执行。但它不是“任意多线程”,而是受限的、隔离的、仅用于计算密集型任务的轻量级线程机制。
Web Worker 的基本工作方式
Worker 通过独立的全局上下文(WorkerGlobalScope)运行,与主页面完全隔离:没有 DOM、window、document 或 localStorage 访问权限。通信只能靠 postMessage() 和 onmessage 事件,以序列化数据(结构化克隆算法)传递,不共享内存。
- 创建 Worker:
const worker = new Worker('worker.js'); - 主线程发消息:
worker.postMessage({type: 'calculate', data: [1,2,3]}); - Worker 接收并处理:
self.onmessage = (e) => { /* 处理后 postMessage 回主线程 */ }; - Worker 内部不能调用
alert、fetch(但可以)、setTimeout(可以),但不能操作 UI
Web Worker 的核心限制
这些限制不是缺陷,而是浏览器为保障安全和稳定性做的强制隔离:
- 无 DOM 访问权:无法读写元素、绑定事件、修改样式——所有 UI 操作必须回到主线程完成
-
无全局对象引用:不能使用
window、document、parent、console(部分浏览器支持console.log,但非标准) -
无法跨域加载脚本:Worker 脚本必须同源;
importScripts()也受同源策略约束 -
不能访问本地存储:
localStorage、sessionStorage、indexedDB(但 Worker 中可打开自己的 indexedDB 数据库) -
无同步 I/O:不支持
XMLHttpRequest同步模式,也不支持fs类 API(浏览器环境本就不提供)
JavaScript 多线程编程的现实边界
JS 本身仍是单线程语言,Worker 是浏览器提供的“进程外”并发能力,不是语言级线程。它不支持锁、共享内存(除非显式启用 SharedArrayBuffer)、原子操作等传统多线程特性:
立即学习“Java免费学习笔记(深入)”;
-
SharedArrayBuffer+Atomics可实现有限共享内存,但需开启跨域政策(crossorigin+COOP/COEP头),且主流框架默认禁用以防 Spectre 攻击 - Worker 之间不能直接通信,必须经由主线程中转(或使用
MessageChannel建立点对点通道) - 频繁传大量数据会触发结构化克隆开销,大数组建议用
Transferable(如ArrayBuffer)零拷贝移交 - Worker 实例有创建成本,不适合高频启停;长期运行的任务更合适,或用 Worker Pool 管理复用
什么场景适合用 Web Worker
不是所有“耗时”都该扔进 Worker——只有纯计算、可拆解、无副作用、结果可序列化的任务才真正受益:
- 图像/音视频处理(滤镜、编码、FFT)
- 大数据集排序、搜索、解析(JSON 解析、CSV 转换)
- 加密/哈希运算(如 PBKDF2、RSA 密钥生成)
- 游戏物理模拟、路径寻路(A*、Dijkstra)
- 离线文档渲染(Markdown → HTML、LaTeX 编译)
不推荐用于:简单定时器、网络请求封装(fetch 本身异步)、状态管理同步、或只比主线程快几毫秒的操作。











