WebAssembly (Wasm) : performances quasi natives dans le navigateur

WebAssembly : exécuter du code natif dans le navigateur

JavaScript est excellent pour beaucoup de choses, mais il n'a pas été conçu pour les calculs lourds. Si vous voulez exécuter un moteur physique, traiter de la vidéo en temps réel ou compiler du code dans le navigateur, JavaScript peut être trop lent. WebAssembly (Wasm en abrégé) résout ce problème en vous permettant d'exécuter du code écrit dans des langages comme C++, Rust ou Go directement dans le navigateur, à une vitesse quasi native.

Comment fonctionne WebAssembly

Vous écrivez du code dans un langage comme C++ ou Rust, vous le compilez en un fichier binaire .wasm, et vous le chargez dans le navigateur aux côtés de JavaScript. Le navigateur compile ce binaire en code machine, comme une application native. Le résultat est que les tâches intensives en calcul s'exécutent beaucoup plus rapidement que l'équivalent JavaScript.

Le fichier .wasm s'exécute dans un environnement sandboxé — il ne peut pas accéder directement au DOM ou au système de fichiers. Au lieu de cela, il communique avec JavaScript via une interface bien définie. JavaScript appelle des fonctions exportées par le module WebAssembly, et le module WebAssembly peut appeler des fonctions importées depuis JavaScript. Les données sont partagées via un tampon mémoire partagé.

Que pouvez-vous construire avec WebAssembly ?

Beaucoup de choses qui étaient auparavant impossibles ou peu pratiques dans le navigateur sont désormais réalisables. Le traitement d'images et de vidéos peut se faire en temps réel — FFmpeg.wasm exécute la bibliothèque FFmpeg complète dans le navigateur. Les bibliothèques de cryptographie peuvent fonctionner à vitesse native. Les moteurs physiques 3D comme Box2D et Rapier alimentent des jeux et des simulations. Les modèles d'apprentissage automatique peuvent exécuter des inférences localement en utilisant ONNX Runtime Web ou le backend WASM de TensorFlow.js.

Le cas d'utilisation le plus impressionnant est peut-être l'exécution d'applications entières dans le navigateur. Unity et Unreal Engine peuvent tous deux exporter des jeux vers WebAssembly, apportant des jeux de qualité console au navigateur. AutoCAD s'exécute dans le navigateur via WebAssembly. Et des outils comme SQLite, Figma et Google Earth ont des composants WebAssembly significatifs.

Pour commencer

La façon la plus simple de commencer avec WebAssembly dépend de votre langage. Pour C et C++, Emscripten est la chaîne d'outils la plus mature. Il compile votre code en WebAssembly et fournit du code de colle JavaScript qui gère le chargement et la gestion de la mémoire. Pour Rust, wasm-pack s'intègre à Cargo et génère automatiquement des liaisons TypeScript. Pour Go, TinyGo produit de petits binaires WebAssembly.

Pour les performances, activez SIMD (Single Instruction Multiple Data) pour les opérations parallèles, utilisez Web Workers pour exécuter WebAssembly hors du thread principal, et compilez en streaming les modules à l'aide de WebAssembly.instantiateStreaming pour qu'ils se chargent plus rapidement.

L'avenir : WebAssembly partout

WebAssembly n'est plus réservé aux navigateurs. WASI (WebAssembly System Interface) standardise les appels système pour les fichiers, le réseau et les horloges, permettant à WebAssembly de s'exécuter sur des serveurs, des périphériques périphériques et même comme format de plugin universel. Le modèle de composants permettra aux modules WebAssembly écrits dans différents langages d'interopérer de manière transparente. WebAssembly devient un runtime universel pour le code, quel que soit l'endroit où il s'exécute.