CPU work in worker: 30 ms
sending input to worker: 80 ms
sending output back: 60 ms
UI still janky

const a = { count: 1 };
const b = a;
b.count = 2;
console.log(a.count); // 2

worker.postMessage({ count: 1 });

same context:
  reference copied

cross context:
  value cloned OR resource ownership transferred

input object graph
  -> traverse graph
  -> preserve supported values
  -> preserve cycles/references within cloned graph
  -> reject unsupported values
  -> produce new graph in receiver context

const original = { nested: { count: 1 } };
const cloned = structuredClone(original);

cloned.nested.count = 2;
console.log(original.nested.count); // 1

const a: any = { name: 'a' };
a.self = a;

const b = structuredClone(a);

console.log(b.self === b); // true

const shared = { value: 1 };
const input = { left: shared, right: shared };

const cloned = structuredClone(input);

console.log(cloned.left === cloned.right); // true
console.log(cloned.left === shared);       // false

worker.postMessage({
  type: 'run',
  payload: {
    callback: () => console.log('done')
  }
});

worker.postMessage({
  type: 'run',
  payload: {
    callbackId: 'on-finished-123'
  }
});

self.postMessage({
  type: 'callback.invoke',
  correlationId: 'on-finished-123',
  payload: { status: 'done' }
});

class Money {
  constructor(
    public readonly amount: number,
    public readonly currency: string
  ) {}

  add(other: Money): Money {
    if (other.currency !== this.currency) {
      throw new Error('Currency mismatch');
    }

    return new Money(this.amount + other.amount, this.currency);
  }
}

worker.postMessage({ price: new Money(100, 'USD') });

type MoneyDto = {
  amountMinor: number;
  currency: string;
};

function moneyFromDto(dto: MoneyDto): Money {
  return new Money(dto.amountMinor, dto.currency);
}

Across postMessage boundaries, send data contracts, not behavior.

const buffer = new ArrayBuffer(1024 * 1024 * 100); // 100 MB

worker.postMessage(
  { type: 'process', buffer },
  [buffer]
);

clone:
  sender keeps original
  receiver gets copy
  cost: copy/serialize memory

transfer:
  sender loses ownership
  receiver gets original resource ownership
  cost: much lower for large transferable resources

worker.postMessage(
  {
    type: 'binary.process',
    payload: {
      buffer
    }
  },
  [buffer]
);

worker.postMessage(
  {
    type: 'binary.process',
    payload: {
      bufferId: 'buf-1'
    }
  },
  [buffer]
);

If you transfer a resource, include it in the message graph.

const bytes = new Uint8Array(1024);

worker.postMessage(
  { type: 'bytes', bytes },
  [bytes.buffer]
);

Small control messages: clone.
Large one-owner binary payloads: transfer.
Shared concurrent buffer: SharedArrayBuffer.
Durable data: store and send references.

type ProcessImageRequest = {
  type: 'image.process.request';
  id: string;
  payload: {
    input: ArrayBuffer;
    width: number;
    height: number;
    operation: 'grayscale' | 'threshold';
  };
};

const input = await file.arrayBuffer();
const id = crypto.randomUUID();

worker.postMessage(
  {
    type: 'image.process.request',
    id,
    payload: {
      input,
      width,
      height,
      operation: 'grayscale'
    }
  } satisfies ProcessImageRequest,
  [input]
);

self.addEventListener('message', event => {
  const message = event.data as ProcessImageRequest;

  if (message.type !== 'image.process.request') return;

  const output = processImage(
    message.payload.input,
    message.payload.width,
    message.payload.height,
    message.payload.operation
  );

  self.postMessage(
    {
      type: 'image.process.response',
      correlationId: message.id,
      payload: {
        output
      }
    },
    [output]
  );
});

