WebAssembly (Wasm): Nahezu native Leistung im Browser

WebAssembly: Nativen Code im Browser ausführen

JavaScript ist für viele Dinge großartig, aber es wurde nicht für rechenintensive Aufgaben entwickelt. Wenn Sie eine Physik-Engine ausführen, Videos in Echtzeit verarbeiten oder Code im Browser kompilieren möchten, kann JavaScript zu langsam sein. WebAssembly (kurz Wasm) löst dieses Problem, indem es Ihnen ermöglicht, Code, der in Sprachen wie C++, Rust oder Go geschrieben wurde, direkt im Browser mit nahezu nativer Geschwindigkeit auszuführen.

Wie WebAssembly funktioniert

Sie schreiben Code in einer Sprache wie C++ oder Rust, kompilieren ihn in eine .wasm-Binärdatei und laden sie zusammen mit JavaScript in den Browser. Der Browser kompiliert diese Binärdatei in Maschinencode, genau wie eine native Anwendung. Das Ergebnis ist, dass rechenintensive Aufgaben viel schneller ausgeführt werden als äquivalentes JavaScript.

Die .wasm-Datei läuft in einer Sandbox-Umgebung — sie kann nicht direkt auf das DOM oder das Dateisystem zugreifen. Stattdessen kommuniziert sie über eine klar definierte Schnittstelle mit JavaScript. JavaScript ruft Funktionen auf, die vom WebAssembly-Modul exportiert werden, und das WebAssembly-Modul kann Funktionen aufrufen, die aus JavaScript importiert werden. Daten werden über einen gemeinsamen Speicherpuffer ausgetauscht.

Was kann man mit WebAssembly bauen?

Viele Dinge, die früher im Browser unmöglich oder unpraktisch waren, sind jetzt realisierbar. Bild- und Videoverarbeitung kann in Echtzeit erfolgen – FFmpeg.wasm führt die gesamte FFmpeg-Bibliothek im Browser aus. Kryptographiebibliotheken können mit nativer Geschwindigkeit arbeiten. 3D-Physik-Engines wie Box2D und Rapier treiben Spiele und Simulationen an. Maschinelle Lernmodelle können mit ONNX Runtime Web oder dem WASM-Backend von TensorFlow.js lokal Inferenzen durchführen.

Der vielleicht beeindruckendste Anwendungsfall ist die Ausführung ganzer Anwendungen im Browser. Sowohl Unity als auch Unreal Engine können Spiele nach WebAssembly exportieren und damit Konsolenqualität in den Browser bringen. AutoCAD läuft über WebAssembly im Browser. Und Tools wie SQLite, Figma und Google Earth haben bedeutende WebAssembly-Komponenten.

Erste Schritte

Der einfachste Weg, mit WebAssembly zu beginnen, hängt von Ihrer Sprache ab. Für C und C++ ist Emscripten die ausgereifteste Toolchain. Es kompiliert Ihren Code zu WebAssembly und stellt JavaScript-Klebecode bereit, der das Laden und die Speicherverwaltung übernimmt. Für Rust integriert sich wasm-pack in Cargo und generiert automatisch TypeScript-Bindungen. Für Go produziert TinyGo kleine WebAssembly-Binärdateien.

Für Leistung aktivieren Sie SIMD (Single Instruction Multiple Data) für parallele Operationen, verwenden Sie Web Workers, um WebAssembly außerhalb des Hauptthreads auszuführen, und kompilieren Sie Module mit WebAssembly.instantiateStreaming im Stream, damit sie schneller laden.

Die Zukunft: WebAssembly überall

WebAssembly ist nicht mehr nur für Browser. WASI (WebAssembly System Interface) standardisiert Systemaufrufe für Dateien, Netzwerke und Uhren und ermöglicht es WebAssembly, auf Servern, Edge-Geräten und sogar als universelles Plugin-Format ausgeführt zu werden. Das Komponentenmodell wird es WebAssembly-Modulen, die in verschiedenen Sprachen geschrieben sind, ermöglichen, nahtlos zusammenzuarbeiten. WebAssembly wird zu einer universellen Laufzeitumgebung für Code, unabhängig davon, wo er ausgeführt wird.