Was ist WebAssembly? Native Geschwindigkeit im Browser

01Was ist WebAssembly?

WebAssembly ist ein zweites Ausführungsformat, das Webbrowser neben JavaScript verstehen. Es wurde vom W3C standardisiert und läuft in allen großen Browsern wie Chrome, Firefox, Safari und Edge von Haus aus; Nutzer müssen nichts installieren.

Lassen Sie sich vom Wort »Assembly« nicht täuschen: Wasm schreibt man in der Regel nicht von Hand. Sie schreiben Ihren Code in einer gewohnten Sprache und wandeln ihn mit einem Compiler in eine .wasm-Datei um. Der Browser lädt diese kleine, kompakte Datei schnell herunter, validiert sie und führt sie als Maschinencode aus.

Die einfachste Antwort auf die Frage »Was ist Wasm?« lautet daher: ein portables, sicheres Kompilierungsziel, das die Performance von Desktop-Anwendungen in den Browser bringt.

02Wie funktioniert WebAssembly?

JavaScript kommt als Text an; der Browser parst ihn, interpretiert ihn und optimiert ihn zur Laufzeit. WebAssembly dagegen kommt bereits kompiliert an. Da die Typen feststehen und die Struktur strikt ist, kann der Browser es mit deutlich weniger Annahmen und vorhersehbarer Geschwindigkeit ausführen.

1. Der Entwickler schreibt den Code in einer Sprache wie C++, Rust, Go oder C#.
2. Die Compiler-Toolchain wandelt den Code in ein .wasm-Modul um.
3. Die Webseite lädt das Modul über JavaScript und startet es.
4. JavaScript ruft die Wasm-Funktionen auf und gibt die Ergebnisse an die Oberfläche weiter.

const { instance } = await WebAssembly.instantiateStreaming(
  fetch('/hesap.wasm')
);

console.log(instance.exports.topla(2, 3)); // 5

03Wasm vs. JavaScript: der Unterschied

Der Unterschied zwischen Wasm und JavaScript wird oft missverstanden. WebAssembly wurde nicht entwickelt, um JavaScript zu verdrängen, sondern um dort zu helfen, wo JavaScript an Grenzen stößt. Oberfläche, Ereignisverarbeitung und Seiteninteraktion bleiben die Aufgabe von JavaScript.

Den eigentlichen Gewinn bringt Wasm bei intensiven Berechnungen. Schneller ist es aber nicht für jede Aufgabe: Häufiger Datenaustausch zwischen JavaScript und Wasm verursacht zusätzlichen Aufwand. Bei kleinen Aufgaben kann dieser Aufwand den Vorteil zunichtemachen.

04Einsatzgebiete von WebAssembly

Die Einsatzgebiete von WebAssembly werden jedes Jahr breiter. Gemeinsam ist ihnen: Aufgaben, die im Browser früher unmöglich oder viel zu langsam waren, lassen sich nun ohne Installation erledigen.

Design- und Medientools

Professionelle Design-Anwendungen, Fotoeditoren und Video-Konverter im Browser lassen ihre rechenintensiven Kerne über Wasm laufen. So lässt sich zum Beispiel ein Video direkt im Browser komprimieren, ohne es auf einen Server hochzuladen.

Spiele, 3D und Simulation

Spiele-Engines können ihre Ausgabe nach Wasm kompilieren. In Kombination mit der neuen Grafik-Schnittstelle, die wir im Beitrag Was ist WebGPU? beschreiben, lassen sich im Browser konsolenähnliche Erlebnisse umsetzen.

Business-Anwendungen und Daten

Datenbanken im Browser, PDF-Verarbeitung, Verschlüsselung, CAD-Viewer und komplexe Rechenmaschinen profitieren von Wasm. Bestehender Desktop-Code lässt sich ohne Neuentwicklung ins Web bringen, sodass über Jahre gewachsene Bibliotheken erhalten bleiben.

Einsatz außerhalb des Browsers

Dank der Schnittstelle WASI kann Wasm auch auf dem Server, im Edge Computing und in Plugin-Systemen laufen. Die schlanke, isolierte Bauweise macht es zu einer attraktiven Wahl, um Plugins sicher auszuführen.

05In welchen Sprachen schreibt man Wasm?