function processImage(
  input: ArrayBuffer,
  width: number,
  height: number,
  operation: 'grayscale' | 'threshold'
): ArrayBuffer {
  const source = new Uint8ClampedArray(input);
  const result = new Uint8ClampedArray(source.length);

  for (let i = 0; i < source.length; i += 4) {
    const r = source[i];
    const g = source[i + 1];
    const b = source[i + 2];
    const a = source[i + 3];

    const gray = Math.round((r + g + b) / 3);

    result[i] = gray;
    result[i + 1] = gray;
    result[i + 2] = gray;
    result[i + 3] = a;
  }

  return result.buffer;
}

main owns input
main transfers input to worker
worker owns input
worker creates output
worker transfers output to main
main owns output

broadcastChannel.postMessage({
  type: 'dataset.updated',
  payload: hugeDataset
});

await saveDatasetToIndexedDb(datasetId, hugeDataset);

broadcastChannel.postMessage({
  type: 'dataset.updated',
  payload: {
    datasetId,
    version,
    store: 'indexeddb:datasets'
  }
});

channel.addEventListener('message', async event => {
  if (event.data.type !== 'dataset.updated') return;

  const { datasetId, version } = event.data.payload;
  const dataset = await loadDatasetFromIndexedDb(datasetId, version);

  render(dataset);
});

large durable data -> shared store
message -> invalidation / pointer / version signal

type ChunkMessage = {
  type: 'file.chunk';
  transferId: string;
  index: number;
  total: number;
  buffer: ArrayBuffer;
};

async function sendInChunks(worker: Worker, file: File, chunkSize = 1024 * 1024) {
  const transferId = crypto.randomUUID();
  const total = Math.ceil(file.size / chunkSize);

  for (let index = 0; index < total; index++) {
    const start = index * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const buffer = await file.slice(start, end).arrayBuffer();

    worker.postMessage(
      {
        type: 'file.chunk',
        transferId,
        index,
        total,
        buffer
      } satisfies ChunkMessage,
      [buffer]
    );
  }
}

type Assembly = {
  chunks: Array<ArrayBuffer | undefined>;
  received: number;
  total: number;
};

const assemblies = new Map<string, Assembly>();

function receiveChunk(message: ChunkMessage) {
  let assembly = assemblies.get(message.transferId);

  if (!assembly) {
    assembly = {
      chunks: new Array(message.total),
      received: 0,
      total: message.total
    };
    assemblies.set(message.transferId, assembly);
  }

  if (!assembly.chunks[message.index]) {
    assembly.chunks[message.index] = message.buffer;
    assembly.received++;
  }

  if (assembly.received === assembly.total) {
    assemblies.delete(message.transferId);
    return concatBuffers(assembly.chunks as ArrayBuffer[]);
  }
}

function concatBuffers(buffers: ArrayBuffer[]): ArrayBuffer {
  const totalBytes = buffers.reduce((sum, b) => sum + b.byteLength, 0);
  const output = new Uint8Array(totalBytes);

  let offset = 0;
  for (const buffer of buffers) {
    output.set(new Uint8Array(buffer), offset);
    offset += buffer.byteLength;
  }

  return output.buffer;
}

async function sendChunksWithBackpressure(
  workerRpc: WorkerRpc<any>,
  file: File,
  chunkSize: number,
  maxInFlight: number
) {
  const transferId = crypto.randomUUID();
  const total = Math.ceil(file.size / chunkSize);
  let next = 0;
  let completed = 0;

  return new Promise<void>((resolve, reject) => {
    const pump = () => {
      while (next < total && next - completed < maxInFlight) {
        const index = next++;
        const start = index * chunkSize;
        const end = Math.min(start + chunkSize, file.size);

        file.slice(start, end).arrayBuffer()
          .then(buffer => workerRpc.request('file.chunk', {
            transferId,
            index,
            total,
            buffer
          }, {
            transfer: [buffer]
          }))
          .then(() => {
            completed++;
            if (completed === total) resolve();
            else pump();
          })
          .catch(reject);
      }
    };

    pump();
  });
}

const worker = new Worker(new URL('./bench.worker.ts', import.meta.url), {
  type: 'module'
});

function once<T>(target: EventTarget, eventName: string): Promise<T> {
  return new Promise(resolve => {
    target.addEventListener(eventName, event => resolve(event as T), { once: true });
  });
}

async function roundTripClone(sizeMb: number) {
  const buffer = new ArrayBuffer(sizeMb * 1024 * 1024);
  const startedAt = performance.now();

  worker.postMessage({ type: 'echo', buffer });

  await once<MessageEvent>(worker, 'message');

  return performance.now() - startedAt;
}

async function roundTripTransfer(sizeMb: number) {
  const buffer = new ArrayBuffer(sizeMb * 1024 * 1024);
  const startedAt = performance.now();

  worker.postMessage({ type: 'echo', buffer }, [buffer]);

  await once<MessageEvent>(worker, 'message');

  return performance.now() - startedAt;
}

self.addEventListener('message', event => {
  const { type, buffer } = event.data;

  if (type !== 'echo') return;

  self.postMessage({ type: 'echo.response', buffer }, [buffer]);
});

const payload = {
  rows: Array.from({ length: 100_000 }, (_, i) => ({
    id: i,
    name: `Item ${i}`,
    flags: { active: i % 2 === 0 }
  }))
};

const ids = new Uint32Array(100_000);
const active = new Uint8Array(100_000);

For high-volume worker data, prefer flat typed data over deep object forests.

type ColumnarUsers = {
  ids: Uint32Array;
  ages: Uint8Array;
  status: Uint8Array;
};

worker.postMessage(
  {
    type: 'users.index.build',
    payload: {
      ids,
      ages,
      status
    }
  },
  [ids.buffer, ages.buffer, status.buffer]
);

ArrayBuffer transfer:
  one owner at a time

SharedArrayBuffer:
  multiple contexts can view same memory
  correctness requires synchronization

Do not reach for SharedArrayBuffer until clone/transfer/store-reference is proven insufficient.

file.arrayBuffer() creates large buffer
transfer to worker
worker creates output buffer
transfer output back
UI creates Blob/ImageData/etc

console.log('worker payload', payload); // payload may hold huge buffer

console.log('worker payload', {
  type: payload.type,
  bytes: payload.buffer?.byteLength,
  id: payload.id
});

try {
  worker.postMessage({ fn: () => null });
} catch (error) {
  // DataCloneError-like failure
}

function safePostMessage(
  worker: Worker,
  message: unknown,
  transfer: Transferable[] = []
): { ok: true } | { ok: false; error: unknown } {
  try {
    worker.postMessage(message, transfer);
    return { ok: true };
  } catch (error) {
    return { ok: false, error };
  }
}

worker.addEventListener('messageerror', event => {
  reportWorkerMessageError(event);
});

const MESSAGE_BUDGET = {
  controlMessageBytes: 16 * 1024,
  clonedPayloadWarnBytes: 256 * 1024,
  clonedPayloadHardLimitBytes: 1024 * 1024,
  transferRecommendedBytes: 1024 * 1024
};

function estimateJsonBytes(value: unknown): number | undefined {
  try {
    return new TextEncoder().encode(JSON.stringify(value)).byteLength;
  } catch {
    return undefined;
  }
}

function binaryBytes(value: unknown): number {
  if (value instanceof ArrayBuffer) return value.byteLength;
  if (ArrayBuffer.isView(value)) return value.byteLength;
  return 0;
}

function assertPayloadBudget(message: any) {
  const estimated = estimateJsonBytes(message);

  if (estimated && estimated > MESSAGE_BUDGET.clonedPayloadWarnBytes) {
    console.warn('Large cloned message payload', {
      type: message.type,
      estimated
    });
  }
}

{ type: 'cart.updated', payload: { cartId, items } }

{ type: 'cart.updated', payload: { cartId, lines, pricingVersion } }

