Single Instruction, Multiple Data (SIMD)

Single Instruction, Multiple Data (SIMD) applies one operation to multiple data elements simultaneously, boosting performance for tasks like image processing, scientific simulations, and numerical computations. While TypeScript/JavaScript doesn't have native SIMD instructions like lower-level languages, we can prepare for SIMD optimizations and achieve better performance using typed arrays and vectorized thinking. This article explains SIMD concepts with clear examples and visuals.

Memory Layout: How SIMD Works with Data

SIMD processors can load multiple contiguous data elements into wide registers and perform the same operation on all elements in parallel. For example, a 128-bit SIMD register can hold four 32-bit floats and add them simultaneously.

SIMD Register (128-bit):
+-----------------+-----------------+-----------------+-----------------+
| Float 1 (32bit) | Float 2 (32bit) | Float 3 (32bit) | Float 4 (32bit) |
+-----------------+-----------------+-----------------+-----------------+

SIMD-Style Programming in TypeScript

While JavaScript engines may optimize typed array operations, we can write code that's ready for SIMD by using Float32Array, Int32Array, and other typed arrays that ensure contiguous memory layout.

Example 1: Element-wise Array Addition

This performs element-wise addition, the type of operation SIMD excels at.

function addArrays(a: Float32Array, b: Float32Array): Float32Array {
  if (a.length !== b.length) {
    throw new Error('Arrays must have the same length');
  }
  
  const result = new Float32Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = a[i] + b[i];
  }
  return result;
}

// Example usage
const arrayA = new Float32Array([1.0, 2.0, 3.0, 4.0]);
const arrayB = new Float32Array([5.0, 6.0, 7.0, 8.0]);
const sum = addArrays(arrayA, arrayB);
console.log(sum); // Float32Array [6, 8, 10, 12]

Memory Layout Visualization:

Array A: [1.0] [2.0] [3.0] [4.0]
Array B: [5.0] [6.0] [7.0] [8.0]
         ↓     ↓     ↓     ↓
Result:  [6.0] [8.0] [10.0][12.0]

Example 2: Vector Scaling

Multiplying each element by a scalar value - a common operation in graphics and machine learning.

function scaleArray(arr: Float32Array, scalar: number): Float32Array {
  const result = new Float32Array(arr.length);
  for (let i = 0; i < arr.length; i++) {
    result[i] = arr[i] * scalar;
  }
  return result;
}

// Example usage
const vector = new Float32Array([1.5, 2.5, 3.5, 4.5]);
const scaleFactor = 2.0;
const scaled = scaleArray(vector, scaleFactor);
console.log(scaled); // Float32Array [3, 5, 7, 9]

SIMD Concept Visualization:

Vector:     [1.5] [2.5] [3.5] [4.5]
Scalar:      2.0   2.0   2.0   2.0
            ↓     ↓     ↓     ↓
Result:     [3.0] [5.0] [7.0] [9.0]

In-Place Operations for Memory Efficiency

In-place operations modify the original array, reducing memory allocation and improving cache performance.

Example: In-Place Vector Scaling

function scaleArrayInPlace(arr: Float32Array, scalar: number): void {
  for (let i = 0; i < arr.length; i++) {
    arr[i] *= scalar;
  }
}

// Example usage
const vector = new Float32Array([1.0, 2.0, 3.0, 4.0]);
console.log('Before:', vector); // [1, 2, 3, 4]
scaleArrayInPlace(vector, 3.0);
console.log('After:', vector);  // [3, 6, 9, 12]

Memory State Changes:

Before: [1.0] [2.0] [3.0] [4.0]  ← Original memory
         ↓     ↓     ↓     ↓
After:  [3.0] [6.0] [9.0] [12.0] ← Same memory, modified

Advanced Example: Dot Product

A common operation that benefits greatly from SIMD:

function dotProduct(a: Float32Array, b: Float32Array): number {
  if (a.length !== b.length) {
    throw new Error('Vectors must have the same length');
  }
  
  let sum = 0;
  for (let i = 0; i < a.length; i++) {
    sum += a[i] * b[i];  // Multiply then accumulate
  }
  return sum;
}

// Example usage
const vec1 = new Float32Array([1, 2, 3, 4]);
const vec2 = new Float32Array([5, 6, 7, 8]);
const dot = dotProduct(vec1, vec2);
console.log(dot); // 70 (1*5 + 2*6 + 3*7 + 4*8)

Performance Considerations and Best Practices

When SIMD-Style Code Helps:

• Large datasets: Operations on thousands or millions of elements
• Regular patterns: Same operation applied uniformly
• Numerical computations: Mathematical operations on floats/integers
• Tight loops: Simple operations repeated many times

When to Use Regular JavaScript:

• Small arrays: Overhead isn't worth it (< 100 elements typically)
• Complex logic: Branching or conditional operations
• Mixed data types: Non-uniform operations
• Object manipulation: Working with complex data structures

Code Optimization Tips:

// ✅ Good: Use typed arrays for numerical data
const data = new Float32Array(1000);

// ❌ Avoid: Regular arrays for heavy numerical work
const data = new Array(1000).fill(0);

// ✅ Good: Simple, uniform operations
for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] * 2 + 1;
}

// ❌ Avoid: Complex branching in tight loops
for (let i = 0; i < arr.length; i++) {
  if (arr[i] > threshold) {
    arr[i] = complexCalculation(arr[i]);
  } else {
    arr[i] = otherComplexCalculation(arr[i]);
  }
}

Future: WebAssembly SIMD

For true SIMD performance, consider WebAssembly with SIMD instructions:

// Future: WASM SIMD (conceptual)
// This would compile to actual SIMD instructions
function wasmAddArrays(a: Float32Array, b: Float32Array): Float32Array {
  // WebAssembly SIMD operations would be much faster
  // than JavaScript loops for large datasets
}

Conclusion

While TypeScript/JavaScript doesn't provide direct SIMD instructions, writing SIMD-friendly code with typed arrays offers several benefits:

1. Prepares for optimization: JavaScript engines can better optimize typed array operations
2. WebAssembly ready: Code structure translates well to WASM SIMD
3. Better performance: Typed arrays are faster than regular arrays for numerical work
4. Memory efficiency: Contiguous memory layout improves cache performance

Use this approach when working with large numerical datasets, implementing algorithms that will benefit from parallel processing, or preparing code for eventual WebAssembly compilation with true SIMD support.