HTML5中Worker线程与主线程之间PostMessage通信逻辑

Worker与主线程通过postMessage通信，本质是结构化克隆+异步事件驱动，不共享内存；数据被克隆副本传输，修改不影响原对象；支持Transferable Objects实现ArrayBuffer零拷贝。Worker线程与主线程通过 postMessage 通信，本质是**结构化克隆 + 异步事件驱动**，不共享内存，也不直接访问对方作用域。通信基础：单向异步、数据拷贝而非引用主线程和 Worker 各自拥有独立的全局执行环境（Window 或 WorkerGlobalScope），无法直接读写对方变量。调用 postMessage(data) 时：浏览器对 data 执行**结构化克隆算法（Structured Clone Algorithm）**：支持对象、数组、Date、RegExp、Blob、File、ArrayBuffer、TypedArray 等，但不支持函数、DOM 节点、undefined、Symbol 或循环引用； 克隆后的数据被序列化并跨线程传输，原对象在发送方保持不变； 接收方在 message 事件中拿到的是全新副本，修改它不会影响发送方； 整个过程异步，无阻塞，也不保证顺序（但在同一线程内多个 postMessage 调用通常按序触发事件）。主线程启动 Worker 并监听消息主线程使用 new Worker('path/to/worker.js') 创建实例后，需显式绑定 message 事件监听器：const worker = new Worker('calc.js');worker.postMessage({ type: 'start', data: [1, 2, 3, 4] });worker.onmessage = function(e) { console.log('收到 Worker 返回：', e.data); // e.data 是克隆副本};// 或用 addEventListenerworker.addEventListener('message', e => { if (e.data.type === 'result') { document.getElementById('output').textContent = e.data.value; }});Worker 内部收发消息的写法Worker 全局作用域中，this 指向 self（即 WorkerGlobalScope），可直接调用 postMessage 向主线程发消息，并监听 message 事件： AI Code Reviewer AI自动审核代码