🧩 Visuelle Erklärung

WebAssembly – wie es innen funktioniert

Ein kompaktes Binärformat für eine sichere, portable Stack-Maschine: im Browser neben JavaScript, auf dem Server, am Edge und als Plugin-Sandbox. Hier siehst du jedes Byte, jeden Stack-Schritt und jeden Aufruf über die Grenze zu JavaScript.

🔢 Bytes erkunden🐞 Debugger starten

❓Was ist WebAssembly?

📚 Eine Stack-Maschine

Befehle nehmen Operanden vom Stack und legen Ergebnisse ab. Kein Register, keine Adressen von Code – das macht Validierung und schnelle Übersetzung in Maschinencode einfach.

💾 Binär und Text

.wasm ist das kompakte Binärformat, .wat die gleichwertige Textform zum Lesen und Schreiben.

🔒 Sandbox

Ein Modul sieht nur seinen eigenen linearen Speicher und das, was der Host importiert. Kein Dateisystem, kein Netz, kein DOM – außer es wird ausdrücklich hineingereicht.

🌍 Überall

In allen großen Browsern, in Node.js und Deno, in eigenständigen Laufzeiten wie Wasmtime und Wasmer, auf Edge-Plattformen wie Cloudflare Workers.

📚add(7, 5) auf der Stack-Maschine

Vom eigenen Interpreter berechnet – jeder Kasten ist der Zustand nach einem Befehl.
Aufruf
Stack leer
Locals: $a=7, $b=5
local.get 0
7
Locals: $a=7, $b=5
local.get 1
7
5
Locals: $a=7, $b=5
i32.add
12
Locals: $a=7, $b=5
end
12
Locals: –

🛡️Das Sicherheitsmodell

┌─────────────── Host (Browser / Wasmtime) ────────────────┐
│                                                          │
│  Importe ──►  ┌──────────── Wasm-Instanz ────────────┐   │
│  (nur, was    │ Funktionen – vorab validiert         │   │
│  der Host     │ Aufruf-Stack – nicht adressierbar    │   │
│  hergibt)     │ linearer Speicher: Byte 0 … n−1      │   │
│               │  └ jeder Zugriff geprüft, sonst Trap │   │
│  Exporte ◄──  └──────────────────────────────────────┘   │
│                                                          │
└──────────────────────────────────────────────────────────┘
💡 Validierung vor der Ausführung
Jede Funktion wird vor dem Start typgeprüft: Stack-Höhe und Typen stimmen an jeder Stelle, Sprünge gehen nur zu umschließenden Labels.
💡 Linearer Speicher statt Zeiger in den Host
Adressen sind Indizes in ein eigenes Byte-Array (Seiten à 64 KiB). Ein Zugriff außerhalb löst einen Trap aus – er kann nie Speicher des Browsers treffen.
⚠️ Was die Sandbox nicht leistet
Innerhalb des linearen Speichers sind Pufferüberläufe möglich (z. B. in übersetztem C-Code) – sie beschädigen die Daten des Moduls selbst, nicht den Host. Seitenkanäle wie Spectre betreffen Wasm genauso wie JavaScript.

🆚JavaScript, asm.js und WebAssembly

JavaScriptasm.js (2013)WebAssembly
FormatQuelltextQuelltext (Teilmenge von JS)Binärformat (+ Textformat WAT)
Typendynamischper Konvention: x|0 = int, +x = doublestatisch: i32, i64, f32, f64, v128, Referenzen
Ladenparsen, interpretieren, JITparsen; optimierende Engines übersetzen vorabdekodieren + validieren, Streaming-Kompilierung
64-Bit-Ganzzahlennur BigIntneini64 nativ
SpeicherObjekte mit GCein ArrayBuffer als Heaplinearer Speicher, seit 3.0 optional WasmGC
Rückwärtskompatibel–läuft in jeder JS-Enginebraucht Wasm-Unterstützung
Typischer EinsatzUI, Web-Logikhistorisch: C/C++ im Web (Emscripten)rechenintensive Kerne, portierter Code, Sandboxing

WebAssembly ergänzt JavaScript, statt es zu ersetzen: DOM-Zugriffe laufen weiterhin über JavaScript (Importe).

🧭Kapitel

🔢

Binärformat Byte für Byte

Magic, Version, Sections, LEB128 – Hex-Explorer für Beispiele und eigene .wasm-Dateien.

🔀

WAT ↔ Binär

Textformat links, Bytes rechts, Zuordnung per Hover. Übersetzt mit wat2wasm direkt im Browser.

🐞

Stack-Maschinen-Debugger

Operanden-Stack, Locals, Call-Frames und Speicher Schritt für Schritt – verglichen mit der echten Engine.

🤝

JavaScript-Interop

instantiate, Imports/Exports, Strings im linearen Speicher, Tabellen, Performance-Messung.

🧰

Toolchains, WASI & Komponenten

Rust, C/C++, AssemblyScript, Go, Kotlin, Blazor – und WASI 0.2/0.3 mit WIT als Diagramm.

📜

Standard & Feature-Status

Was steckt in Wasm 2.0 und 3.0? Unterstützung in Browsern und Laufzeiten, mit Quellen.