Pass data to a Web Worker and transfer an ArrayBuffer efficiently

WHAT THIS TESTS: This question evaluates your understanding of the Web Worker communication model, specifically the structured clone algorithm versus transferable objects. Interviewers want to see that you know the default postMessage behavior incurs copying overhead, and that you can optimize large binary data transfers using zero-copy memory moves. It also checks whether you understand thread safety implications, since transferring ownership prevents concurrent access bugs.

A GOOD ANSWER COVERS: First, explain that data is sent to a worker via worker.postMessage(data), which by default uses the structured clone algorithm to duplicate the data in the worker context. Second, state that for large ArrayBuffers you should use the transfer list in the second argument like worker.postMessage(data, [arrayBuffer]). Third, clarify that this transfers ownership of the underlying memory resource from the main thread to the worker in a zero-copy operation. Fourth, emphasize that after transfer the original ArrayBuffer is neutered, its byteLength becomes zero, and any read or write attempt throws an exception. Fifth, note that TypedArrays like Uint8Array are serializable but not themselves transferable, only their underlying buffer is transferable.

COMMON WRONG ANSWERS: Saying you pass the buffer in postMessage without mentioning the transfer list, which means it gets cloned and doubles memory usage. Claiming that TypedArrays are transferable rather than their ArrayBuffer. Suggesting JSON stringify as an alternative for binary data, which is both slow and lossy. Failing to mention that the original buffer becomes unusable after transfer, which can cause runtime exceptions if the main thread tries to reuse it. Proposing SharedArrayBuffer without being asked, without explaining the Spectre-related security constraints and context requirements.

LIKELY FOLLOW-UPS: How would you return the processed buffer back to the main thread? The answer is the same transfer mechanism from the worker via self.postMessage(result, [buffer]). What if both threads need simultaneous read access? Then you would discuss SharedArrayBuffer and Atomics, but note the cross-origin isolation requirements. How do you handle browsers that do not support transferable objects? Modern browsers all do, but polyfills or falling back to structured clone is the historical answer. What other objects are transferable? MessagePort, ImageBitmap, OffscreenCanvas.

ONE CONCRETE EXAMPLE: Suppose you have an 8MB Uint8Array on the main thread. You create a worker and call worker.postMessage(uInt8Array, [uInt8Array.buffer]). Inside the worker you receive the event and can read the Uint8Array from e.data. Meanwhile on the main thread uInt8Array.buffer.byteLength is now zero. Attempting to access uInt8Array[0] throws. This proves the memory was moved, not copied, avoiding an 8MB duplication and the associated garbage collection cost.

Source: developer.mozilla.org