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