Web Worker 传递二进制数据最高效的方式是使用 Transferable Objects（如 ArrayBuffer），通过 postMessage 的 transfer list 实现零拷贝移交；传 TypedArray 需传递其 .buffer，Blob 应用 arrayBuffer() 转换后再 transfer。

Web Worker 传递二进制数据最高效的方式是使用 Transferable Objects（可转移对象），比如 ArrayBuffer。这种方式能避免数据拷贝，直接把内存控制权移交给 Worker，大幅提升性能。

用 postMessage 传 ArrayBuffer（推荐）

主线程和 Worker 都支持直接传递 ArrayBuffer，但必须显式声明为可转移对象（第二个参数）：

• 主线程中：

const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]); // 注意：第二个参数是 transfer list

• Worker 中接收：

self.onmessage = function(e) {
  const buffer = e.data; // 类型就是 ArrayBuffer
  const view = new Uint8Array(buffer); // 可直接操作
};

关键点：不写 [buffer] 就会走结构化克隆（深拷贝），大文件时明显卡顿；写了就零拷贝移交。

传 TypedArray 时要注意“剥离” buffer

TypedArray（如 Uint8Array）本身不能直接 transfer，必须传它的 .buffer：

立即学习“Java免费学习笔记（深入）”；

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

• 错误写法（会拷贝）：

worker.postMessage(uint8Array); // ❌ 默认深拷贝整个数组

• 正确写法：

worker.postMessage(uint8Array.buffer, [uint8Array.buffer]); // ✅

接收后在 Worker 里重建视图：new Uint8Array(e.data)。

Blob 转 ArrayBuffer 再传（适合文件/图片）

如果原始数据是 Blob（比如用户选的文件），需先转成 ArrayBuffer：

• 主线程中：

file.arrayBuffer().then(buffer => {
  worker.postMessage(buffer, [buffer]);
});

注意：不要用 Blob.prototype.slice() + FileReader，效率低且无法 transfer；arrayBuffer() 返回的 Promise 结果就是可 transfer 的 ArrayBuffer。

不能 transfer 的情况要小心

以下对象不支持 transfer，只能拷贝：

• Object、Array、String 等普通 JS 值
• TypedArray 实例本身（必须传 .buffer）
• 已 transfer 过的 ArrayBuffer（再传会报错：“InvalidStateError”）

传完后主线程里的原 ArrayBuffer 会变成 byteLength === 0，这是正常行为，说明内存已移交。