核心是为Worker实例绑定message事件处理器:可直接赋值worker.onmessage=function(e){},或更推荐地用addEventListener('message',handler)支持多监听与解绑;须确保Worker内调用self.postMessage()回传结构化数据,并配合onerror/onmessageerror处理异常。

给 Worker 实例设置 onmessage 属性
这是最直观的方式,适合单次监听场景:
- 创建 Worker 后立即赋值:
worker.onmessage = function(e) { ... } -
e.data就是 Worker 调用self.postMessage()发来的数据 - 注意:重复赋值会覆盖前一个处理函数,只能保留最后一个
用 addEventListener 绑定 message 事件
更推荐的做法,支持多次添加、便于解绑和模块化管理:
- 写法:
worker.addEventListener('message', handler) - 可以绑定多个 handler,互不干扰
- 后续可用
removeEventListener精准移除某一个 - 适用于需要动态响应不同任务类型(如 'result'、'progress')的场景
确保 Worker 脚本正确回传数据
监听能收到结果,前提是 Worker 内部确实调用了 self.postMessage():
- Worker 脚本中必须有
self.onmessage接收主线程指令 - 完成计算后,调用
self.postMessage({ type: 'result', value: 123 })等结构化数据 - 避免传函数、DOM 节点等不可克隆值,否则会静默失败或触发
messageerror
别忘了错误兜底
仅监听 message 不够健壮,建议同步处理异常:
- 主线程可监听
worker.onerror捕获 Worker 初始化或运行时错误 - Worker 内部应监听
self.onmessageerror,排查消息内容是否非法(如含函数) - 收到空
e.data或控制台报Uncaught DataCloneError时,优先检查传输数据类型


















