SharedArrayBuffer for shared memory in Node.js - Performance & Optimization

Performance: SharedArrayBuffer for shared memory

MEDIUM IMPACT

This affects how efficiently multiple threads or workers share and access memory without copying data, improving concurrency and responsiveness.

Sharing data between worker threads in Node.js

Node.js

const { Worker, isMainThread, workerData } = require('worker_threads');
const sharedBuffer = new SharedArrayBuffer(1024);

if (isMainThread) {
  const worker = new Worker('./worker.js', { workerData: sharedBuffer });
} else {
  const shared = new Uint8Array(workerData);
  // Access shared memory directly without copying
}

SharedArrayBuffer allows multiple threads to access the same memory without copying, reducing latency and memory usage.

📈 Performance GainEliminates memory copies, reduces blocking, improves INP by enabling concurrent data access

Sharing data between worker threads in Node.js

Node.js

const { Worker } = require('worker_threads');
const buffer = new ArrayBuffer(1024);

const worker = new Worker('./worker.js', { workerData: buffer });
// Worker copies the buffer, no real shared memory

ArrayBuffer is copied when passed to workers, causing extra memory use and slower communication.

📉 Performance CostAdds memory copies and blocks main thread during data transfer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
ArrayBuffer passed to worker	N/A	N/A	N/A	[X] Bad
SharedArrayBuffer passed to worker	N/A	N/A	N/A	[OK] Good

Rendering Pipeline

SharedArrayBuffer bypasses the usual message passing serialization and copying, allowing threads to read/write the same memory directly. This reduces main thread blocking and speeds up interaction responsiveness.

→JavaScript Execution

→Thread Communication

⚠️ BottleneckThread Communication overhead due to copying and serialization

Core Web Vital Affected

INP

This affects how efficiently multiple threads or workers share and access memory without copying data, improving concurrency and responsiveness.

Optimization Tips

1Use SharedArrayBuffer to share memory directly between threads without copying.

2Avoid passing ArrayBuffer to workers if you want low-latency communication.

3SharedArrayBuffer improves interaction responsiveness by reducing thread communication overhead.

Performance Quiz - 3 Questions

What is the main performance benefit of using SharedArrayBuffer in Node.js worker threads?

A It automatically compresses data to reduce size.

B It serializes data faster than JSON.stringify.

C It allows threads to share memory without copying data.

D It increases the size of the memory buffer.

DevTools: Performance

How to check: Record a performance profile while running worker threads sharing data. Look for reduced main thread blocking and fewer serialization events.

What to look for: Lower main thread blocking time and faster worker communication indicate good SharedArrayBuffer usage.

Practice

1. What is the main purpose of SharedArrayBuffer in Node.js?

easy

A. To create a memory area that multiple threads can access simultaneously

B. To store large strings efficiently

C. To replace regular arrays with faster versions

D. To handle file system operations asynchronously

Solution

1. Step 1: Understand Shared Memory Concept

   SharedArrayBuffer is designed to create a block of memory that can be shared between multiple threads or workers.

2. Step 2: Compare with Other Options

   Options B, C, and D describe unrelated features: string storage, array speed, and file system operations, which are not the purpose of SharedArrayBuffer.

3. Final Answer:

   To create a memory area that multiple threads can access simultaneously -> Option A

4. Quick Check:

   Shared memory = multiple threads access [OK]

Hint: SharedArrayBuffer is about sharing memory across threads [OK]

Common Mistakes:

• Thinking it stores strings or files
• Confusing with normal arrays
• Assuming it handles async file tasks

2. Which of the following is the correct way to create a SharedArrayBuffer of 1024 bytes in Node.js?

easy

A. const sab = SharedArrayBuffer(1024);

B. const sab = SharedArrayBuffer.new(1024);

C. const sab = new SharedArrayBuffer();

D. const sab = new SharedArrayBuffer(1024);

Solution

