iX 5/2018
S. 120
Praxis
Webentwicklung
Aufmacherbild

WebAssembly – Bytecode für den Browser

Binär im Browser

Leistungshungrige Webanwendungen wie aufwendige Spiele, Simulationen oder Visualisierungen stoßen schnell an die Performancegrenzen von JavaScript. Mit WebAssembly lassen sich kritische Funktionen in C schreiben und vorkompilieren.

Schenkt man den Auswertungen von GitHub und StackOverflow Glauben, so ist JavaScript mittlerweile die am weitesten verbreitete Programmiersprache. Hinsichtlich der Performance ist JavaScript durch seine Just-in-Time-Kompilierung allerdings gegenüber vielen anderen Sprachen im Nachteil. Mit WebAssembly hält ein neuer Ansatz im Browser Einzug, der sowohl schnelleren als auch kompakteren Code für den Browser verspricht.

WebAssembly soll JavaScript jedoch nicht ersetzen. Vielmehr ist die neue Sprache als Ergänzung für Situationen gedacht, in denen es auf Performance ankommt, die nur mit Sprachen wie C oder C++ erreicht werden kann. Dieser Artikel bietet einen Überblick über die Möglichkeiten und auch Beschränkungen von WebAssembly in der täglichen Arbeit.

Bytecode für den Browser

WebAssembly oder kurz WASM speichert den Code eines Moduls als Bytecode. Dadurch sind die Module nicht nur kleiner als JavaScript-Module, sondern sie werden auch deutlich schneller und mit geringerem Bedarf an Arbeitsspeicher ausgeführt, als es bei JavaScript der Fall ist. Die WASM-Module lassen sich über standardisierte Schnittstellen in Webapplikationen integrieren. Diese erlauben eine bidirektionale Kommunikation zwischen JavaScript- und WASM-Code und sollen die Integrationshürde möglichst gering halten.

Applikationen und Module werden in der Regel nicht direkt in WebAssembly geschrieben, sondern in Sprachen wie C oder C++. Ein Compiler übersetzt den C-/C++-Code in WASM-Code, der schließlich im Browser läuft. Das Kompilieren passiert anders als bei JavaScript ahead of time, sodass der Browser nur noch mit dem kompilierten Code arbeitet. Zu Beginn der Entwicklung lag der Fokus klar auf C und C++. Mittlerweile wird an der Integration weiterer Sprachen wie Go oder Rust gearbeitet.

WASM ist ein offener Standard, den das W3C in seiner WASM Working Group entwickelt und den mittlerweile alle großen Browserhersteller implementieren. Dieses Bekenntnis der Hersteller zu einer Technik ist die Grundvoraussetzung für die Akzeptanz durch die Entwickler. Auf dem Desktop lässt sich WebAssembly in Edge, Firefox, Chrome und Safari nutzen, auf Mobilgeräten unter iOS in Safari und auf Android-Geräten in Chrome. Serverseitig kann man WASM in Node.js-Applikationen einbinden.

Mozillas interaktiver Zen-Garten zeigt, was mit WebAssembly im Browser möglich ist (Abb. 1).

WebAssembly empfiehlt sich dann, wenn JavaScript an Performancegrenzen stößt: wenn sehr viele umfangreiche Berechnungen in kurzer Zeit durchgeführt werden müssen oder wenn das Transfervolumen stark eingeschränkt ist. Im Browser ist der Einsatz von WASM für Virtual und Augmented Reality, Datenvisualisierung und Simulationen oder Spiele sinnvoll. Zwei prominente Beispiele für den Einsatz von WASM sind die Entwicklungsplattform Unity für Spiele sowie Epic Games, deren Unreal Engine WASM als Ausgabeformat beherrscht. Unter anderem zeigen die Demos Zen Garden von Mozilla und das nach WASM portierte Unity-Spiel Tanks eindrucksvoll, was sich mit WebAssembly erreichen lässt (siehe ix.de/ix1805120).

Der Vorgänger: asm.js

WASM ist nicht der erste Versuch, Programmcode im Browser zu beschleunigen. Ein Vorgänger von WebAssembly ist asm.js, ein Subset von JavaScript, das sich aufgrund von Einschränkungen der Syntax besser optimieren und sehr performant ausführen lässt. Zahlreiche Browserhersteller haben Erweiterungen für ihre JavaScript-Engines entwickelt, die eine solche Optimierung durchführen – Vorreiter waren die Mozilla-Entwickler mit ihrem Ahead-of-time-Compiler OdinMonkey. Auch hier wird der Quellcode in der Regel nicht direkt in asm.js geschrieben, sondern aus C- oder C++-Code mit einem Werkzeug wie Emscripten in asm.js umgewandelt.