WebAssembly Shared Memory

What is WebAssembly Shared Memory?

Shared memory in WebAssembly allows multiple threads to access the same memory buffer simultaneously. It is based on the SharedArrayBuffer object in JavaScript, which facilitates communication and synchronization between WebAssembly threads and the main JavaScript thread.

Key Features:

1. Concurrency: Enables parallel execution for performance-critical tasks.
2. Synchronization: Uses atomic operations to avoid race conditions and ensure thread safety.
3. Efficiency: Reduces overhead by avoiding the need for separate memory copies.

How WebAssembly Shared Memory Works

To use shared memory in WebAssembly, a shared SharedArrayBuffer is created and passed as the memory buffer to the WebAssembly module. This shared buffer is then accessed by both the main thread and worker threads for communication and computation.

Components:

1. SharedArrayBuffer: The memory buffer that supports shared access.
2. Atomics API: Provides atomic operations for thread synchronization.
3. Worker Threads: Executes parallel tasks while sharing the memory buffer.

Declaring Shared Memory

In WebAssembly, shared memory is declared using the shared keyword during memory initialization.

Example: Declaring Shared Memory in WebAssembly Text Format (WAT)

(module
  (memory (export "memory") 1 10 shared) ;; Shared memory with initial size 1 page and max size 10 pages
)

• Shared Flag: Indicates that the memory is shared.
• Size: Initial size of 1 page (64 KiB), expandable up to 10 pages.

Creating Shared Memory in JavaScript

The SharedArrayBuffer object in JavaScript is used to create shared memory for the WebAssembly module.

Example: Initializing Shared Memory

(async () => {
  const memory = new WebAssembly.Memory({
    initial: 1,
    maximum: 10,
    shared: true, // Enables shared memory
  });

  console.log("Memory buffer size:", memory.buffer.byteLength); // 65536 (1 page)
})();

Multi-Threading with Shared Memory

To demonstrate the use of shared memory, let’s consider a scenario where the main thread and a worker thread share a memory buffer for computation.

Example: Shared Memory with a Worker

1. Main JavaScript File:

const sharedMemory = new WebAssembly.Memory({
  initial: 1,
  maximum: 10,
  shared: true,
});

// Initialize the shared buffer
const buffer = new Uint8Array(sharedMemory.buffer);
buffer[0] = 0; // Initial value

// Create a worker thread
const worker = new Worker('worker.js');

// Pass shared memory to the worker
worker.postMessage(sharedMemory);

// Listen for updates from the worker
worker.onmessage = (event) => {
  console.log("Updated value from worker:", buffer[0]);
};

2. Worker File (worker.js):

onmessage = (event) => {
  const memory = event.data;
  const buffer = new Uint8Array(memory.buffer);

  // Perform some computation
  Atomics.add(buffer, 0, 5); // Atomically add 5 to buffer[0]

  // Notify the main thread
  postMessage("Computation complete");
};

Explanation:

• The main thread initializes the shared memory and creates a buffer (Uint8Array).
• The worker receives the shared memory and performs atomic operations on it.
• The main thread is updated with the changes using the Atomics API.

Synchronizing Shared Memory with Atomics

Since multiple threads access the same memory buffer, synchronization is critical to avoid race conditions. The Atomics API ensures that operations on shared memory are atomic and thread-safe.

Example: Atomic Operations

const buffer = new Uint8Array(sharedMemory.buffer);

// Write to the buffer atomically
Atomics.store(buffer, 0, 10); // Set buffer[0] to 10
console.log(Atomics.load(buffer, 0)); // Read the value (10)

// Increment the value atomically
Atomics.add(buffer, 0, 5); // Add 5 to buffer[0]
console.log(Atomics.load(buffer, 0)); // Output: 15

Real-World Use Case: Parallel Computation

Let’s consider a real-world example where shared memory is used to parallelize a matrix addition task.

Example: Matrix Addition with Shared Memory

1. Main JavaScript File:

const sharedMemory = new WebAssembly.Memory({
  initial: 2,
  maximum: 10,
  shared: true,
});

const buffer = new Int32Array(sharedMemory.buffer);

// Initialize two matrices (stored in shared memory)
for (let i = 0; i < 100; i++) {
  buffer[i] = i; // Matrix A
  buffer[100 + i] = i * 2; // Matrix B
}

const worker = new Worker('matrixWorker.js');
worker.postMessage(sharedMemory);

worker.onmessage = () => {
  console.log("Matrix Addition Complete. Result:", buffer.slice(200, 300));
};

2. Worker File (matrixWorker.js):

onmessage = (event) => {
  const memory = event.data;
  const buffer = new Int32Array(memory.buffer);

  // Add Matrix A and B, store result in Matrix C
  for (let i = 0; i < 100; i++) {
    buffer[200 + i] = buffer[i] + buffer[100 + i];
  }

  postMessage("Done");
};

Benefits of WebAssembly Shared Memory

1. Performance: Improves application performance by leveraging multi-threading.
2. Resource Efficiency: Avoids data duplication by sharing a single memory buffer.
3. Flexibility: Supports atomic operations for precise control over data synchronization.

Best Practices for Using Shared Memory

1. Minimize Synchronization Overhead:
   • Use synchronization (e.g., Atomics) only when necessary to avoid bottlenecks.
2. Avoid Race Conditions:
   • Ensure atomicity in read/write operations with the Atomics API.
3. Optimize Memory Usage:
   • Allocate only the required memory pages to minimize resource consumption.
4. Test Thoroughly:
   • Multi-threaded applications can be complex; ensure extensive testing to catch edge cases.