跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

什么是Web Worker在javascript中_怎样在后台线程执行任务【教程】

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: win dow 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
分发处理逻辑。 Comet AI 浏览器 下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 立即学习 “ 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
包裹主逻辑,否则静默失败。

相关文章