Structured clone and transferables

You move a 40 MB image-processing job to a worker — and the main thread still freezes for 40 ms before the worker even starts. The work moved, but the data did not.

The structured clone algorithm

postMessage(data) does not share data — it deep-copies it using the structured clone algorithm. Structured clone handles objects, arrays, Maps, Sets, Dates, typed arrays, Blobs, and ArrayBuffers. It does not handle:

• Functions (dropped silently)
• DOM nodes (throws)
• Class prototypes — methods are lost, only data properties survive

The copy is synchronous on the sending thread and scales with payload size: roughly 1 ms per MB for plain objects, more for deeply nested structures. Send a 50 MB object and you have blocked the sending thread for ~50 ms — you moved the work, but paid a clone tax to do it.

Transferables: O(1) ownership handoff

The escape from clone cost is the transferable mechanism. Pass a second argument to postMessage — a list of transferable objects:

postMessage({ pixels, width, height }, [pixels.buffer]);

Instead of copying the bytes, the browser hands the underlying memory to the receiving thread and detaches it from the sender. After the transfer:

• pixels.buffer.byteLength is 0 on the sender
• The receiver has a new view with the full data

The cost drops from O(size) to O(1). Transfer is the right move for large binary payloads: image bitmaps, audio buffers, file contents.

Transferable types: ArrayBuffer, MessagePort, ImageBitmap, OffscreenCanvas, ReadableStream, WritableStream, TransformStream.

What gets dropped in structured clone

When you postMessage an object that had methods:

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
  distanceTo(other) { ... }
}
const p = new Point(1, 2);
worker.postMessage(p);
// Worker receives: { x: 1, y: 2 } — no distanceTo method

Structured clone copies data properties but has no representation for functions or prototype chains. This is by design: functions reference closures that may hold DOM nodes or other main-thread-only state. The rule: serialize data, not behaviour. Reconstruct the class on the receiving side if needed.