๐งต Multiple Threads, One Memory
Web Workers communicate via message passing. SharedArrayBuffer + Atomics enables shared memory. No copying. True multithreading.
๐ Basic Shared Memory
// Main thread
const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 2);
const sharedArray = new Int32Array(sharedBuffer);
sharedArray[0] = 0; // Counter
const worker = new Worker('worker.js');
worker.postMessage(sharedBuffer); // Transfer, not copy!
// worker.js
let sharedArray;
self.onmessage = (e) => {
sharedArray = new Int32Array(e.data);
// Atomic increment
Atomics.add(sharedArray, 0, 1);
// Notify main thread
Atomics.notify(sharedArray, 0, 1);
};
// Main thread waiting
Atomics.wait(sharedArray, 0, 0); // Wait until value changes
โ Atomics Methods
// Atomic operations (no race conditions) Atomics.add(array, index, value) // atomic addition Atomics.sub(array, index, value) // atomic subtraction Atomics.and(array, index, value) // atomic AND Atomics.or(array, index, value) // atomic OR Atomics.xor(array, index, value) // atomic XOR Atomics.compareExchange(array, index, expected, replacement) Atomics.exchange(array, index, value) // Synchronization Atomics.wait(array, index, value) // Wait until value changes Atomics.notify(array, index, count) // Wake waiting threads // Loading/storing (ensures ordering) Atomics.load(array, index) Atomics.store(array, index, value)
“Video processing worker sent huge array back and forth (expensive). SharedArrayBuffer + Atomics: zero copy, instant updates. Performance improved 10x.”
