Arbeiten mit WebAssembly und C++: Vollständiger Leitfaden für Entwickler

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Einführung in WebAssembly und C++

Die moderne Webentwicklung erfordert zunehmend mehr Leistung, insbesondere für Aufgaben wie Bildverarbeitung, 3D-Grafik, Simulationen und Kryptographie. WebAssembly (WASM) ist ein binäres Low-Level-Anweisungsformat, das im Browser mit nahezu nativer Geschwindigkeit ausgeführt wird. Es ermöglicht die Nutzung der Leistungsfähigkeit von C++ in der Webumgebung und eröffnet Entwicklern neue Horizonte.

In diesem Artikel werden wir behandeln, wie man C++-Code in WebAssembly kompiliert, die Umgebung mit Emscripten einrichtet, das WASM-Modul in JavaScript integriert und die Leistung optimiert. Sie werden erfahren, warum C++ eine der besten Sprachen für die Erstellung leistungsstarker Webanwendungen bleibt.

Was ist WebAssembly und warum braucht ein C++-Entwickler es?

WebAssembly ist eine virtuelle Maschine, die im Browser läuft. Im Gegensatz zu JavaScript ist WASM ein binärer Code, der aus C, C++, Rust oder anderen Sprachen kompiliert wird. Die Hauptvorteile sind:

Leistung — WASM ist bei rechenintensiven Aufgaben 10-50 Mal schneller als JavaScript.
Portabilität — Derselbe Code funktioniert in Chrome, Firefox, Safari und Edge ohne Änderungen.
Sicherheit — WASM läuft in einer isolierten Sandbox ohne direkten Systemzugriff.
C++-Ökosystem — Sie können vorhandene Bibliotheken (OpenCV, TensorFlow Lite, SQLite) im Web wiederverwenden.

C++ ist aufgrund seiner effizienten Speicherverwaltung, des Fehlens eines Garbage Collectors und des umfangreichen Tool-Sets ideal für WebAssembly geeignet. Beispielsweise verwendet die Unity-Engine WASM zum Rendern von 3D-Szenen direkt im Browser.

Einrichtung der Umgebung: Emscripten und Kompilierung von C++ in WASM

Das wichtigste Werkzeug zum Kompilieren von C++ in WebAssembly ist Emscripten. Es enthält den Compiler emcc, der C++-Code in eine .wasm-Datei und einen JavaScript-Wrapper zum Laden umwandelt.

Installation von Emscripten

# Repository klonengit clone https://github.com/emscripten-core/emsdk.gitcd emsdk

# Neueste Version installieren./emsdk install latest./emsdk activate latest

# Umgebungsvariablen hinzufügensource ./emsdk_env.sh

Überprüfen Sie nach der Installation die Funktion mit dem Befehl emcc --version.

Erstes Beispiel: "Hello, WASM!"

Erstellen wir eine einfache C++-Funktion, die zwei Zahlen addiert:

// hello.cpp#include <emscripten.h>

extern "C" {    int EMSCRIPTEN_KEEPALIVE add(int a, int b) {        return a + b;    }}

Wichtiger Punkt: Das Makro EMSCRIPTEN_KEEPALIVE verhindert das Entfernen der Funktion bei der Optimierung. Kompilieren wir den Code:

emcc hello.cpp -o hello.html -s EXPORTED_FUNCTIONS="['_add']" -s EXPORTED_RUNTIME_METHODS="['ccall', 'cwrap']"

Das Flag -o hello.html erstellt eine HTML-Datei mit einem Anwendungsbeispiel. Öffnen Sie diese im Browser und rufen Sie Module.ccall('add', 'number', ['number', 'number'], [5, 3]) auf — das Ergebnis ist 8.

Integration von C++-Code mit JavaScript

Nach der Kompilierung erhalten Sie die Dateien .wasm und .js. Betrachten wir, wie man C++-Funktionen aus JavaScript aufruft.

Basierender Aufruf über ccall/cwrap

// Im HTML nach dem Laden des Skripts:Module.onRuntimeInitialized = function() {    const add = Module.cwrap('add', 'number', ['number', 'number']);    console.log('Ergebnis:', add(10, 20)); // 30};

Die Methode cwrap erstellt einen Wrapper für die Funktion, der wie eine normale JS-Funktion aufgerufen werden kann. Datentypen: 'number', 'string', 'array'.