WebAssembly für JavaScript-Entwickler: praktische Anwendungsfälle

// ❌ Performance trap: calling Wasm for trivial operations
// The boundary-crossing overhead dominates
function addNumbersWasm(a: number, b: number): number {
  return wasmModule.exports.add(a, b); // ~100ns overhead for a 1ns operation
}
 
// ✅ Wasm wins: batch processing with minimal boundary crossings
function processImageWasm(
  imageData: Uint8Array,
  width: number,
  height: number
): Uint8Array {
  // Allocate memory in Wasm linear memory
  const inputPtr = wasmModule.exports.allocate(imageData.length);
  const outputPtr = wasmModule.exports.allocate(imageData.length);
 
  // Copy data into Wasm memory (one boundary crossing)
  new Uint8Array(wasmModule.exports.memory.buffer).set(
    imageData,
    inputPtr
  );
 
  // Heavy computation happens entirely in Wasm
  // (thousands of operations, zero boundary crossings)
  wasmModule.exports.applyGaussianBlur(
    inputPtr, outputPtr, width, height, 5.0
  );
 
  // Copy result back (one boundary crossing)
  const result = new Uint8Array(
    wasmModule.exports.memory.buffer,
    outputPtr,
    imageData.length
  ).slice();
 
  wasmModule.exports.deallocate(inputPtr, imageData.length);
  wasmModule.exports.deallocate(outputPtr, imageData.length);
 
  return result;
}

// Rust code compiled to Wasm for image brightness adjustment
// This processes millions of pixels with predictable performance
 
#[no_mangle]
pub extern "C" fn adjust_brightness(
    input_ptr: *const u8,
    output_ptr: *mut u8,
    length: usize,
    factor: f32,
) {
    let input = unsafe { 
        std::slice::from_raw_parts(input_ptr, length) 
    };
    let output = unsafe { 
        std::slice::from_raw_parts_mut(output_ptr, length) 
    };
 
    for i in (0..length).step_by(4) {
        // RGBA channels
        output[i] = clamp_u8(input[i] as f32 * factor);
        output[i + 1] = clamp_u8(input[i + 1] as f32 * factor);
        output[i + 2] = clamp_u8(input[i + 2] as f32 * factor);
        output[i + 3] = input[i + 3]; // preserve alpha
    }
}
 
fn clamp_u8(value: f32) -> u8 {
    value.max(0.0).min(255.0) as u8
}

// JavaScript wrapper that integrates Wasm image processing
// with the Canvas API
class WasmImageProcessor {
  private module: WebAssembly.Instance;
  private memory: WebAssembly.Memory;
 
  static async create(): Promise<WasmImageProcessor> {
    const response = await fetch('/image-processor.wasm');
    const bytes = await response.arrayBuffer();
    const { instance } = await WebAssembly.instantiate(bytes, {
      env: {
        memory: new WebAssembly.Memory({ initial: 256 }),
      },
    });
    return new WasmImageProcessor(instance);
  }
 
  processCanvas(
    canvas: HTMLCanvasElement,
    operation: 'brightness' | 'contrast' | 'grayscale',
    value: number
  ): void {
    const ctx = canvas.getContext('2d')!;
    const imageData = ctx.getImageData(
      0, 0, canvas.width, canvas.height
    );
    const pixels = new Uint8Array(imageData.data.buffer);
 
    const inputPtr = (this.module.exports as any).allocate(pixels.length);
    const outputPtr = (this.module.exports as any).allocate(pixels.length);
 
    new Uint8Array(this.memory.buffer).set(pixels, inputPtr);
 
    const fn = (this.module.exports as any)[`adjust_${operation}`];
    fn(inputPtr, outputPtr, pixels.length, value);
 
    const result = new Uint8Array(
      this.memory.buffer, outputPtr, pixels.length
    );
    imageData.data.set(result);
    ctx.putImageData(imageData, 0, 0);
 
    (this.module.exports as any).deallocate(inputPtr, pixels.length);
    (this.module.exports as any).deallocate(outputPtr, pixels.length);
  }
}

// Loading and using a Wasm compression module
class WasmCompressor {
  private module: WebAssembly.Instance;
 
