Chrome 13 引入了一种名为结构化克隆 (structureClone) 的算法，其允许将 ArrayBuffer 发送到 Web Worker 或从 Web Worker 接收 ArrayBuffer。该特性使得 postMessage() API 不仅可以接收字符串类型的消息，还可以接收 File、Blob、ArrayBuffer 和 JSON 对象等复杂类型的消息。

1. 可转移对象 vs. 结构化克隆技术

结构化克隆算法虽然很好，但其仍需要复制，而将 32MB 的 ArrayBuffer 传递给 Worker 的开销可能高达数百毫秒。因此，新版本的浏览器在消息传递方面引入了名为可转移对象 (Transferable Object) 的重大性能改进。

可转移对象是指可以转移到其他 JavaScript 上下文，例如：另一个 Window 或 Worker 的对象，转移后该对象在原始上下文不可用。转移对象比在其他上下文中重新创建对象轻量的多。

可转移对象由于底层是基于零拷贝技术，从而极大地提高了向 Worker 发送数据的性能。

该技术与 C/C++ 中按引用传递类似，但是与按引用传递不同的是：一旦传输到新的上下文，源上下文中的对象不再可用。例如：当将 ArrayBuffer 从主应用传输到 Worker 时，原始 ArrayBuffer 会被清除，其内容仅存在于 Worker 上下文。

下面是在 postMessage() 中使用可转移对象的示例：

worker.postMessage(arrayBuffer, [transferableList]);
window.postMessage(arrayBuffer, targetOrigin, [transferableList]);

对于 Worker 来说，第一个参数是 ArrayBuffer 消息，第二个参数是需要转移的对象列表。

2. 典型的可转移对象实例

典型的可转移对象包括以下几种，分别给出示例代码：

2.1 ArrayBuffer 对象

const worker = new Worker("worker.js");
// 创建一个 ArrayBuffer（比如表示图像或音频数据）
const buffer = new ArrayBuffer(1024 * 1024);
// 1MB 缓冲区
const view = new Uint8Array(buffer);
// 填充一些测试数据
for (let i = 0; i < view.length; i++) {
  view[i] = i % 256;
}
console.log("主线程发送 ArrayBuffer 前可用:", buffer.byteLength / 1024 + "KB");
// 将 ArrayBuffer 转移给 Worker
worker.postMessage({buffer}, [buffer]);
console.log("ArrayBuffer 已转移，主线程中不可再用");

下面是 worker 中的代码：

onmessage = function (e) {
  const {buffer} = e.data;
  // 检查是否成功接收并查看内容
  const view = new Uint8Array(buffer);
  console.log("Worker 收到 ArrayBuffer 大小:", buffer.byteLength / 1024 + "KB");
  console.log("前几个字节:", view[0], view[1], view[2]);
  // 继续进行加密、压缩、绘图等操作
};

值得一提的是，worker.postMessage 方法的第二个参数是可转移对象数组，用于转移所有权，所有权转移至目标端后发送端将不再可用。

2.2 ImageBitmap 对象

下面代码演示了从主线程加载图片 → 创建 ImageBitmap → 转移给 Worker 渲染或处理图像数据的完整示例：

const worker = new Worker("worker.js");
fetch("example.png")
  .then((response) => response.blob())
  .then((blob) => createImageBitmap(blob))
  .then((bitmap) => {
    // 将 ImageBitmap 转移给 Worker
    worker.postMessage({bitmap}, [bitmap]);
    console.log("ImageBitmap 已转移，主线程中不可再用");
  });

下面是 worker 中代码示例：

onmessage = function (e) {
  const {bitmap} = e.data;
  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
  const ctx = canvas.getContext("2d");
  ctx.drawImage(bitmap, 0, 0);
  console.log("ImageBitmap 成功在 Worker 中使用");
};

与 ArrayBuffer 中的示例一样，worker.postMessage 方法的第二个参数是可转移对象数组，用于转移所有权，所有权转移至目标端后发送端将不再可用。

2.3 MessagePort 对象

