WebAssembly (Wasm) 已成為提升 Web 應用程式效能的強大工具。讓我們透過將其與計算階乘的 JavaScript 進行比較並分析其執行速度來探索其潛力。

先決條件：

React 和 WebAssembly

任務：計算階乘

我們將在 JavaScript 和 WebAssembly 中實作階乘函數來比較它們的效率。數字 (n) 的階乘是所有小於或等於 n 的正整數的乘積。

JavaScript 階乘

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

WebAssembly 階乘 (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());
}

編譯為 WebAssembly
重擊

emcc factorial.c -o factorial.js

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);
}

效能比較
為了測量執行時間，我們將使用 JavaScript 的 Performance.now() 函數。

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");

結果：

Execution times:

JavaScript factorial: 10 ms
WebAssembly factorial: 2 ms

注意：為了準確比較，必須執行多次測試並計算平均值。另外，請考慮使用更大的輸入值來放大效能差異。

結果與分析
通常，在階乘運算等運算密集型任務中，WebAssembly 的效能優於 JavaScript。

效能提升取決於多個因素

• 低階操作：WebAssembly 的作業更接近機器碼，從而實現更有效率的執行。
• 編譯：JavaScript程式碼在執行時被解釋，而WebAssembly則編譯為二進位格式，導致執行速度更快。
• 記憶體管理：WebAssembly 通常對記憶體管理有更多的控制權，這可以提高效能。 但是，載入和初始化 WebAssembly 模組的開銷可能會影響較小運算的效能。

重要注意事項

• 開銷：WebAssembly 有一些與載入和初始化模組相關的開銷，這可能會抵消它對於非常簡單的計算的優勢。
• 複雜度：使用 WebAssembly 會增加開發過程的複雜性。
• 程式碼大小：WebAssembly 模組可能比等效的 JavaScript 程式碼更大，從而影響初始載入時間。

結論
雖然 WebAssembly 為計算繁重的工作負載提供了顯著的效能優勢，但權衡利弊至關重要。對於簡單的運算，使用 WebAssembly 的開銷可能無法證明效能提升的合理性。然而，對於複雜的演算法或即時應用程序，WebAssembly 可以改變遊戲規則。