Web Worker传递大数组时选择Transferable降低复制

把几十 MB 甚至更大的数值数组交给 Web Worker 处理时，真正需要先决定的是“复制还是转移”。普通的 postMessage(data) 会按结构化克隆生成接收端副本；如果消息里装的是 ArrayBuffer，可以把它同时放进第二个参数的 transfer 列表，让底层内存所有权转给 Worker。转移后主线程的缓冲区会被 detached，不能再把它当作原数组继续使用。

先判断大数组到底该复制还是转移

Web Worker 与页面不共享普通 JavaScript 对象实例。默认发送路径会序列化消息并在另一侧重建对象，适合小消息、需要保留发送端副本的任务，也更容易理解。大数组的成本则不只在 postMessage 调用本身：结构化克隆可能带来额外内存峰值，主线程还要承担一次复制工作。

Transferable 的核心不是“让两个线程同时看到同一份数组”，而是把资源从一个上下文交给另一个上下文。ArrayBuffer 是典型对象；转移成功后，Worker 拥有这块内存，页面只留下一个失效的缓冲区外壳。需要保留原数组时，先复制出确实需要的部分，不能在转移后继续依赖原视图。

把TypedArray放进消息并转移底层ArrayBuffer

下面的写法把视图作为消息字段，把同一个视图的底层缓冲区放入 transfer 列表。消息和列表必须对应；只写列表、不让消息引用该缓冲区，接收端拿不到它，而且原资源仍会被分离。

// main.js：把大数组的底层缓冲区交给 Worker，发送后不再访问 input
const worker = new Worker("worker.js", { type: "module" });
const input = new Float32Array(8 * 1024 * 1024);

// 传递视图本身，转移它实际持有的 ArrayBuffer
worker.postMessage({ kind: "sum", values: input }, [input.buffer]);

// 转移完成后 input.buffer 已 detached；这里不要再读写 input
console.log(input.byteLength); // 0

这里的第二个参数不是“额外发送一份数据”，而是所有权清单。接收端拿到的消息字段会成为新的视图对象，底层存储已经转移过去。实际项目中可以在发送前把 input 标记为“已交接”，避免后续渲染、缓存或重试逻辑误用它。

Worker侧重建视图，结果回传也要明确所有权

Worker 侧可以从收到的 Float32Array 直接读取，也可以根据消息中的缓冲区重新构造视图。若计算结果仍然很大，建议把结果缓冲区再次转回主线程；如果只需要少量统计值，就只回传数字，避免把大结果再次交接。

// worker.js：消费已转移的输入，并只转回必要的结果缓冲区
self.onmessage = ({ data }) => {
  if (data.kind !== "sum") return;

  const values = data.values;
  let total = 0;
  for (const value of values) total += value;

  // 大结果才值得再次转移；小结果直接结构化克隆更简单
  self.postMessage({ kind: "done", total });
};

如果结果是需要主线程继续消费的二进制数据，可改成 self.postMessage({ buffer: result.buffer }, [result.buffer])。每一次转移都会改变发送方的可用状态，因此不要在同一个任务里把同一缓冲区安排到两个独立的消息中。

四个检查点能避免Transferable误用

兼容处理也要放在接口边界：先确认目标浏览器支持 Worker 与所需的可转移资源，再决定是否回退到分块复制或只传递摘要。不要为了追求“零拷贝”把所有数据都塞进 transfer 列表；小对象、需要重试的数据和需要双端保留的输入，复制反而更稳。

相关问题

Transferable会让主线程和Worker共享同一个数组吗？

不会。它转移的是资源所有权，发送端失去访问权；需要双端同时访问时，应重新评估共享内存方案。

为什么传了transfer列表，Worker还是拿不到数据？

通常是消息对象没有引用列表中的同一个缓冲区。transfer列表只描述交接资源，不能代替消息字段传递。

转移后还能继续使用原来的TypedArray吗？

不能把它当作有效数组继续使用。底层缓冲区已经 detached，应在交接前完成必要读取，并把后续逻辑切换到Worker返回的新结果。