下面代码示例通过 MessageChannel 创建两个 MessagePort，将其中一个传给 Worker，实现长期通信通道。

const worker = new Worker("worker-port.js");
const channel = new MessageChannel();
channel.port1.onmessage = function (e) {
  console.log("主线程收到消息:", e.data);
};
// 第二个参数是可转移对象数组，用于转移所有权
// 所有权转移至目标端后发送端将不再可用
worker.postMessage({port: channel.port2}, [channel.port2]);
channel.port1.postMessage("来自主线程的问候");

下面是 worker 端的代码示例：

let port;
onmessage = function (e) {
  // 接收传来的 port
  port = e.data.port;
  // 监听 port 消息
  port.onmessage = function (ev) {
    console.log("Worker 收到消息:", ev.data);
    port.postMessage("Worker 的回应");
  };
};

其实除了上面说的 ArrayBuffer、MessagePort、ImageBitmap 外，还包括很多可用的转移对象，例如：

• ReadableStream
• WritableStream
• TransformStream
• WebTransportReceiveStream
• WebTransportSendStream
• AudioData
• VideoFrame
• OffscreenCanvas
• RTCDataChannel
• MediaSourceHandle
• MIDIAccess
• MediaStreamTrack

例如，下面示例是使用 ReadableStream 作为可转移对象（Transferable Object）并转移到 Web Worker 的完整代码示例，结合了流式数据处理和线程间高效传输的技术要点：

// 创建可读流
const readableStream = new ReadableStream({
  start(controller) {
    // 模拟分块数据
    const chunks = ['Hello', '','World','!'];
    chunks.forEach(chunk => controller.enqueue(new TextEncoder().encode(chunk)));
    controller.close();
  }
});
// 创建 Worker
const worker = new Worker('worker.js');
// 提取可读流的底层控制器（用于转移）
const [streamForTransfer, streamForLocal] = readableStream.tee();
// 将可读流转移到 Worker
worker.postMessage(
  {type: 'stream', data: streamForTransfer},
  [streamForTransfer]
  // 指定可转移对象
);
// 本地保留的流用于调试
const localReader = streamForLocal.getReader();
localReader.read().then(processChunk);
function processChunk({done, value}) {
  if (!done) {
    console.log('Local stream chunk:', new TextDecoder().decode(value));
    localReader.read().then(processChunk);
  }
}

下面是 worker 中的代码：

self.onmessage = async (event) => {
  if (event.data.type === 'stream') {
    const readableStream = event.data.data;
    const reader = readableStream.getReader();
    // 异步读取流数据
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      // 处理二进制数据块，例如：文本解码
      const text = new TextDecoder().decode(value);
      self.postMessage({ type: 'chunk', data: text });
    }
    self.postMessage({ type: 'complete' });
  }
};

3. 可转移对象带来的性能提升明显

下图是使用 postMessage() 将一个 32MB 的 ArrayBuffer 发送给一个 Worker 并返回，同时为了准确性同一份代码运行了 5 次。如果浏览器不支持可转移对象，该示例将回退到结构化克隆。

在 MacBook Pro/10.6.8/2.53 GHz/Intel Core 2 Duo 上，使用结构化克隆时，FF 速度最快。平均需要 302 毫秒才能将 32MB ArrayBuffer 发送到 Worker 并将其发送回主线程（RRT - 往返时间）。而对于可转移对象的数据，相同测试仅需 6.6 毫秒。性能提升显著。

如此明显的性能提升使得大量 WebGL 纹理 / 网格能够在 Worker 和主应用之间无缝传递。

为了判断浏览器是否支持可转移对象，开发者可以向工作进程发送一个小的 ArrayBuffer。如果缓冲区被传输但未被复制，其 .byteLength 将始终为 0：

var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
if (ab.byteLength) {
  alert("Transferables are not supported in your browser!");
} else {
  // Transferables are supported.
}

参考资料

https://developer.chrome.com/blog/transferable-objects-lightning-fast

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Transferable_objects

https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage

https://www.youtube.com/watch?v=UgfhWP-1gek