CD Notes

WebAssembly Basics

Complete introduction to WebAssembly, bytecode format, execution model, and practical usage

WebAssembly (Wasm) is a revolutionary technology enabling high-performance code execution in web browsers. Understanding it provides insights into modern portable bytecode design.

What is WebAssembly?

WebAssembly is a binary instruction format and bytecode designed for fast, safe execution in web browsers and other environments. It provides a portable compilation target for high-level languages.

High-Level Languages │ Compilation C/C++ ──┤ Rust ──┤──→ WebAssembly Module Go ──┤ (.wasm binary) TypeScript ──┤ etc. ──┘ │ ▼ Web Browser ├─ Fast execution ├─ Safe sandbox └─ Hardware-independent

WebAssembly Principles

│ ✓ Fast	Near-native perf │
│ ✓ Safe	Memory isolation │
│ ✓ Portable	Browser-indep│
│ ✓ Efficient	Small files │
│ ✓ Streamable	Load+exec │
│ ✓ Verifiable	Type-safe │

WebAssembly Module Structure

WebAssembly Module (.wasm file) ┌──────────────────────┐ │ Header │ (Magic number, version) ├──────────────────────┤ │ Type Section │ (Function signatures) ├──────────────────────┤ │ Import Section │ (Imports from host) ├──────────────────────┤ │ Function Section │ (Function declarations) ├──────────────────────┤ │ Table Section │ (Function tables) ├──────────────────────┤ │ Memory Section │ (Linear memory) ├──────────────────────┤ │ Global Section │ (Global variables) ├──────────────────────┤ │ Export Section │ (Exports to host) ├──────────────────────┤ │ Start Section │ (Entry point) ├──────────────────────┤ │ Element Section │ (Table initialization) ├──────────────────────┤ │ Code Section │ (Function code) ├──────────────────────┤ │ Data Section │ (Initialization data) └──────────────────────┘

WebAssembly Text Format (WAT)

Humans can read/write WebAssembly in text format:

Code example

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)

  (export "add" (func $add)))

Equivalent to compiled bytecode (.wasm).

WebAssembly Execution Model

├─ From JavaScript	wasm.add(5, 3)
├─ From WASM	call $function
├─ Between WASM funcs	call $func

Linear Memory

Wasm has linear memory - a flat byte array:

	Memory initialized with data
	(const data from module)
	Heap
	(runtime allocation)
	Stack
	(local variables)

Wasm Value Types

Example

i32 - 32-bit signed integer i64 - 64-bit signed integer f32 - 32-bit floating point f64 - 64-bit floating point v128 - 128-bit vector (SIMD) anyfunc - Function reference

Stack-Based Instruction Set

Wasm is stack-based like Java bytecode:

Instruction	i32.add
Before	[5, 3]
Execution	Pop 3, pop 5, add them, push result
After	[8]

Common WebAssembly Instructions

Instruction	Purpose
local.get	Load local variable
local.set	Store local variable
i32.load	Load i32 from memory
i32.store	Store i32 to memory
i32.add	Add two i32
i32.sub	Subtract
i32.mul	Multiply
i32.div_s	Signed division
f64.sqrt	Square root
call	Call function
if/then/else	Conditional
block/loop	Control flow
br	Branch

C++ to WebAssembly Example

C++ Code:

cpp example

int add(int a, int b) {
    return a + b;
}

int multiply(int x, int y) {
    return x * y;
}

EMSCRIPTEN_BINDINGS(example) {
    emscripten::function("add", &add);
    emscripten::function("multiply", &multiply);
}

Compiled to WebAssembly:

wasm example

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)

  (func $multiply (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.mul)

  (export "add" (func $add))
  (export "multiply" (func $multiply)))

JavaScript Usage:

javascript example

const wasm = await WebAssembly.instantiateStreaming(
  fetch('module.wasm')
);

const result1 = wasm.instance.exports.add(5, 3);      // 8
const result2 = wasm.instance.exports.multiply(4, 5); // 20

Performance Comparison

JavaScript vs WebAssembly

Task: Process 1M integers (sum)

JavaScript

Time: ~100ms

WebAssembly

Time: ~1ms

Speedup: 100x

WebAssembly Compilation Flow

C/C++ Source ↓ ┌──────────────┐ │ Clang/LLVM │ │ Frontend │ └──────────────┘ ↓ LLVM IR ↓ ┌──────────────┐ │ LLVM Wasm │ │ Backend │ └──────────────┘ ↓ WebAssembly Text (WAT) ↓ ┌──────────────┐ │ Wasm │ │ Assembler │ └──────────────┘ ↓ WebAssembly Binary (.wasm) ↓ Browser JIT/Interpreter ↓ Native Execution

Interview Q&A

Q: What is WebAssembly? A: WebAssembly is a binary bytecode format and instruction set designed for fast, safe, portable execution in web browsers. Code compiled to Wasm runs near-native speed.

Q: How does WebAssembly differ from JavaScript? A: JavaScript is interpreted/JIT-compiled dynamically. WebAssembly is pre-compiled binary bytecode. Wasm runs faster but JavaScript is more flexible.

Q: Is WebAssembly only for web? A: No. While designed for browsers, Wasm is portable and can run in serverless platforms, IoT devices, and standalone runtimes.

Q: How is memory managed in WebAssembly? A: WebAssembly has linear memory - a flat byte array. Code can allocate and free memory manually (like C) or through a garbage collector.

Q: What security model does WebAssembly use? A: WebAssembly runs in a sandbox with memory isolation. It cannot directly access system resources without going through browser APIs.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for WebAssembly Basics.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this Compiler Design topic.

Search Terms

compiler-design, compiler design, compiler, design, modern, technologies, webassembly, basics

Continue learning this concept

Modern Compiler TechnologiesBytecode and Virtual MachinesComprehensive guide to bytecode design, virtual machine architecture, and performance optimization Modern Compiler TechnologiesGCC ArchitectureIn-depth exploration of GNU Compiler Collection structure, intermediate representations, and optimization pipeline Modern Compiler TechnologiesJava Compiler and BytecodeDeep dive into Java compilation process, bytecode format, and JVM architecture Modern Compiler TechnologiesJust-In-Time CompilationComplete guide to JIT compilation, tiered compilation, adaptive optimization, and runtime code generation Modern Compiler TechnologiesLLVM: The Low-Level Virtual MachineComprehensive introduction to LLVM architecture, IR, optimizations, and how it powers modern compilers Modern Compiler TechnologiesPython Interpreter ArchitectureDeep exploration of Python compilation, bytecode, virtual machine, and execution model

PreviousPython Interpreter Architecture NextCalculator Compiler Project