Senior LevelJavaScript & TypeScript
How do Web Workers and SharedArrayBuffer enable multi-threaded parallel execution in JavaScript?
❓ Interview Prompt: Explain Web Worker message passing (postMessage), Structured Clone vs Transferable Objects, and SharedArrayBuffer.
Web Workers bring real multi-threaded execution to JavaScript by running scripts in background background threads isolated from the main UI thread.
Data Transfer Methods:
1
Structured Clone: Default copy mechanism. Clones data via
postMessage().2
Transferable Objects (
ArrayBuffer, ImageBitmap): Zero-copy ownership transfer! Memory reference is moved to worker instantly in O(1) time.3
`SharedArrayBuffer`: Shared memory buffer accessible simultaneously by main thread and workers. Requires
Atomics for synchronization locks.Code Implementation Example
javascript
// Main Thread: Transferring ArrayBuffer ownership to worker
const worker = new Worker('heavyProcessor.js');
const buffer = new ArrayBuffer(1024 * 1024 * 64); // 64MB buffer
// Pass buffer as 2nd argument (Transferable list)
worker.postMessage({ data: buffer }, [buffer]);
console.log(buffer.byteLength); // 0 (Memory transferred! Zero-copy!)
// Worker script (heavyProcessor.js)
self.onmessage = (event) => {
const receivedBuffer = event.data.data;
// Process heavy calculations off UI thread...
};💡Zero-copy memory transfer of a 64MB ArrayBuffer to a Web Worker thread.
🎯 Interview Key Takeaway
Use Web Workers off main thread for heavy CPU tasks. Use Transferable ArrayBuffers for zero-copy memory transfers.
#Web Workers#Multi-threading#Performance#Senior
Back to all JavaScript & TypeScript Questions→