What is WebAssembly (Wasm)?

Question

Accepted Answer

WebAssembly (often abbreviated as Wasm) is a low-level, assembly-like language that runs in modern web browsers. It was created to solve the performance limitations of JavaScript for compute-intensive workloads like games, video editing, 3D rendering, and scientific simulations. Unlike JavaScript, which is text-based and must be parsed and JIT-compiled, WebAssembly is delivered in a compact binary format that can be decoded and compiled extremely quickly, with predictable performance characteristics closer to native machine code. **Binary format**: Wasm uses a compact binary encoding (.wasm files) that is smaller than equivalent JavaScript, reducing download and parsing time . **Stack-based virtual machine**: The Wasm runtime uses a stack machine architecture where instructions pop arguments from and push results onto an operand stack . **Type-safe and memory-safe**: Wasm runs in a sandboxed environment with strong type checking and memory safety guarantees, preventing common vulnerabilities like buffer overflows . **Linear memory**: Wasm modules have access to a contiguous array of bytes called linear memory, which can be shared with JavaScript via ArrayBuffer . **Near-native performance**: Because Wasm is designed to be compiled to machine code ahead of time (AOT) or with efficient JIT, it can execute at 80-90% of native speed, compared to JavaScript's typical 20-50% . **Language agnostic**: Wasm is a compilation target, not a language you write directly. Languages like C, C++, Rust, Go, and many others can compile to Wasm . ;; WebAssembly Text Format (WAT) - human-readable representation
;; This module exports an add function that adds two 32-bit integers

(module
  ;; Import JavaScript console.log function (optional)
  (import "console" "log" (func $log (param i32)))
  
  ;; Export a function named "add"
  (func $add (export "add") (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
  
  ;; Export a memory page (64KB)
  (memory (export "memory") 1)
  
  ;; Export a function to write to memory
  (func $write (export "write") (param $offset i32) (param $value i32)
    local.get $offset
    local.get $value
    i32.store
  )
)

// JavaScript to use this module:
// const wasm = await WebAssembly.instantiateStreaming(fetch('add.wasm'));
// console.log(wasm.instance.exports.add(5, 3)); // 8 WebAssembly is designed to complement JavaScript, not replace it. JavaScript remains the language for UI, interactivity, and dynamic behavior, while Wasm handles heavy lifting. The two can seamlessly interoperate—JavaScript can call Wasm functions with near-zero overhead, and Wasm can call JavaScript functions. This allows developers to gradually migrate performance-critical parts of an application to Wasm while keeping the rest in JavaScript. **Download**: Browser fetches the .wasm binary file (typically 10-20% smaller than gzipped JavaScript) . **Decoding**: Wasm binary is decoded into an intermediate representation. This is much faster than JavaScript parsing because the format is designed for efficient decoding . **Validation**: The module is validated for type safety, memory safety, and control flow integrity to ensure it can't break the browser sandbox . **Compilation**: The browser compiles Wasm to machine code. This can happen ahead-of-time (during download), just-in-time, or even streamingly as the binary arrives . **Instantiation**: A WebAssembly module is instantiated with its import dependencies (like JavaScript functions) and linear memory is allocated . **Execution**: Compiled machine code executes with performance close to native, with predictable memory access patterns . The performance story is compelling: Figma redesigned their entire rendering engine in C++ and compiled to Wasm, achieving 3x faster load times and smoother interaction compared to their previous JavaScript implementation . AutoCAD moved their 30-year-old C++ codebase to the web via Wasm, running complex CAD operations in the browser . Google Earth, Unity, and many game engines now use Wasm to deliver desktop-class experiences on the web. // Method 1: Streaming instantiation (recommended)
const importObject = {
  env: {
    memory: new WebAssembly.Memory({ initial: 256 }),
    log: (value) => console.log('From Wasm:', value)
  }
};

WebAssembly.instantiateStreaming(fetch('module.wasm'), importObject)
  .then(({ instance }) => {
    const result = instance.exports.add(5, 3);
    console.log('Result:', result);
    
    // Working with linear memory
    const memory = instance.exports.memory;
    const view = new Uint8Array(memory.buffer);
    view[0] = 42; // Write to Wasm memory
  });

// Method 2: Buffer instantiation (if you have the binary)
const bytes = await fetch('module.wasm').then(r => r.arrayBuffer());
const { instance } = await WebAssembly.instantiate(bytes, importObject); **Node.js**: Wasm modules can be loaded and used in Node.js for CPU-intensive server-side tasks like image processing,

What is WebAssembly (Wasm)?

WebAssembly (Wasm) is a binary instruction format designed as a portable compilation target for high-performance applications, enabling code written in languages like C, C++, and Rust to run on the web at near-native speed alongside JavaScript.

Scenario Questions

Follow-up Questions