  async compress(data: Uint8Array): Promise<Uint8Array> {
    const inputPtr = this.allocate(data.length);
    const maxOutput = this.maxCompressedSize(data.length);
    const outputPtr = this.allocate(maxOutput);
 
    this.writeToMemory(data, inputPtr);
 
    // Compression runs entirely in Wasm — no JS<->Wasm
    // boundary crossings during the actual algorithm
    const compressedSize = (this.module.exports as any).compress(
      inputPtr, data.length,
      outputPtr, maxOutput,
      6  // compression level
    );
 
    const result = this.readFromMemory(outputPtr, compressedSize);
 
    this.free(inputPtr);
    this.free(outputPtr);
 
    return result;
  }
 
  // When to use Wasm compression vs JavaScript:
  // - Payload < 10KB: JS is fine, overhead dominates
  // - Payload 10KB-1MB: Wasm is 2-3x faster
  // - Payload > 1MB: Wasm is 3-5x faster
  // - Streaming: Wasm wins significantly
}

// Hybrid approach: use Web Crypto when possible, Wasm for gaps
class CryptoService {
  private wasmModule: WebAssembly.Instance | null = null;
 
  // ✅ Use native Web Crypto API — faster than Wasm
  async hashSHA256(data: ArrayBuffer): Promise<ArrayBuffer> {
    return crypto.subtle.digest('SHA-256', data);
  }
 
  // ✅ Use Wasm for algorithms not in Web Crypto
  async hashBlake3(data: Uint8Array): Promise<Uint8Array> {
    if (!this.wasmModule) {
      this.wasmModule = await this.loadWasmModule();
    }
 
    const inputPtr = this.writeData(data);
    const outputPtr = this.allocate(32); // Blake3 output is 32 bytes
 
    (this.wasmModule.exports as any).blake3_hash(
      inputPtr, data.length, outputPtr
    );
 
    const hash = this.readData(outputPtr, 32);
    this.free(inputPtr);
    this.free(outputPtr);
 
    return hash;
  }
 
  // ✅ Use Wasm for constant-time comparison
  // (JS engines may optimize away constant-time patterns)
  async constantTimeEquals(
    a: Uint8Array,
    b: Uint8Array
  ): Promise<boolean> {
    if (!this.wasmModule) {
      this.wasmModule = await this.loadWasmModule();
    }
 
    const ptrA = this.writeData(a);
    const ptrB = this.writeData(b);
 
    const result = (this.wasmModule.exports as any).constant_time_eq(
      ptrA, a.length, ptrB, b.length
    );
 
    this.free(ptrA);
    this.free(ptrB);
 
    return result === 1;
  }
}

// ❌ Naive loading: downloads entire module before compiling
async function loadWasmNaive(url: string) {
  const response = await fetch(url);
  const bytes = await response.arrayBuffer();
  const module = await WebAssembly.compile(bytes);
  return WebAssembly.instantiate(module);
}
 
// ✅ Streaming compilation: compiles while downloading
async function loadWasmStreaming(url: string) {
  const module = await WebAssembly.compileStreaming(fetch(url));
  return WebAssembly.instantiate(module);
}
 
// ✅ With caching: compile once, cache the module
class WasmLoader {
  private static moduleCache = new Map<string, WebAssembly.Module>();
 
  static async load(url: string): Promise<WebAssembly.Instance> {
    let module = this.moduleCache.get(url);
 
    if (!module) {
      module = await WebAssembly.compileStreaming(fetch(url));
      this.moduleCache.set(url, module);
 
      // Also cache in IndexedDB for persistence
      await this.cacheModule(url, module);
    }
 
    return WebAssembly.instantiate(module);
  }
 
  private static async cacheModule(
    url: string,
    module: WebAssembly.Module
  ): Promise<void> {
    const db = await this.openDB();
    const tx = db.transaction('modules', 'readwrite');
    tx.objectStore('modules').put({
      url,
      module,
      timestamp: Date.now(),
    });
  }
}

// ❌ Don't use Wasm for: DOM manipulation
// The boundary crossing to update DOM nodes eliminates any gains
 
// ❌ Don't use Wasm for: simple array operations
// V8 optimizes typed array operations nearly as well
const sum = numbers.reduce((a, b) => a + b, 0);
 
// ❌ Don't use Wasm for: string processing
// Strings must be encoded/decoded crossing the boundary
// JavaScript string operations are heavily optimized
 
// ❌ Don't use Wasm for: async/IO-bound work
// You're waiting on network/disk, not CPU — Wasm can't help
 
// ✅ Use Wasm when ALL of these are true:
// 1. The operation is CPU-bound (not IO-bound)
// 2. It operates on numerical/binary data
// 3. The computation time >> data transfer time
// 4. You've profiled and confirmed JS is the bottleneck
// 5. The Web platform doesn't already provide an optimized API