Es gibt viele Sprachen, die sich nach Wasm kompilieren lassen, doch ihr Reifegrad ist unterschiedlich. Am häufigsten werden C/C++ und Rust gewählt. Rust sticht dank Speichersicherheit und Tooling-Unterstützung hervor; Details finden Sie im Beitrag Was ist Rust?.

• C und C++: ausgereifte, weit verbreitete Unterstützung über die Emscripten-Toolchain.
• Rust: bequeme Brücke zu JavaScript mit wasm-pack und wasm-bindgen.
• Go: Wasm-Ausgabe mit dem offiziellen Compiler; die Ausgabedatei ist vergleichsweise groß.
• C# / .NET: .NET-Anwendungen im Browser mit Blazor.
• AssemblyScript: für alle, die Wasm mit einer TypeScript-ähnlichen Syntax schreiben möchten.

cargo install wasm-pack
wasm-pack build --target web

06Performance: Wo liegt der echte Gewinn?

Wasm in eine Website einzubauen, macht die Seite nicht automatisch schneller. Bei einer Unternehmenswebsite oder einem Shop auf Basis eines Shopsystems sind die eigentlichen Bremsen meist große Bilder, überflüssige Skripte und die Antwortzeit des Servers. Solche Probleme lösen Sie mit einer Speed- und Performance-Optimierung, nicht mit Wasm.

Wasm glänzt dort, wo hohe Performance im Browser gefragt ist: Berechnungen mit Millionen Operationen pro Sekunde, Bildfilter, Komprimierung, Simulation. Hier kann der Gewinn erheblich sein; trotzdem sollten Sie nie ohne Messung entscheiden.

07Grenzen und Hinweise

WebAssembly ist ein leistungsstarkes Werkzeug, passt aber nicht zu jedem Projekt. Auch das Know-how im Team, die Fehlersuche und der Wartungsaufwand gehören in die Entscheidung.

• Die Fehlersuche ist aufwendiger als bei JavaScript; Source Maps sind nicht immer perfekt.
• Der Transport großer Datenmengen zwischen JavaScript und Wasm kann die Performance senken.
• Die Modulgröße kann je nach Sprache und verwendeten Bibliotheken wachsen.
• Im Team braucht es Entwickler, die die kompilierten Sprachen beherrschen.
• Auch kompilierte Module müssen getestet werden; die Ansätze aus unserem Beitrag Was ist Softwaretest? gelten hier ebenso.

08Bevor Sie Wasm in Ihr Projekt einbauen

Bevor Sie sich für WebAssembly entscheiden, sollten Sie das Problem richtig eingrenzen. Oft stammt das Gefühl von Langsamkeit nicht von Berechnungen, sondern von Netzwerkanfragen, großen Bundles oder unnötigem Neuzeichnen. Dann erhöht Wasm nur die Komplexität und löst das Problem nicht.

Der richtige Weg: zuerst den Engpass mit den Performance-Tools des Browsers finden und dann nur diesen Teil nach Wasm auslagern. Der Rest der Anwendung kann JavaScript oder TypeScript bleiben, sodass das Team weiter mit vertrauten Werkzeugen arbeitet.

1. Ermitteln Sie den Engpass durch Messen mit Profiling-Tools.
2. Halten Sie Ein- und Ausgaben des ausgelagerten Teils klein und eindeutig.
3. Bewahren Sie die JavaScript-Version derselben Aufgabe zum Vergleich auf.
4. Laden Sie das Modul nur bei Bedarf per Lazy Loading.
5. Testen Sie unter realen Nutzungsbedingungen auf älteren Geräten und mobil.

09Die Zukunft von WebAssembly

Der Standard reift jedes Jahr weiter, etwa durch Threads, SIMD-Befehle und Unterstützung für die Garbage Collection. Letztere hat den Weg dafür geebnet, dass auch Sprachen wie Java, Kotlin und Dart effizienter nach Wasm kompiliert werden können.

In naher Zukunft wird die Grenze zwischen Web- und Desktop-Anwendung weiter verschwimmen. Für Unternehmen heißt das: leistungsstarke Business-Anwendungen ohne Installation werden möglich. Die Oberfläche einer solchen Anwendung ist mindestens so wichtig wie ihre Engine; UI/UX-Design bestimmt hier das Nutzererlebnis.