javascript web worker 通过 postmessage api 传递 structured clone 对象。调用方在发送消息时直接传入普通对象或数组,接收方在 onmessage 回调中获取该对象,此时数据已被深拷贝且与源数据隔离。

Worker 端如何接收并处理结构化克隆数据
Worker 端通过监听 self.onmessage 事件来接收主线程发送的数据。当主线程调用 worker.postMessage(data) 时,如果 data 是支持克隆的类型(如对象、数组、TypedArray等),浏览器引擎会自动执行结构化克隆算法,生成一份独立的副本传递给 Worker。Worker 内部无需特殊配置,直接访问 event.data 即可使用这份深拷贝数据。

// worker.js
self.onmessage = function(event) {
const data = event.data;
// data 是主线程传来数据的深拷贝
console.log(data.value);
};
// main.js
const worker = new Worker('worker.js');
const payload = { value: 100, nested: { a: 1 } };
worker.postMessage(payload);
// payload 和 worker 中的 data 互不影响
主线程如何向 Worker 发送结构化克隆数据
主线程实例化 Worker 后,使用 worker.postMessage() 方法发送数据。该方法接受任意可被结构化克隆算法处理的值。对于大型数据结构,这种方式避免了共享内存的复杂性,确保了数据安全性。需要注意的是,函数、DOM 节点、循环引用等不支持克隆的对象会导致抛出异常。
立即学习“Java免费学习笔记(深入)”;

// main.js
const worker = new Worker('worker.js');
// 发送简单对象
worker.postMessage({ type: 'init', config: { mode: 'fast' } });
// 发送数组
worker.postMessage([1, 2, 3, 4]);
// 发送 TypedArray
const buffer = new Uint8Array(1024);
worker.postMessage(buffer);
哪些数据类型会被正确克隆而哪些会失败
结构化克隆算法支持大部分内置对象类型,包括 Object, Array, Date, Map, Set, TypedArray, ArrayBuffer 以及基本类型。然而,它明确排除了 Function, Error 对象, DOM 元素, 以及包含循环引用的结构。如果尝试发送这些不支持的类型,postMessage 将抛出 DataCloneError。开发者在传递复杂状态时,应确保数据结构扁平化且不含不可序列化的引用。


















