postMessage实现主线程与Worker结构化克隆通信

Web Worker的核心在于其线程间通信机制。主线程与Worker之间通过postMessage方法进行异步通信。这一过程依赖于“结构化克隆算法”，浏览器会自动将待传递的数据创建一份完整的副本进行传输。这种机制确保了内存隔离与数据安全，同时保持了异步特性。

结构化克隆支持的数据类型

调用postMessage时，浏览器会自动完成数据的序列化与反序列化。结构化克隆算法支持的数据类型非常广泛：

• 基本类型：字符串、数字、布尔值、null。
• 复合对象：普通对象、数组，以及Date、RegExp、Map、Set等内置对象。
• 二进制数据：ArrayBuffer、TypedArray、DataView，以及Blob、File、ImageData等。

需要注意的是，以下类型无法通过结构化克隆传递：函数、DOM节点、undefined、Symbol、包含循环引用的对象以及Error对象实例。尝试传递这些类型可能导致错误或数据被静默忽略。

数据传递的是副本而非引用

理解Web Worker通信的一个关键点是：传递的是数据副本，而非引用。每次调用postMessage(data)，浏览器都会生成一份数据的完整拷贝。

• 主线程在发送数据后修改原始对象，不会影响Worker已接收的数据。
• Worker内部对接收到的数据进行修改，也不会反映到主线程的原始数据上。
• 双方的操作环境完全隔离，不存在自动的状态同步或响应式更新。

例如，主线程发送对象{ count: 1 }，Worker将其修改为{ count: 2 }后，主线程中的原始对象仍保持为{ count: 1 }。

主线程与Worker的标准通信写法

通信是双向的，需要在主线程和Worker中分别编写相应的代码。

• 主线程端：创建Worker实例后，通过worker.onmessage或worker.addEventListener('message', ...)监听Worker返回的消息。
• Worker内部：通过self.onmessage或self.addEventListener('message', ...)接收主线程指令，处理完成后使用self.postMessage()返回结果。
• 在Worker内部，建议始终使用addEventListener添加消息监听器，以避免直接为onmessage属性赋值时可能发生的监听函数覆盖问题。

消息体的设计也值得注意。通常建议包含一个type字段作为任务类型的标识，便于扩展和维护。例如，{ type: 'calculate', data: [...] }用于触发计算任务，{ type: 'load-image', url: '...' }用于加载图片任务。

大数组传输的零拷贝优化

当需要传输图像数据、音频缓冲区等大型二进制数据时，完整复制ArrayBuffer会带来显著的性能开销。此时，可以使用postMessage的transferList参数实现“零拷贝”的所有权移交。

• 用法示例：主线程调用worker.postMessage(buffer, [buffer])，将buffer放入第二个参数（即可转移对象数组）。
• 发送后效果：该buffer的内存所有权会立即转移给Worker。在主线程中，原buffer将变为“分离”状态，无法再被访问。
• 性能优势：Worker接收到的是同一块内存的引用，传输过程中没有发生数据拷贝，效率极高。
• 重要限制：此优化仅适用于ArrayBuffer、MessagePort等明确支持转移的对象类型。

需要明确的是，这并非“共享内存”（SharedArrayBuffer）。它是一次性的、单向的所有权移交。数据在同一时间点仍然只属于一个线程。若需要进行复杂的双向读写协作，仍需设计明确的消息协议来协调双方的读写时机。