CAD老兵 Web Worker 是浏览器提供的一种运行多线程 JavaScript 的机制，能够显著提升前端应用的性能，避免阻塞主线程。但当你需要在主线程与 Worker 之间传输 大批量数据（如超过 10MB） 时，如果处理不当，会导致性能瓶颈、内存膨胀甚至浏览器卡顿。
这篇文章将带你深入了解 Web Worker 中 传输大数据的最佳实践与原理分析。
原理：postMessage 默认是“复制”不是“共享”
Web Worker 与主线程之间通信依赖于 postMessage API。默认行为如下：
- 会通过 结构化克隆算法（structured clone algorithm） 将数据从一侧“复制”到另一侧。
- 对于大对象，这种克隆代价昂贵（CPU 和内存都会飙升）。
worker.postMessage(largeObject); // ❌ 克隆大对象 → 慢 & 占内存
最佳方案：使用 Transferable Objects（可转移对象）
什么是 Transferable Objects？
某些对象（如 ArrayBuffer、MessagePort、ImageBitmap）可以在 postMessage 时通过“转移”（transfer）而非复制来传输。这样可以 零拷贝，避免 GC 和内存压力。
示例：传输 ArrayBuffer
主线程
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 内部
self.onmessage = (event) => {
const buffer = event.data;
// buffer 是直接拥有的，不是拷贝的
// 可以进一步处理，然后再传回主线程
self.postMessage(buffer, [buffer]); // 再次转移回主线程
};
Transferable 和默认结构化克隆的对比
| 方式 | 是否复制数据 | 性能 | 适合传输 |
|---|---|---|---|
| 默认结构化克隆 | ✅ 拷贝 | 🐌 慢 | 小数据、结构化对象 |
| Transferable Objects | ❌ 不拷贝 | ⚡ 快 | 大数据、二进制数据 |
| SharedArrayBuffer | ❌ 共享访问 | ⚡⚡ 非常快 | 高性能并发访问场景 |
⚠常见错误和陷阱
忘记 transfer list
worker.postMessage(buffer); // 没有 transfer list，会发生复制
尝试传输不可转移的对象（如普通对象或函数）
worker.postMessage({ name: 'huge', buffer }); // 如果结构中包含无法序列化的数据，会报错
传输之后继续使用已转移对象
worker.postMessage(buffer, [buffer]);
doSomething(buffer); // 报错：buffer.byteLength === 0，已经被转移
进阶技巧
1. 切片传输（Chunking）
如果数据是复杂结构（如 JSON 数组），无法使用 Transferable，可以考虑分块传输：
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。
const sharedBuffer = new SharedArrayBuffer(10 * 1024 * 1024);
const view = new Uint8Array(sharedBuffer);
worker.postMessage(sharedBuffer); // 不需要 transfer list（是共享）
3. 使用 ImageBitmap 处理图像数据（如 Canvas）
createImageBitmap(image).then((bitmap) => {
worker.postMessage(bitmap, [bitmap]); // 可转移
});
推荐实践总结
| 场景 | 推荐方式 | 说明 |
|---|---|---|
| 大批量二进制数据（如图像、点云、音频） | ✅ Transferable Object（ArrayBuffer） | 高性能首选 |
| 需要共享内存、多线程写入 | ✅ SharedArrayBuffer | 高并发处理，需手动同步 |
| 数据结构复杂但较小 | 默认结构化克隆 | 无需转移 |
| 复杂结构且体积大 | 分片切割 + 结构化克隆 | 兼容性强 |
工具推荐：封装一个通用数据传输器
你可以封装一个 Web Worker 传输助手：
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 在处理大数据时既快又稳。
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)