Arbeiten mit WebAssembly und C++: Von A bis Z

Einführung in WebAssembly und C++

Die moderne Webentwicklung sucht ständig nach Möglichkeiten, die Leistung zu steigern. WebAssembly (Wasm) ist ein binäres Low-Level-Befehlsformat, das im Browser mit nahezu nativer Geschwindigkeit ausgeführt wird. In Kombination mit C++, einer der schnellsten und leistungsfähigsten Programmiersprachen, eröffnet Wasm neue Horizonte: von leistungsstarken Spielen und Simulationen bis hin zu komplexen Datenverarbeitungsalgorithmen direkt im Browser.

In diesem Artikel gehen wir den Weg von den Grundlagen bis zur praktischen Anwendung: Wir erklären, wie man C++-Code in WebAssembly kompiliert, im Browser ausführt und für maximale Leistung optimiert.

1. Werkzeuge und Umgebungseinrichtung

Das wichtigste Werkzeug zum Kompilieren von C++ in WebAssembly ist der Compiler-Suite Emscripten. Er übersetzt LLVM-Bytecode in Wasm und generiert automatisch den JavaScript-Glue-Code, der zum Laden des Moduls erforderlich ist.

Installation von Emscripten

Die empfohlene Installationsmethode ist über den Paketmanager emsdk:

# Repository klonen\ngit clone https://github.com/emscripten-core/emsdk.git\ncd emsdk\n\n# Neueste Version installieren und aktivieren\n./emsdk install latest\n./emsdk activate latest\n\n# Umgebungsvariablen hinzufügen (Shell-Variablen)\nsource ./emsdk_env.sh

Nach der Installation stehen Ihnen die Befehle emcc (Compiler) und em++ (C++-Compiler) zur Verfügung, die Wrapper um Clang sind.

2. Kompilierung von C++ in WebAssembly

Betrachten wir ein einfaches Beispiel. Erstellen wir eine Datei hello.cpp:

#include <emscripten/emscripten.h>\n\n// Funktion, die von JavaScript aus zugänglich ist\nextern "C" {\n    int EMSCRIPTEN_KEEPALIVE add(int a, int b) {\n        return a + b;\n    }\n}

Ein wichtiges Element ist das Makro EMSCRIPTEN_KEEPALIVE. Es verhindert, dass die Funktion vom Optimierer entfernt wird, und macht sie exportierbar.

Kompilieren wir unseren Code:

em++ hello.cpp -o hello.html -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -O3

Erklärung der Flags:

\n
• -o hello.html — erstellt eine HTML-Datei mit einem Beispielaufruf.
\n
• -s WASM=1 — explizite Angabe zur Generierung von Wasm (standardmäßig aktiviert).
\n
• -s EXPORTED_FUNCTIONS='["_add"]' — Liste der exportierten Funktionen (mit Präfix _).
\n
• -O3 — hohe Optimierungsstufe.
\n

Als Ergebnis erhalten wir drei Dateien: hello.html, hello.js (Glue-Code) und hello.wasm.

3. Interaktion mit JavaScript

Nach der Kompilierung können wir unsere C++-Funktion aus JavaScript aufrufen. Hier ist ein minimaler Code zum Laden des Moduls:

<!DOCTYPE html>\n<html>\n<head>\n    <script>\n        var Module = {};\n        Module.onRuntimeInitialized = function() {\n            // Die Funktion add ist jetzt verfügbar\n            var result = Module._add(5, 7);\n            console.log("Ergebnis: " + result); // 12\n        };\n    </script>\n    <script src="hello.js"></script>\n</head>\n<body></body>\n</html>

Wichtige Punkte:

\n
• Module.onRuntimeInitialized — Ereignis, das nach dem Laden des Wasm-Moduls ausgelöst wird.
\n
• Funktionsnamen in JS erhalten das Präfix _ (z. B. _add).
\n
• Zur Übergabe komplexer Datenstrukturen (Strings, Arrays) werden Module._malloc und Zeiger verwendet.
\n

Übergabe von Strings

Beispiel einer Funktion, die eine Begrüßung zurückgibt:

// C++-Code\nextern "C" {\n    const char* EMSCRIPTEN_KEEPALIVE greet(const char* name) {\n        static std::string msg = "Hallo, " + std::string(name) + "!";\n        return msg.c_str();\n    }\n}

In JavaS