Rendre WebAssembly plus rapide et léger

WebAssembly est déjà rapide, mais il est possible de l’optimiser pour qu’il se charge plus vite et utilise moins de ressources. Un fichier .wasm trop gros peut ralentir une application, alors il est important de réduire sa taille et d’accélérer son chargement. Voici comment on peut rendre WebAssembly encore plus performant.

Réduire la taille des fichiers .wasm

Lorsqu’on compile un programme en WebAssembly, le fichier .wasm peut contenir du code inutile qui l’alourdit. Pour éviter ça, il faut compiler en mode optimisé. Par exemple, si on utilise Emscripten pour compiler du C en WebAssembly, on peut ajouter des options pour optimiser la taille du fichier :

emcc -O3 add.c -o add.wasm -s EXPORTED_FUNCTIONS="['_add']"

Le -O3 active les meilleures optimisations et l’option EXPORTED_FUNCTIONS permet de ne garder que les fonctions nécessaires. En Rust, on peut aussi compiler en mode optimisé avec :

cargo build --release --target wasm32-unknown-unknown

Après la compilation, on peut encore réduire la taille du fichier .wasm en utilisant wasm-opt, un outil qui nettoie et optimise le code WebAssembly. Pour l’utiliser, il suffit d’exécuter cette commande :

wasm-opt -O3 add.wasm -o add_optimized.wasm

Accélérer le chargement de WebAssembly

Même si WebAssembly est rapide, il peut être ralenti si le fichier .wasm est trop lourd ou mal chargé. Une première solution est d’activer la mise en cache. Au lieu de télécharger le fichier .wasm à chaque visite, on peut le stocker en mémoire pour qu’il soit réutilisé plus rapidement.

async function loadWasm() {
    let cachedModule = localStorage.getItem('wasm_cache');
    
    if (cachedModule) {
        return WebAssembly.instantiate(cachedModule);
    } else {
        const response = await fetch('add.wasm');
        const bytes = await response.arrayBuffer();
        localStorage.setItem('wasm_cache', bytes);
        return WebAssembly.instantiate(bytes);
    }
}

Avec cette méthode, le fichier .wasm ne sera téléchargé qu’une seule fois, ce qui permet un chargement plus rapide lors des prochaines visites. Une autre méthode efficace est le chargement en streaming. Plutôt que d’attendre que tout le fichier soit téléchargé avant de commencer son exécution, WebAssembly peut être chargé et exécuté en même temps grâce à cette commande en JavaScript :

WebAssembly.instantiateStreaming(fetch('add.wasm'))
  .then(result => {
      console.log(result.instance.exports.add(10, 5));
  });

Cela réduit le temps d’attente et permet d’exécuter WebAssembly plus rapidement, surtout pour les fichiers volumineux.

Améliorer l’exécution de WebAssembly

Une fois que WebAssembly est chargé, il est aussi important d’optimiser son exécution. Si le fichier .wasm contient des fonctions inutiles, cela peut ralentir l’application. Pour éviter ça, on peut configurer la compilation pour ne garder que le code essentiel. En C/C++, l’option --no-entry permet par exemple de supprimer tout ce qui n’est pas utilisé.

Un autre point clé est de réduire les interactions entre WebAssembly et JavaScript. Chaque fois que JavaScript appelle une fonction WebAssembly, cela prend du temps. Il vaut mieux limiter le nombre d’appels pour accélérer l’exécution.

Voici un exemple moins efficace où JavaScript appelle WebAssembly beaucoup trop souvent :

for (let i = 0; i < 1000; i++) {
    wasmModule.instance.exports.add(i, i + 1);
}

Dans ce cas, JavaScript envoie 1000 requêtes à WebAssembly, ce qui est lent. Une solution plus rapide est de regrouper ces appels en une seule fonction WebAssembly :

wasmModule.instance.exports.addBatch(1000);

Avec cette méthode, WebAssembly effectue tous les calculs en une seule fois, ce qui accélère considérablement l’exécution du programme.

Conclusion

Même si WebAssembly est déjà performant, il peut être encore amélioré en optimisant sa taille, son chargement et son exécution. En appliquant ces techniques, on obtient des fichiers .wasm plus légers, un chargement plus rapide et une meilleure fluidité dans l’application.

Références

"The Six Ways of Optimizing WebAssembly", InfoQ, consulté le 28 février 2025, https://www.infoq.com/articles/six-ways-optimize-webassembly/

"The Science of WebAssembly Performance", Hybrow Labs, consulté le 28 février 2025, https://hybrowlabs.com/blog/optimizing-webassembly-performance-tips-and-tricks

"Calls between JavaScript and WebAssembly are finally fast", Mozilla Hacks, consulté le 28 février 2025, https://hacks.mozilla.org/2018/10/calls-between-javascript-and-webassembly-are-finally-fast-%F0%9F%8E%89/