An Introduction to WebAssembly: History, Goals, Advantages, and a Mandelbrot Demo

WebAssembly is a W3C standard binary format that is portable, small, fast-loading, and compatible with the web, enabling non‑JavaScript code to run efficiently in browsers and increasingly on servers and cloud platforms.

The article first reviews the historical evolution of WebAssembly, starting from the performance‑driven optimizations of asm.js, through Google’s Native Client (NaCl) and Portable Native Client (PNaCl), and culminating in the standardized WebAssembly format introduced by Mozilla in 2015.

asm.js stage – asm.js is a strict subset of JavaScript that adds type annotations (e.g., | T ) to allow the engine to determine variable types before execution, enabling compile‑time optimizations and reuse of compiled code. An example asm.js module is shown:

function fast_fib_module(stdlib, foreign, heap) {
    "use asm";
    function fib(n) {
        n = n|0;
        if (n >>> 0 < 3) {
            return 1|0;
        }
        return (fib((n-1)|0) + fib((n-2)|0))|0;
    }
    return fib;
}

NaCl and PNaCl attempted to run native C/C++ code in browsers but suffered from platform‑specific binaries and limited browser support.

WebAssembly stage – Building on asm.js, Mozilla released WebAssembly in 2015, a binary format that can be loaded like a JavaScript module, is architecture‑agnostic, and enjoys broad browser support (Firefox, Chrome, Edge, WebKit). The WebAssembly Working Group (WWG) standardized the format, and by December 2019 it became the fourth web language. Subsequent developments include the Bytecode Alliance, WebAssembly 2.0 draft (adding reference types, SIMD, bulk memory, etc.), and expanding use cases in cloud‑native, AI, and blockchain.

Goals and Advantages

Performance – static strong typing and low‑level binary enable near‑native speed and fast cold start.

Portability – language‑agnostic binary runs on browsers, servers, IoT, and mobile devices.

Sandboxed execution – isolates code, reducing data leakage and side‑channel attacks.

Standardization – W3C governance ensures cross‑vendor compatibility.

Security – runs within a sandbox respecting same‑origin and authorization policies.

Flexible development – multiple source languages (C/C++, Rust, AssemblyScript, etc.) can compile to WebAssembly.

The article then presents a hands‑on WebAssembly web‑app experience by building a Mandelbrot set visualizer. The steps include initializing a project, installing AssemblyScript, writing the computation in Mandelbrot.ts , compiling it to Mandelbrot.wasm , and loading the module in an HTML page.

npm init
npm install --save-dev assemblyscript

Compilation command:

npx asc Mandelbrot.ts --target release -o Mandelbrot.wasm

Key AssemblyScript source (simplified):

// file: Mandelbrot.ts
/** Number of discrete color values on the JS side. */
const NUM_COLORS = 2048;
/** Computes a single line in the rectangle `width` x `height`. */
export function computeLine(y: u32, width: u32, height: u32, limit: u32): void {
    var translateX = width * (1.0 / 1.6);
    var translateY = height * (1.0 / 2.0);
    var scale = 10.0 / min(3 * width, 4 * height);
    var imaginary = (y - translateY) * scale;
    var realOffset = translateX * scale;
    var stride = (y * width) << 1;
    var invLimit = 1.0 / limit;
    var minIterations = min(8, limit);
    for (let x: u32 = 0; x < width; ++x) {
        let real = x * scale - realOffset;
        let ix = 0.0, iy = 0.0, ixSq: f64, iySq: f64;
        let iteration: u32 = 0;
        while ((ixSq = ix * ix) + (iySq = iy * iy) <= 4.0) {
            iy = 2.0 * ix * iy + imaginary;
            ix = ixSq - iySq + real;
            if (iteration >= limit) break;
            ++iteration;
        }
        while (iteration < minIterations) {
            let ixNew = ix * ix - iy * iy + real;
            iy = 2.0 * ix * iy + imaginary;
            ix = ixNew;
            ++iteration;
        }
        let col = NUM_COLORS - 1;
        let sqd = ix * ix + iy * iy;
        if (sqd > 1.0) {
            let frac = Math.log2(0.5 * Math.log(sqd));
            col =
((NUM_COLORS - 1) * clamp
((iteration + 1 - frac) * invLimit, 0.0, 1.0));
        }
        store
(stride + (x << 1), col);
    }
}
@inline
function clamp
(value: T, minValue: T, maxValue: T): T {
    return min(max(value, minValue), maxValue);
}

HTML/JavaScript integration (simplified):

// file: index.html
var cnv = document.getElementsByTagName("canvas")[0];
var ctx = cnv.getContext("2d");
var memory = new WebAssembly.Memory({initial: ((byteSize + 0xffff) & ~0xffff) >>> 16});
var mem = new Uint16Array(memory.buffer);
var imageData = ctx.createImageData(width, height);
var argb = new Uint32Array(imageData.data.buffer);
fetch("build/Mandelbrot.wasm")
  .then(r => r.arrayBuffer())
  .then(buf => WebAssembly.instantiate(buf, {env: {memory, "Math.log": Math.log, "Math.log2": Math.log2}}))
  .then(mod => {
    const {computeLine} = mod.instance.exports;
    const limit = 40;
    for (let y = 0; y < height; ++y) {
      computeLine(y, width, height, limit);
      // copy colors from mem to argb here
    }
    ctx.putImageData(imageData, 0, 0);
  })
  .catch(err => console.error(err));

Finally, the compiled WebAssembly module can be served locally (e.g., with npx serve ) and viewed in a browser, demonstrating the performance gains of WebAssembly for compute‑intensive graphics.

The article concludes by summarizing WebAssembly’s evolution, core value, and its expanding ecosystem, and points to further exploration of use cases and future trends in the next chapter.

References are provided for asm.js, NaCl/PNaCl, WebAssembly specifications, AssemblyScript, Mandelbrot resources, and related tooling.