Web Worker 是浏览器提供的一种运行多线程 JavaScript 的机制，能够显著提升前端应用的性能，避免阻塞主线程。但当你需要在主线程与 Worker 之间传输 大批量数据（如超过 10MB） 时，如果处理不当，会导致性能瓶颈、内存膨胀甚至浏览器卡顿。

这篇文章将带你深入了解 Web Worker 中 传输大数据的最佳实践与原理分析。

---

原理：postMessage 默认是“复制”不是“共享”

Web Worker 与主线程之间通信依赖于 postMessage API。默认行为如下：

• 会通过 结构化克隆算法（structured clone algorithm） 将数据从一侧“复制”到另一侧。
• 对于大对象，这种克隆代价昂贵（CPU 和内存都会飙升）。

ts

体验AI代码助手

代码解读

复制代码

worker.postMessage(largeObject); // ❌ 克隆大对象 → 慢 & 占内存

---

最佳方案：使用 Transferable Objects（可转移对象）

什么是 Transferable Objects？

某些对象（如 ArrayBuffer、MessagePort、ImageBitmap）可以在 postMessage 时通过“转移”（transfer）而非复制来传输。这样可以 零拷贝，避免 GC 和内存压力。

示例：传输 ArrayBuffer

主线程

ts

体验AI代码助手

代码解读

复制代码

const worker = new Worker('worker.js'); // 创建一个 10MB 的 buffer const buffer = new ArrayBuffer(10 * 1024 * 1024); worker.postMessage(buffer, [buffer]); // ✅ 使用 transfer list console.log(buffer.byteLength); // 0，buffer 已转移，不再可用

Worker 内部

ts

体验AI代码助手

代码解读

复制代码

self.onmessage = (event) => { const buffer = event.data; // buffer 是直接拥有的，不是拷贝的 // 可以进一步处理，然后再传回主线程 self.postMessage(buffer, [buffer]); // 再次转移回主线程 };

---

Transferable 和默认结构化克隆的对比

方式	是否复制数据	性能	适合传输
默认结构化克隆	✅ 拷贝	🐌 慢	小数据、结构化对象
Transferable Objects	❌ 不拷贝	⚡ 快	大数据、二进制数据
SharedArrayBuffer	❌ 共享访问	⚡⚡ 非常快	高性能并发访问场景

---

⚠常见错误和陷阱

忘记 transfer list

ts

体验AI代码助手

代码解读

复制代码

worker.postMessage(buffer); // 没有 transfer list，会发生复制

尝试传输不可转移的对象（如普通对象或函数）

ts

体验AI代码助手

代码解读

复制代码

worker.postMessage({ name: 'huge', buffer }); // 如果结构中包含无法序列化的数据，会报错

传输之后继续使用已转移对象

ts

体验AI代码助手

代码解读

复制代码

worker.postMessage(buffer, [buffer]); doSomething(buffer); // 报错：buffer.byteLength === 0，已经被转移

---

进阶技巧

1. 切片传输（Chunking）

如果数据是复杂结构（如 JSON 数组），无法使用 Transferable，可以考虑分块传输：

ts

体验AI代码助手

代码解读

复制代码

const chunkSize = 1024 * 1024; // 1MB for (let i = 0; i < totalSize; i += chunkSize) { const chunk = data.slice(i, i + chunkSize); worker.postMessage({ type: 'chunk', payload: chunk }); }

2. 使用 SharedArrayBuffer 实现共享内存

适用于：

• 高频次数据交换
• 多线程数据访问（需手动同步）

⚠️ 注意：浏览器开启 COOP/COEP 才支持 SharedArrayBuffer。

ts

体验AI代码助手

代码解读

复制代码

const sharedBuffer = new SharedArrayBuffer(10 * 1024 * 1024); const view = new Uint8Array(sharedBuffer); worker.postMessage(sharedBuffer); // 不需要 transfer list（是共享）

3. 使用 ImageBitmap 处理图像数据（如 Canvas）

ts

体验AI代码助手

代码解读

复制代码

createImageBitmap(image).then((bitmap) => { worker.postMessage(bitmap, [bitmap]); // 可转移 });

---

推荐实践总结

场景	推荐方式	说明
大批量二进制数据（如图像、点云、音频）	✅ Transferable Object（ArrayBuffer）	高性能首选
需要共享内存、多线程写入	✅ SharedArrayBuffer	高并发处理，需手动同步
数据结构复杂但较小	默认结构化克隆	无需转移
复杂结构且体积大	分片切割 + 结构化克隆	兼容性强

---

工具推荐：封装一个通用数据传输器

你可以封装一个 Web Worker 传输助手：

ts

体验AI代码助手

代码解读

复制代码

function sendDataToWorker(worker: Worker, buffer: ArrayBuffer | SharedArrayBuffer) { if (buffer instanceof ArrayBuffer) { worker.postMessage(buffer, [buffer]); } else { worker.postMessage(buffer); // SharedArrayBuffer 无需 transfer } }

---

小结

当你在 Web Worker 中处理大数据时，选择合适的传输机制比代码优化更重要：

• ✅ 使用 Transferable 避免深拷贝。
• ✅ 考虑 SharedArrayBuffer 实现零延迟共享。
• ✅ 对 JSON 等非二进制结构使用分片传输策略。
• ❌ 避免传输大型结构化对象或不必要的复制。

合理使用这些技术，可以让你的 Web Worker 在处理大数据时既快又稳。

原文：https://juejin.cn/post/7529464196507254836