WebAssembly Architecture – How Wasm Works Under the Hood

WebAssembly Concepts and basics

Binary Format vs. Text Format

WebAssembly has two faces: the binary format and the text format.

The binary format is the real deal. It’s what the browser actually runs. Think of it as the sleek, compact version of WebAssembly—optimized for speed and size. It’s fast to download and quick to execute, which is why it’s the one that gets used in production.

Then there’s the text format, also called WAT (WebAssembly Text). This is the version that’s easier for humans to read. It looks a bit like assembly language but less scary. Developers use it for learning, debugging, or tweaking code because it’s much clearer than staring at raw binary. But don’t expect it to perform well—it’s not meant for actual execution.

Stack-based Architecture

WebAssembly uses a stack-based architecture, which sounds fancy but is simple when you break it down. Instead of having registers (like CPUs), it uses a stack. Instructions in Wasm push values onto the stack, manipulate them, and then pop them off when they’re done.

Here’s an example: Let’s say you want to add two numbers. The instructions would look like this:

1. Push the first number onto the stack.

2. Push the second number.

3. Run the “add” instruction, which takes the two numbers, adds them, and puts the result back on the stack.

Sandbox Security

One of the coolest things about WebAssembly is how secure it is. Every WebAssembly module runs in a sandbox. That means it’s isolated from the rest of the system—it can’t mess with your files, your browser, or your OS. For example, even if someone tries to sneak malicious code into a Wasm file, the browser won’t let it access anything it’s not supposed to.

The Lifecycle of Webassembly

So, how does WebAssembly go from code to something the browser can run? It’s a three-step process: compilation, loading, and execution.

Compilation

Usually, you’ll write code in a language like C, C++, or Rust. Then, you’ll use a tool like Emscripten or wasm-pack to compile that code into WebAssembly’s binary format. This step happens before anything hits the browser. Think of it like baking a cake: You prepare all the ingredients (your code) and then bake it (compile it) into something the browser can actually serve.

Loading Process in the Browser

When you load a web page that uses WebAssembly, the browser grabs the .wasm file and does two things:

1. Validates it to make sure it’s safe and not corrupted.

2. Compiles it to machine code. Modern browsers do this lightning-fast, so it’s almost seamless for users.

If you’ve used JavaScript before, you know that it gets parsed and interpreted. WebAssembly skips all that overhead, which is why it’s much faster.

Execution

Once the WebAssembly module is compiled, the browser can execute it directly. Here’s a quick visual representation of the steps: