javascript web worker 通过结构化克隆算法（structured clone algorithm）实现数据传递，调用 postmessage() 即可将对象序列化并发送给 worker，worker 端收到的是数据的深拷贝而非引用。这意味着在 worker 中修改对象属性不会影响主线程的原始数据，且支持包括嵌套对象、数组、map、set 甚至二进制数据在内的复杂类型。
哪些数据类型可以被正确序列化
结构化克隆算法支持绝大多数标准 JavaScript 内置对象，如 Object、Array、Date、RegExp、Map、Set 以及二进制数据如 ArrayBuffer 和 Blob。然而，它无法序列化函数、DOM 节点、循环引用或自定义类的实例（除非该实例仅包含可序列化的属性且被当作普通对象处理）。例如，直接传递一个包含方法的对象时，方法会被丢弃，只保留数据部分；而传递 ArrayBuffer 时，内存所有权会发生转移（Transfer），导致原变量变为 detached 状态。
const worker = new Worker('worker.js');
// 发送普通对象（深拷贝）
const data = { id: 1, name: 'test', nested: { value: 42 } };
worker.postMessage(data);
// 发送 ArrayBuffer（所有权转移）
const buffer = new ArrayBuffer(8);
worker.postMessage(buffer, [buffer]);
// 发送包含函数的对象（函数丢失）
const objWithFn = {
text: 'hello',
sayHi: () => console.log('hi')
};
worker.postMessage(objWithFn); // Worker 收到 { text: 'hello' }
如何处理不支持序列化的特殊对象
当需要传递函数逻辑或 DOM 引用时，必须采用替代方案。对于函数，通常的做法是在 Worker 内部定义函数，或通过字符串形式传递代码并在 Worker 中使用 eval 执行（不推荐，存在安全风险）。对于 DOM 元素，由于无法序列化，应提取其必要属性（如 ID、文本内容、样式值）组成纯数据对象进行传递。若需高性能传输大量二进制数据，可使用 Transferable Objects 机制，通过 postMessage(message, [transferList]) 第二个参数指定要转移所有权的对象，这样避免了昂贵的深拷贝过程，但原对象将不可用。
// Worker 端接收处理示例
self.onmessage = function(e) {
const msg = e.data;
if (msg.type === 'data') {
// 修改 msg.nested.value 不会影响主线程
msg.nested.value = 100;
self.postMessage({ processed: true });
}
else if (msg.type === 'buffer') {
// 直接使用转移过来的 buffer
const view = new Uint8Array(msg.buffer);
// ... 处理数据
}
};
// 主线程验证所有权转移
let ab = new ArrayBuffer(16);
worker.postMessage(ab, [ab]);
console.log(ab.byteLength); // 输出 0，因为所有权已转移
基于 postMessage 回调机制的具体问题
在使用 postMessage 进行通信时，开发者常遇到的问题是消息队列的顺序保证与并发处理。Web Worker 的消息传递是异步的，且遵循 FIFO（先进先出）原则，但多个 Worker 实例之间或同一 Worker 处理不同消息时的执行顺序取决于浏览器调度。如果主线程连续发送多条消息，Worker 会按顺序依次处理，但在处理过程中若 Worker 繁忙，后续消息会在队列中等待。此外，若 Worker 抛出未捕获异常，主线程不会直接收到错误堆栈，而是需要通过监听 Worker 的 error 事件来获取信息，这要求在主线程建立完善的错误监控机制以确保调试效率。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
