Articles
JavaScript 簡介
JavaScript 和 WebAssembly

JavaScript 和 WebAssembly

本文解釋了 JavaScript 和 WebAssembly。

我們將解釋 WebAssembly 的基礎知識，並深入探討 JavaScript 與 WebAssembly 之間的關係，以及它們的使用案例。

YouTube Video

JavaScript 和 WebAssembly

JavaScript 和 WebAssembly（Wasm）是網頁開發中至關重要的技術。兩者各有不同的角色，但結合在一起能夠互相補充，從而實現更快、更高效的網頁應用程序。

什麼是 WebAssembly？

WebAssembly 是一種二進制指令格式，可在瀏覽器中執行，由編譯高級語言（如 C、C++ 和 Rust）生成。WebAssembly 的執行速度遠快於 JavaScript，使網頁應用程序的性能可與原生應用媲美。

WebAssembly 的特性

  • 高效能 由於它被編譯為二進位格式，執行速度非常快，並在 CPU 密集型任務上表現出色。
  • 語言無關 可從 C、Rust 等編譯型語言產生 WebAssembly，讓現有的原生程式碼更容易移植到 Web。
  • 廣泛相容性 Chrome、Safari 等主流瀏覽器均支援 WebAssembly。

JavaScript 與 WebAssembly 的整合

WebAssembly 並非 JavaScript 的替代品，而是互補的技術。JavaScript 擅長 UI 操作與網路通訊，而 WebAssembly 則負責計算密集型任務。結合兩者即可同時兼顧效能與彈性。

調用 WebAssembly

可以從 JavaScript 調用 WebAssembly 模組。JavaScript 可以訪問 WebAssembly 模組的記憶體和函數，從而實現將複雜的處理交由 WebAssembly 執行，並将結果傳遞給 JavaScript 進行處理的場景。

以下是一個從 JavaScript 加載 WebAssembly 模組的基本範例。

1// Fetch and initialize the WebAssembly module
2fetch('module.wasm')
3    .then(response => response.arrayBuffer())
4    .then(bytes => WebAssembly.instantiate(bytes, {}))
5    .then(results => {
6        const instance = results.instance;
7        // Example: Call the add function
8        console.log(instance.exports.add(10, 20));
9    });

在此範例中，會抓取一個 .wasm 檔案，並將其二進位資料傳遞至 WebAssembly.instantiate 函數進行實例化。您可以從 JavaScript 調用已實例化的 WebAssembly 模組的匯出函數並取得結果。

從 JavaScript 使用 WebAssembly 的範例

接下來，我們來看看一個如何調用在 WebAssembly 中執行快速整數加法函數的簡單範例。首先，我們使用 C 語言建立一個簡單函數，並將其編譯為 WebAssembly。

1// add.c
2int add(int a, int b) {
3    return a + b;
4}

使用 Emscripten（將 C/C++ 轉換為 WebAssembly 的工具）編譯此檔案。

1emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.wasm --no-entry

然後從 JavaScript 調用此函數以獲取結果。

1fetch('http://localhost:3000/add.wasm')
2    .then(response => response.arrayBuffer())
3    .then(bytes => WebAssembly.instantiate(bytes, {}))
4    .then(results => {
5        const { add } = results.instance.exports;
6        console.log(add(5, 7)); // 12
7    });

透過這種方式，計算過程可以在 WebAssembly 中執行，而結果則可以在 JavaScript 中進一步處理。WebAssembly 非常適合影片處理、物理模擬等計算量龐大的工作負載，帶來單靠 JavaScript 難以達到的效能。

WebAssembly 的實際使用場景

WebAssembly 在以下場景中特別有用：。

  1. 遊戲開發 WebAssembly 提供瀏覽器端遊戲所需的高速運算。您可以在 WebAssembly 中實現物理計算和高級圖形渲染引擎，同時使用 JavaScript 處理互動部分。

  2. 影片與音訊處理 大規模媒體處理—如影片編解碼與即時音訊效果—同樣能受惠於 WebAssembly 的效能提升。

  3. 科學計算 計算密集的模擬與資料分析也能透過 WebAssembly 大幅加速。範例包括數值分析和執行機器學習模型。

  4. 移植現有原生應用程式 透過 WebAssembly，可在瀏覽器中執行以 C 或 Rust 撰寫的現有原生程式碼。這使您可以利用現有的軟體資產，並將它們作為網頁應用程式提供。

WebAssembly 的限制與挑戰

WebAssembly 非常強大，但同時也存在一些限制和挑戰。

  • 有限的 DOM 存取 WebAssembly 本身無法直接存取 DOM。JavaScript 作為中介，讓 WebAssembly 專注於高效能計算。
  • 除錯困難 由於 WebAssembly 是二進位格式，相較於 JavaScript，除錯更為困難。瀏覽器開發工具確實支持調試 WebAssembly，但它不像調試 JavaScript 那樣直觀。
  • 學習曲線 使用 WebAssembly 需要具備 C、Rust 等編譯型語言的知識。如果您不熟悉這些語言，學習 WebAssembly 的門檻可能會更高。

總結

WebAssembly 作為對 JavaScript 彈性的補充，讓瀏覽器具備接近原生的效能。讓 JavaScript 負責 UI 與動態互動，而 WebAssembly 負責計算，即可最大化發揮兩者的優勢。通過結合這兩者，可以實現更快速和更先進的網頁應用程式開發。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

JavaScript 中的 SharedArrayBufferJavaScript 和 WebGL