1. Step 1: Check the correct constructor usage

   The SharedArrayBuffer must be created with the new keyword and a size in bytes as argument.

2. Step 2: Validate each option

   const sab = new SharedArrayBuffer(1024); uses new SharedArrayBuffer(1024), which is correct. const sab = SharedArrayBuffer(1024); misses new. const sab = new SharedArrayBuffer(); misses size argument. const sab = SharedArrayBuffer.new(1024); uses invalid syntax.

3. Final Answer:

   const sab = new SharedArrayBuffer(1024); -> Option D

4. Quick Check:

   Use new with size in bytes [OK]

Hint: Always use 'new' with SharedArrayBuffer and specify size [OK]

Common Mistakes:

• Omitting 'new' keyword
• Not providing size argument
• Using incorrect constructor syntax

3. Given the code below, what will be the output?

const sab = new SharedArrayBuffer(4);
const int32 = new Int32Array(sab);
int32[0] = 10;
Atomics.add(int32, 0, 5);
console.log(int32[0]);

medium

A. 10

B. 5

C. 15

D. NaN

Solution

1. Step 1: Understand initial value and Atomics.add

   The int32[0] is set to 10. Then Atomics.add adds 5 to this value atomically.

2. Step 2: Calculate the new value

   10 + 5 = 15, so int32[0] becomes 15.

3. Final Answer:

   15 -> Option C

4. Quick Check:

   Atomics.add adds value safely = 15 [OK]

Hint: Atomics.add adds value and returns old value, array updates [OK]

Common Mistakes:

• Expecting Atomics.add to return new value
• Ignoring atomic operation effect
• Confusing initial and updated values

4. What is wrong with the following code snippet?

const sab = new SharedArrayBuffer(8);
const uint8 = new Uint8Array(sab);
uint8[0] = 255;
Atomics.store(uint8, 0, 256);
console.log(uint8[0]);

medium

A. Atomics.store cannot be used with Uint8Array

B. 256 is out of range for Uint8Array element

C. SharedArrayBuffer size is too small

D. Uint8Array cannot be created from SharedArrayBuffer

Solution

1. Step 1: Check Uint8Array element range

   Uint8Array elements can only hold values from 0 to 255. The value 256 is out of this range.

2. Step 2: Understand effect of storing 256

   Storing 256 wraps around to 0 because 256 mod 256 = 0, so uint8[0] becomes 0, not 256.

3. Final Answer:

   256 is out of range for Uint8Array element -> Option B

4. Quick Check:

   Uint8 max value 255, 256 wraps to 0 [OK]

Hint: Uint8Array values must be 0-255; higher values wrap [OK]

Common Mistakes:

• Assuming Atomics.store rejects Uint8Array
• Ignoring value wrapping behavior
• Thinking SharedArrayBuffer size is insufficient

5. You want to safely increment a shared counter in a Node.js worker thread using SharedArrayBuffer. Which code snippet correctly increments the counter without race conditions? // Shared buffer and typed array const sab = new SharedArrayBuffer(4); const counter = new Int32Array(sab); counter[0] = 0; // Increment function function increment() { // Which line correctly increments? }

hard

A. Atomics.add(counter, 0, 1);

B. counter[0] = counter[0] + 1;

C. counter[0] += 1;

D. counter[0]++;

Solution

1. Step 1: Understand race conditions in shared memory

   Directly modifying counter[0] with normal operators can cause race conditions when multiple threads run concurrently.

2. Step 2: Use atomic operations for safe increments

   Atomics.add(counter, 0, 1) safely increments the value at index 0 without conflicts.

3. Final Answer:

   Atomics.add(counter, 0, 1); -> Option A

4. Quick Check:

   Use Atomics for safe shared memory updates [OK]

Hint: Always use Atomics methods to update shared memory safely [OK]

Common Mistakes:

• Using normal arithmetic on shared memory
• Ignoring atomicity causing race conditions
• Assuming ++ or += are thread-safe