WebAssembly Cheat Sheet
Covers core WebAssembly concepts, compiling Rust to Wasm, calling Wasm functions from JavaScript, and when Wasm actually outperforms JS.
2 PagesAdvancedMar 10, 2026
Core WebAssembly Concepts
The building blocks of the Wasm execution model.
- Wasm module- Portable binary instruction format (.wasm) compiled from Rust, C/C++, Go, etc.
- Linear memory- A single contiguous, resizable ArrayBuffer that Wasm code reads/writes as its heap
- Sandbox- Wasm executes in a memory-safe sandbox isolated from the host, same-origin policy still applies
- Imports/Exports- Modules declare functions/memory they need from JS and expose functions to JS
- WASI- WebAssembly System Interface — standardizes OS-like capabilities for non-browser Wasm runtimes
- Near-native speed- Ahead-of-time validated bytecode runs close to native speed for CPU-bound work
Compiling Rust to Wasm
A wasm-bindgen function, built with wasm-pack.
rust
// lib.rsuse wasm_bindgen::prelude::*;#[wasm_bindgen]pub fn fibonacci(n: u32) -> u64 { match n { 0 => 0, 1 => 1, _ => { let (mut a, mut b) = (0u64, 1u64); for _ in 2..=n { let c = a + b; a = b; b = c; } b } }}// Build with wasm-pack (produces .wasm + JS glue code)// $ wasm-pack build --target web
Loading & Calling Wasm from JavaScript
Two ways to load a module: raw and via wasm-bindgen glue.
javascript
// Loading a hand-written/compiled .wasm module directlyconst { instance } = await WebAssembly.instantiateStreaming( fetch('module.wasm'), { env: { log: (val) => console.log('from wasm:', val) } } // imports);const result = instance.exports.add(2, 3); // call an exported function// Loading a wasm-bindgen (Rust) packageimport init, { fibonacci } from './pkg/my_module.js';await init(); // loads and instantiates the .wasm binaryconsole.log(fibonacci(20)); // 6765
When to Use WebAssembly
Where Wasm actually pays off versus plain JS.
- CPU-intensive computation- Image/video processing, physics simulations, cryptography, codecs
- Porting existing native code- Reuse mature C/C++/Rust libraries (e.g. ffmpeg, SQLite) in the browser
- Games and 3D engines- Unity and Unreal can export to WebAssembly for browser-based games
- Not a DOM replacement- Wasm has no direct DOM access; it still needs JS glue code to touch the page
- Sandboxed plugin execution- Run untrusted third-party code safely (e.g. serverless edge functions, plugins)
Pro Tip
WebAssembly isn't automatically faster than JavaScript for everything — startup/compile overhead and the JS-to-Wasm call boundary can outweigh gains for small, simple functions. Reach for it for sustained, heavy CPU-bound work, not routine logic.
Was this cheat sheet helpful?
Explore Topics
#WebAssembly#WebAssemblyCheatSheet#WebDevelopment#Advanced#CoreWebAssemblyConcepts#CompilingRustToWasm#Loading#Calling#Functions#CheatSheet#SkillVeris
