主线程通过Worker实例的postMessage()向Web Worker发送消息，Worker通过self.onmessage接收，双方均用postMessage()异步通信，数据经结构化克隆复制，不共享内存；需处理onerror错误及调用terminate()释放资源。
主线程和 Web Worker 子线程之间通过 postMessage() 发送消息，通过 onmessage 事件接收消息，全程异步、不共享内存、数据靠结构化克隆复制。
主线程怎么发消息给 Worker
创建 Worker 实例后，直接调用其 postMessage() 方法：
- 参数可以是字符串、数字、布尔、数组、普通对象、Date、RegExp 等可克隆类型
- 不支持函数、DOM 节点、undefined、Symbol、Map/Set（部分浏览器有限支持）
- 若传递 ArrayBuffer，可配合
transferList实现零拷贝（提升大数组性能）
示例：
const worker = new Worker('worker.js');<br>
worker.postMessage({ type: 'PROCESS', data: [1, 2, 3] });
Worker 怎么接收主线程的消息
在 Worker 脚本（如 worker.js）中监听 self.onmessage：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
event.data就是主线程传来的数据 - 推荐用
self显式引用当前上下文，避免歧义 - 可按业务类型做条件分发，比如区分计算、加密、解析等任务
示例：
self.onmessage = function(event) {<br>
if (event.data.type === 'PROCESS') {<br>
const result = event.data.data.reduce((a, b) => a + b);<br>
self.postMessage({ type: 'RESULT', value: result });<br>
}<br>
};
Worker 怎么把结果发回主线程
Worker 内部同样用 self.postMessage() 向主线程回传数据：
立即学习“前端免费学习笔记（深入）”；
- 主线程需提前绑定
worker.onmessage监听器才能收到 - 返回内容也受结构化克隆限制，不能含函数或 DOM 引用
- 建议统一响应格式（如带
type字段），便于主线程识别处理
示例：
worker.onmessage = function(event) {<br>
console.log('主线程收到：', event.data.value);<br>
};
错误和终止处理不能少
通信过程可能出现脚本错误或传输异常，建议补充基础防护：
- 主线程监听
worker.onerror捕获 Worker 初始化失败 - Worker 内部监听
self.onerror捕获运行时错误，并可主动self.postMessage({ error: ... })通知主线程 - 不再需要时调用
worker.terminate()彻底释放线程资源
