快递员与数据快递：揭秘JavaScript可转移对象的高效秘密-CSDN博客

本文链接：https://blog.csdn.net/y158392613/article/details/147778626

快递员的效率革命

假设你是一个快递站的管理员，每天需要将成千上万的包裹从仓库运送到分拣中心。如果每次运输都要将包裹复制一份再送出，不仅浪费人力，仓库的存储空间也会迅速告急。这时，一位聪明的快递员提出：“为什么不直接把包裹从仓库转移到分拣中心？这样既省时间，又省空间。”

这个“转移”而非“复制”的思路，正是JavaScript中可转移对象（Transferable Object） 的核心逻辑。它们像高效的快递员，让数据在不同线程间“零拷贝”传递，大幅提升性能。

什么是可转移对象？

可转移对象是JavaScript中一类特殊的对象，允许在不同执行上下文（如Web Worker与主线程） 之间直接转移所有权，而非复制数据。这意味着：

内存零拷贝：数据本身不会被复制，而是转移所有权，节省内存和时间。
高性能场景必备：适用于处理图像、音视频等大型二进制数据。

常见的可转移对象包括：ArrayBuffer、ImageBitmap、OffscreenCanvas等。

可转移对象的作用

1. 传统数据传递的痛点

普通数据传递（如postMessage）时，数据会被序列化并复制，若传递一个100MB的ArrayBuffer，内存占用将翻倍，且耗时增加。

2. 可转移对象的解决方案

通过指定transferList参数，直接将数据的所有权转移：

// 主线程向Web Worker发送大型数据
// 100MB数据
const buffer = new ArrayBuffer(1024 * 1024 * 100); 
// 第二个参数声明转移对象
worker.postMessage(buffer, [buffer]); 
// 此时主线程的buffer立即变为不可用状态
console.log(buffer.byteLength); // 输出0

此时，主线程的buffer将变为不可用，但Worker线程无需复制即可使用该内存块，效率提升高达90%

使用场景

图像处理：将ImageBitmap从主线程转移到Worker进行滤镜计算。
实时音视频传输：通过WebRTC传递ArrayBuffer，减少延迟。
科学计算：处理大型数据集时，避免内存重复占用。

快速上手可转移对象

// 主线程
const worker = new Worker('worker.js');
const buffer = new ArrayBuffer(1024); // 创建1KB缓冲区
worker.postMessage(buffer, [buffer]); // 转移所有权
console.log(buffer.byteLength); // 0（原数据已失效）

// Worker线程（worker.js）
self.onmessage = (e) => {
  const buffer = e.data;
  console.log(buffer.byteLength); // 1024（直接使用）
};