Transferable Objects: Zero-Copy Data for Web Workers

Why it exists

Sharing large amounts of data between the main thread and a Web Worker is a common performance bottleneck. Copying a multi-megabyte data structure can block the main thread, freezing the UI. Transferable Objects were created to move data between contexts almost instantly, without the cost of copying.

The mental model

Think of a Transferable Object like handing over the physical deed to a house. Instead of building an identical copy of the house for someone else (a slow, expensive copy operation), you simply transfer the ownership document. Once transferred, you no longer own the house and cannot enter it. The resource is moved, not duplicated.

How it works

When you call postMessage() or structuredClone(), you can provide an optional second argument: an array of objects to transfer. For example: worker.postMessage(myObject, [myObject.buffer]). This tells the JavaScript engine to move the ownership of myObject.buffer to the new context instead of copying it. For an ArrayBuffer, this is a fast, zero-copy operation where memory pointers are simply updated. After the transfer, the original object is detached from its resource and becomes unusable; its byteLength will be 0, and any attempt to read or write to it will throw an error.

When to use it

Use Transferable Objects when sending large data to a Web Worker for processing, especially ArrayBuffer, ImageBitmap, or OffscreenCanvas. This is the standard way to perform heavy computations off the main thread without blocking rendering. It's also an efficient option within structuredClone() to avoid deep-copying large binary data.

When not to use it

Do not transfer an object if the original context still needs to access it. If both the main thread and a worker need concurrent access to the same data, you must either accept the cost of copying or use a SharedArrayBuffer for true shared memory.

One canonical example

To send a large file to a worker, you might create a typed array. You transfer its underlying buffer, not the array view itself. The Uint8Array is serializable (can be copied), but its ArrayBuffer is transferable (can be moved).

const uInt8Array = new Uint8Array(1024 1024 8); // 8MB array console.log(uInt8Array.byteLength); // 8388608

// Transfer the underlying buffer to a worker

worker.postMessage(uInt8Array, [uInt8Array.buffer]);

// The original is now neutered console.log(uInt8Array.byteLength); // 0