InterviewHubPRO
Section Overview
Q517

Question 517 of 521

Part 8: Modern JavaScript APIs, WeakRef, Proxy & Performance (464 - 521)

99%
JavaScript Internals (521 Qs)•Part 8: Modern JavaScript APIs, WeakRef, Proxy & Performance (464 - 521)

What are the differences between SharedArrayBuffer and ArrayBuffer?

SharedArrayBuffer and ArrayBuffer are both fixed-length binary data buffers, but SharedArrayBuffer allows sharing memory between multiple workers/threads.

ArrayBuffer (not shared):

javascript
 // Regular ArrayBuffer
 const buffer = new ArrayBuffer(16);
 const view = new Int32Array(buffer);

 view[0] = 42;
 console.log(view[0]); // 42

 // Transferable but not shared
 worker.postMessage(buffer, [buffer]);
 // buffer is now neutered (length = 0)

SharedArrayBuffer (shared memory):

javascript
 // Main thread
 const sharedBuffer = new SharedArrayBuffer(16);
 const sharedView = new Int32Array(sharedBuffer);

 sharedView[0] = 42;

 // Send to worker (shared, not transferred)
 worker.postMessage(sharedBuffer);

 // Both main thread and worker can access the same memory
 sharedView[0] = 100; // Worker will see this change

Key differences:

ArrayBufferSharedArrayBuffer
Single context onlyMultiple contexts (workers/threads)
Transferred (moved) between workersShared between workers
No synchronization neededRequires Atomics for safe access
Always availableRequires secure context (HTTPS)
Original becomes neutered after transferOriginal remains valid

Using Atomics with SharedArrayBuffer:

javascript
 // Main thread
 const sab = new SharedArrayBuffer(4);
 const view = new Int32Array(sab);

 worker.postMessage(sab);

 // Atomic operations
 Atomics.store(view, 0, 42);        // Write atomically
 Atomics.add(view, 0, 10);          // Add 10 atomically
 const value = Atomics.load(view, 0); // Read atomically

 // Wait/notify pattern
 Atomics.wait(view, 0, 0);          // Wait until value changes
 Atomics.notify(view, 0, 1);        // Wake one waiter

Worker communication example:

javascript
 // Main thread
 const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 2);
 const sharedArray = new Int32Array(sharedBuffer);

 const worker = new Worker('worker.js');
 worker.postMessage({ buffer: sharedBuffer });

 // Increment counter atomically
 setInterval(() => {
   const oldValue = Atomics.add(sharedArray, 0, 1);
   console.log('Main thread incremented to:', oldValue + 1);
 }, 1000);

 // worker.js
 self.onmessage = function(e) {
   const sharedArray = new Int32Array(e.data.buffer);

   setInterval(() => {
     const oldValue = Atomics.add(sharedArray, 1, 1);
     console.log('Worker incremented to:', oldValue + 1);
   }, 1000);
 };

Security requirements for SharedArrayBuffer:

javascript
 // Requires these headers:
 // Cross-Origin-Opener-Policy: same-origin
 // Cross-Origin-Embedder-Policy: require-corp

 // Check availability
 if (typeof SharedArrayBuffer !== 'undefined') {
   console.log('SharedArrayBuffer is available');
 } else {
   console.log('SharedArrayBuffer is not available');
 }