Web Worker 不能操作 DOM 且不共享 window、document 等全局对象,运行于独立线程,专用于耗时计算;通过 postMessage/onmessage 双向通信,仅支持结构化克隆数据,可用 transferable 提升大数据传输性能。

Web Worker 不能直接操作 DOM,也不共享主线程的全局对象(比如 window、document),它运行在独立线程里,专为执行耗时计算任务而设计。
Web Worker 的创建和通信机制
主线程用 new Worker() 实例化一个 Worker,脚本路径必须是同源 URL(本地文件协议 file:// 下多数浏览器会拒绝加载);Worker 内部通过 self.postMessage() 发送消息,主线程用 worker.onmessage 接收;反过来也一样——双向通信只能靠 postMessage() 和 onmessage,没有共享内存。
-
Worker构造函数只接受一个 JS 文件路径,不支持内联函数或字符串代码 - 传参只能序列化(即走 structured clone 算法),
function、undefined、Symbol、Promise、RegExp等无法传递 - 若需大量数据传输(如 ArrayBuffer),可用
transferable选项避免拷贝,提升性能
常见错误:Worker 报错 “Uncaught ReferenceError: window is not defined”
这是最典型的误用——在 Worker 脚本中写了 console.log(document.body) 或调用了依赖 window 的第三方库。Worker 全局对象是 self,可用 self.fetch、self.setTimeout,但没有 document、localStorage、XMLHttpRequest(部分浏览器已支持 fetch)。
- 检查所有全局变量引用,把
window.xxx改成self.xxx(如果存在) - 避免在 Worker 中 import 含浏览器 API 调用的模块(例如某些未做环境判断的工具库)
- 调试时用
self.console.log(),而非假设console自动可用(虽然多数浏览器做了映射,但不可依赖)
怎样安全地复用 Worker 或处理多个任务
每个 new Worker() 实例对应一个独立线程,频繁创建销毁开销大;更合理的方式是复用单个 Worker,用消息中的 type 字段区分任务类型(如 "sort"、"filter"),再在 Worker 内部用 switch 分发处理逻辑。
立即学习“Java免费学习笔记(深入)”;
- 主线程发送结构化消息:
worker.postMessage({ type: "sort", data: [3,1,4] }) - Worker 中监听:
self.onmessage = ({ data }) => { switch(data.type) { ... } } - 长期运行的 Worker 需主动关闭:主线程调用
worker.terminate(),或 Worker 自己调用self.close() - 注意:Worker 内无法使用
async/await顶层语法,需包裹在函数中
真正容易被忽略的是错误捕获——Worker 内抛出的异常不会冒泡到主线程,也不会触发 window.onerror;必须显式监听 self.onerror 或用 try/catch 包裹主逻辑,否则静默失败。