type CartUpdatedV1 = {
  schemaVersion: 1;
  cartId: string;
  items: Array<{ sku: string; qty: number }>;
};

type CartUpdatedV2 = {
  schemaVersion: 2;
  cartId: string;
  lines: Array<{ sku: string; quantity: number; priceMinor?: number }>;
  pricingVersion: string;
};

function normalizeCartUpdated(payload: CartUpdatedV1 | CartUpdatedV2) {
  switch (payload.schemaVersion) {
    case 1:
      return {
        cartId: payload.cartId,
        lines: payload.items.map(item => ({
          sku: item.sku,
          quantity: item.qty
        })),
        pricingVersion: 'unknown'
      };

    case 2:
      return payload;

    default:
      throw new Error('Unsupported cart payload version');
  }
}

window.addEventListener('message', event => {
  document.body.innerHTML = event.data.html;
});

window.addEventListener('message', event => {
  if (event.origin !== TRUSTED_ORIGIN) return;

  const parsed = parseSafeMessage(event.data);
  if (!parsed.ok) return;

  renderSafeViewModel(parsed.value);
});

{
  type: 'index.build.request',
  payload: {
    datasetId,
    sourceRef,
    options
  }
}

{
  type: 'index.segment.transfer',
  payload: {
    segmentId,
    buffer
  }
}

[buffer]

{
  type: 'index.version.available',
  payload: {
    indexId,
    version,
    store: 'indexeddb:indexes'
  }
}

1. Main thread stores dataset in IndexedDB.
2. Main thread sends build command to worker with datasetId/version.
3. Worker loads dataset from IndexedDB.
4. Worker builds index.
5. Worker stores index in IndexedDB.
6. Worker posts small completion message.
7. Tabs receive invalidation and load index by reference.

const buffer = await file.arrayBuffer();

worker.postMessage(
  {
    type: 'file.hash.request',
    id: crypto.randomUUID(),
    payload: {
      fileName: file.name,
      size: file.size,
      buffer
    }
  },
  [buffer]
);

self.addEventListener('message', async event => {
  if (event.data.type !== 'file.hash.request') return;

  const { buffer, fileName, size } = event.data.payload;
  const hash = await sha256(buffer);

  self.postMessage({
    type: 'file.hash.response',
    correlationId: event.data.id,
    payload: {
      fileName,
      size,
      hash
    }
  });
});

worker.postMessage({ type: 'parse.response', ast });

self.postMessage({
  type: 'parse.response',
  correlationId: requestId,
  payload: {
    diagnostics,
    outline,
    symbolCount,
    parseVersion
  }
});

worker.postMessage({
  type: 'symbol.lookup.request',
  payload: {
    parseVersion,
    position
  }
});

Keep heavy internal structure in worker.
Expose small query API to UI.

expect(() => {
  worker.postMessage({ fn: () => undefined });
}).toThrow();

const buffer = new ArrayBuffer(8);
worker.postMessage({ buffer }, [buffer]);

expect(buffer.byteLength).toBe(0);

const bytes = new Uint8Array([1, 2, 3]);
worker.postMessage({ bytes }, [bytes.buffer]);

const response = await nextWorkerMessage(worker);
expect([...response.data.bytes]).toEqual([1, 2, 3]);

const message = createHugeMessage();
expect(() => assertPayloadBudget(message)).toWarnLargePayload();

expect(normalizeCartUpdated(v1Payload)).toEqual(expectedNormalized);
expect(normalizeCartUpdated(v2Payload)).toEqual(expectedNormalized);

postMessage moves messages.
Structured clone copies supported object graphs.
Transferables move ownership of resources.
SharedArrayBuffer shares memory with synchronization cost.
IndexedDB/OPFS store durable large data.
Good protocol sends small intent and moves large data consciously.

Can I send this object to worker?

Should this data cross the boundary at all?
If yes, should it be cloned, transferred, shared, chunked, or referenced?
What is the ownership and lifecycle after crossing?