WASM (WebAssembly) File Format

Overview

WebAssembly (WASM) is a binary instruction format for a stack-based virtual machine designed as a portable compilation target for programming languages. It enables deployment on the web for client and server applications with near-native performance.

Technical Specifications

• Format Type: Binary executable format
• Magic Number: \0asm (0x00 0x61 0x73 0x6D)
• Version: 4-byte little-endian integer (currently 1)
• File Extension: .wasm
• MIME Type: application/wasm
• Specification: W3C WebAssembly specification

Format Structure

WebAssembly files consist of:

• Magic number and version
• Section-based structure with type-length-value encoding
• Custom sections for metadata
• Type, import, function, table, memory, global, export, start, element, and code sections

History and Development

• 2015: Initial development by Mozilla, Google, Microsoft, and Apple
• 2017: WebAssembly 1.0 specification released
• 2019: Became W3C recommendation
• 2020-Present: Continued evolution with WASI and component model

Use Cases

• Web applications requiring high performance
• Gaming and multimedia applications
• Cryptographic libraries
• Image and video processing
• Scientific computing
• Legacy code porting to web platforms

Code Examples

JavaScript Loading WASM

// Fetch and instantiate WebAssembly module
WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(result => {
    const exports = result.instance.exports;
    console.log(exports.add(1, 2)); // Call exported function
  });

// Synchronous loading
const bytes = new Uint8Array([0x00, 0x61, 0x73, 0x6d, ...]);
const module = new WebAssembly.Module(bytes);
const instance = new WebAssembly.Instance(module);

Rust to WASM

// Cargo.toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

// lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

C to WASM with Emscripten

// math.c
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

EMSCRIPTEN_KEEPALIVE
double calculate_pi(int iterations) {
    double pi = 0.0;
    for (int i = 0; i < iterations; i++) {
        pi += (i % 2 == 0 ? 1 : -1) / (2.0 * i + 1);
    }
    return 4 * pi;
}

Development Tools

• Emscripten: C/C++ to WebAssembly compiler
• wasm-pack: Rust to WebAssembly toolchain
• AssemblyScript: TypeScript-like language for WebAssembly
• wabt: WebAssembly Binary Toolkit
• wasm-bindgen: Rust and JavaScript interop
• Binaryen: WebAssembly optimizer and toolkit

Runtimes and Environments

• Web browsers (V8, SpiderMonkey, JavaScriptCore, Chakra)
• Node.js with WebAssembly support
• Wasmtime (standalone runtime)
• Wasmer (universal WebAssembly runtime)
• WASI (WebAssembly System Interface)

Performance Characteristics

• Near-native execution speed
• Compact binary format
• Fast parsing and compilation
• Memory-safe execution
• Deterministic behavior

Security Features

• Sandboxed execution environment
• Linear memory model with bounds checking
• Control flow integrity
• No direct access to system resources
• Capability-based security model

Best Practices

• Optimize for size and performance
• Use appropriate data types
• Minimize JavaScript/WASM boundary crossings
• Leverage SIMD instructions when available
• Consider memory management strategies
• Profile and benchmark performance

Integration Examples

Web Worker with WASM

// worker.js
self.onmessage = async function(e) {
    const { data } = e;
    const wasmModule = await WebAssembly.instantiateStreaming(
        fetch('processor.wasm')
    );
    
    const result = wasmModule.instance.exports.process(data);
    self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage(largeDataArray);
worker.onmessage = (e) => {
    console.log('Processed result:', e.data);
};

Node.js WASM Module

const fs = require('fs');
const path = require('path');

async function loadWasm() {
    const wasmPath = path.join(__dirname, 'module.wasm');
    const wasmBuffer = fs.readFileSync(wasmPath);
    
    const wasmModule = await WebAssembly.instantiate(wasmBuffer);
    return wasmModule.instance.exports;
}

loadWasm().then(exports => {
    console.log(exports.calculate(42));
});

Debugging and Profiling

• Browser DevTools WebAssembly debugging
• Source maps for high-level language debugging
• Performance profiling tools
• Memory usage analysis
• Instruction-level debugging with wabt

Future Developments

• WebAssembly Component Model
• Interface Types
• Multi-threading support
• Garbage collection proposal
• Exception handling
• SIMD improvements
• Reference types evolution