WebAssembly Arrays and Buffers

What Are Arrays and Buffers in WebAssembly?

• Arrays: Arrays are contiguous blocks of memory used to store sequences of elements of the same data type. WebAssembly does not directly provide arrays as a first-class type but allows you to create and manage arrays in linear memory.
• Buffers: Buffers in WebAssembly refer to the linear memory buffer—a contiguous block of bytes allocated to the WebAssembly module. Buffers are accessed and manipulated using views like Uint8Array, Int32Array, etc., in JavaScript.

Key Concepts

1. Linear Memory:
   • WebAssembly uses linear memory as a single, contiguous block of memory.
   • Arrays are represented as a slice of this linear memory.
   • Memory is defined in pages (64 KiB per page) and can grow dynamically.
2. Typed Arrays:
   • Typed arrays in JavaScript (Uint8Array, Float32Array, etc.) are used to read and write to WebAssembly’s memory buffer efficiently.
3. Manual Management:
   • Unlike high-level languages, you must manually allocate, access and manage memory for arrays in WebAssembly.

How Arrays Work in WebAssembly

1. Defining Arrays:
   • Arrays are manually defined by allocating a block of linear memory.
   • Each element is stored sequentially, with each occupying a fixed number of bytes based on its type.
2. Accessing Arrays:
   • Accessing an array involves calculating the memory address (base address + offset).
3. Interacting with JavaScript:
   • Arrays are written to and read from WebAssembly memory using typed arrays in JavaScript.

Example 1: Basic Array in WebAssembly

WebAssembly Code (WAT):

(module
  (memory (export "memory") 1) ;; Define 1 page (64 KiB) of memory
  (func $sumArray (param i32 i32) (result i32)
    (local $sum i32)
    (local $i i32)
    (loop $loop
      local.get $i
      local.get 1
      i32.ge_u ;; Check if i >= length
      if (result i32)
        local.get $sum
        return
      end
      local.get $sum
      local.get 0
      local.get $i
      i32.add ;; Address = base + offset
      i32.load ;; Load value from memory
      i32.add
      local.set $sum
      local.get $i
      i32.const 1
      i32.add
      local.set $i
      br $loop ;; Repeat loop
    )
  )
  (export "sumArray" (func $sumArray))
)

JavaScript Code:

(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer);

  const memory = new Uint32Array(instance.exports.memory.buffer);

  // Write array to WebAssembly memory
  memory.set([1, 2, 3, 4, 5], 0); // Write at address 0

  const sumArray = instance.exports.sumArray;
  console.log("Sum of array:", sumArray(0, 5)); // Output: 15
})();

Explanation:

• JavaScript writes an array into WebAssembly memory.
• WebAssembly calculates the sum by iterating through the array using a loop.

Example 2: Passing Buffers Between JavaScript and WebAssembly

JavaScript Writes to WebAssembly Buffer

(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer);

  const memory = new Uint8Array(instance.exports.memory.buffer);

  // Write data to WebAssembly memory
  const data = [65, 66, 67, 68]; // ASCII codes for A, B, C, D
  memory.set(data, 0); // Write at address 0

  console.log("Buffer written to WebAssembly memory:", memory.slice(0, 4));
})();

WebAssembly Reads the Buffer

(module
  (memory (export "memory") 1)
  (func $printBuffer (param i32 i32)
    (local $i i32)
    (loop $loop
      local.get $i
      local.get 1
      i32.ge_u
      if
        return
      end
      local.get 0
      local.get $i
      i32.add
      i32.load8_u ;; Read a byte
      call $log ;; Assume a logging function
      local.get $i
      i32.const 1
      i32.add
      local.set $i
      br $loop
    )
  )
  (export "printBuffer" (func $printBuffer))
)

Advanced Use Case: Shared Buffers

Shared buffers are used for more advanced scenarios like multithreading. They enable multiple WebAssembly instances or JavaScript threads to share the same memory.

JavaScript Example:

const memory = new SharedArrayBuffer(1024); // Shared buffer of 1 KiB
const view = new Uint32Array(memory);

// Write to the shared memory
view[0] = 42;

// Pass the memory to WebAssembly
const { instance } = await WebAssembly.instantiate(module, {
  env: { memory }
});

instance.exports.readSharedMemory();

Challenges in Working with Arrays and Buffers

1. Manual Memory Management:
   • Developers must carefully manage memory allocation and deallocation to prevent leaks.
2. Type Mismatch:
   • Ensure data types in JavaScript and WebAssembly are compatible to avoid errors.
3. Performance Bottlenecks:
   • Large data transfers can introduce overhead if not optimized.

Best Practices for Working with Arrays and Buffers

1. Pre-allocate Memory:
   • Allocate sufficient memory pages to avoid frequent memory resizing.
2. Use Typed Arrays:
   • Access memory using typed arrays for better performance and clarity.
3. Minimize Data Transfers:
   • Pass only necessary data between WebAssembly and JavaScript to reduce overhead.
4. Encapsulate Data Handling:
   • Create utility functions for encoding/decoding arrays and buffers to simplify usage.