WebAssembly (Wasm) est devenu un outil puissant pour améliorer les performances des applications Web. Explorons son potentiel en le comparant à JavaScript pour le calcul des factorielles et analysons leurs vitesses d'exécution.

Pré-requis :

Réagir et WebAssembly

La tâche : Calculer des factorielles

Nous implémenterons une fonction factorielle dans JavaScript et WebAssembly pour comparer leur efficacité. La factorielle d'un nombre (n) est le produit de tous les entiers positifs inférieurs ou égaux à n.

Factielle JavaScript

function factorialJS(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorialJS(n - 1);
}

WebAssembly Factorial (factorial.c)

#include 

int factorial(int n) {
  if (n == 0 || n == 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

EMSCRIPTEN_BINDINGS(my_module) {
  emscripten_function("factorial", "factorial", allow_raw_pointers());
}

Compilation vers WebAssembly
Frapper

emcc factorial.c -o factorial.js

Encapsuleur JavaScript

const Module = {
  // ... other necessary fields
};

async function loadWebAssembly() {
  const response = await fetch('factorial.wasm');
  const buffer = await response.arrayBuffer();
  Module.wasmBinary = new Uint8Array(buffer);
  await Module();
}

function factorialWasm(n) {
  return Module._factorial(n);
}

Comparaison des performances
Pour mesurer le temps d'exécution, nous utiliserons la fonction performance.now() de JavaScript.

JavaScript

function measureTime(func, ...args) {
  const start = performance.now();
  const result = func(...args);
  const end = performance.now();
  return { result, time: end - start };
}

// Usage:
console.log("Execution times:\n");

const jsResult = measureTime(factorialJS, 20);
console.log('JavaScript factorial:', jsResult.time, "ms");

// Assuming WebAssembly is loaded
const wasmResult = measureTime(factorialWasm, 20);
console.log('WebAssembly factorial:', wasmResult.time, "ms");

Résultat:

Execution times:

JavaScript factorial: 10 ms
WebAssembly factorial: 2 ms

Remarque : Pour des comparaisons précises, il est essentiel d'exécuter plusieurs tests et de calculer des moyennes. Pensez également à utiliser des valeurs d'entrée plus grandes pour amplifier les différences de performances.

Résultats et analyses
En règle générale, WebAssembly surpasse JavaScript dans les tâches à forte intensité de calcul telles que les calculs factoriels.

Le gain de performances est dû à plusieurs facteurs

• Opérations de niveau inférieur : WebAssembly fonctionne plus près du code machine, ce qui conduit à une exécution plus efficace.
• Compilation : le code JavaScript est interprété au moment de l'exécution, tandis que WebAssembly est compilé dans un format binaire, ce qui accélère l'exécution.
• Gestion de la mémoire : WebAssembly a souvent plus de contrôle sur la gestion de la mémoire, ce qui peut améliorer les performances. Cependant, la surcharge liée au chargement et à l'initialisation du module WebAssembly peut avoir un impact sur les performances des calculs plus petits.

Considérations importantes

• Overhead : WebAssembly a une certaine surcharge associée au chargement et à l'initialisation du module, ce qui pourrait annuler son avantage pour des calculs très simples.
• Complexité : l'utilisation de WebAssembly peut ajouter de la complexité au processus de développement.
• Taille du code : les modules WebAssembly peuvent être plus grands que le code JavaScript équivalent, ce qui a un impact sur les temps de chargement initiaux.

Conclusion
Bien que WebAssembly offre des avantages significatifs en termes de performances pour les charges de travail lourdes en termes de calcul, il est crucial de peser les compromis. Pour des calculs simples, la surcharge liée à l'utilisation de WebAssembly peut ne pas justifier les gains de performances. Cependant, pour les algorithmes complexes ou les applications en temps réel, WebAssembly peut changer la donne.