主线程与web worker仅通过异步消息传递通信:主线程用worker.postmessage发送支持结构化克隆的数据(含transferlist转移arraybuffer),worker用self.onmessage接收;worker用self.postmessage回传结果,主线程用worker.onmessage监听并建议用map缓存taskid实现promise封装。

主线程和 Web Worker 之间通信只有一种方式:异步消息传递,靠 postMessage 发、onmessage 收,不共享内存,也不支持直接调用函数或访问对方变量。
主线程怎么发消息给 Worker
创建 Worker 实例后,调用它的 postMessage 方法即可发送数据:
- 支持的数据类型包括:字符串、数字、布尔值、普通对象、数组、Date、RegExp、Map、Set(多数现代浏览器)、ArrayBuffer(可转移)等
- 不支持:函数、DOM 节点、
undefined、Symbol、window等全局对象 - 建议带上唯一任务 ID 和时间戳,便于后续追踪和响应匹配:
worker.postMessage({ taskId: 'calc-123', payload: data, timestamp: Date.now() }); - 若传输大量二进制数据(如图像、音频缓冲区),可用
transferList参数转移 ArrayBuffer 所有权,避免拷贝开销:worker.postMessage(buffer, [buffer]);(传完后主线程不能再读写该 buffer)
Worker 怎么接收主线程的消息
在 worker.js 文件中,使用 self.onmessage 监听(self 是 Worker 的全局对象,相当于主线程的 window):
Java项目代码review工具。分析Git变更+完整调用链路上下文,推断业务需求,进行多维度评分和分类汇总,生成完整PRD文档。包含细粒度Java代码审查清单(Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 消息体在
e.data中,结构与发送时一致 - 推荐解构提取关键字段,比如:
self.onmessage = function(e) { const { taskId, payload } = e.data; /* 处理逻辑 */ }; - 注意不能直接操作 DOM 或调用
console.log(部分浏览器支持,但非标准),应改用self.console.log或仅用于调试
Worker 怎么把结果发回主线程
处理完成后,Worker 用 self.postMessage 把结果发回去:
- 同样支持结构化克隆的数据类型,也支持 transferable 对象
- 为方便主线程识别响应,建议返回包含原
taskId的对象:self.postMessage({ taskId, result, timestamp: Date.now() }); - 若需终止自身,可调用
self.close()(不强制,但推荐在任务结束且不再需要时调用)
主线程怎么接收 Worker 的响应
主线程通过 Worker 实例的 onmessage 属性监听返回消息:
- 推荐用闭包或 Map 缓存待响应的任务 ID 与
resolve/reject函数,实现 Promise 封装:worker.onmessage = function(e) { const { taskId, result } = e.data; resolveMap.get(taskId)?.(result); resolveMap.delete(taskId); }; - 避免直接写匿名函数反复覆盖
onmessage,建议只设一次,用内部逻辑分发 - 若 Worker 不再使用,及时调用
worker.terminate()释放资源
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










