chen
在現代網頁應用程式開發中，WebAssembly (簡稱 Wasm) 已成為一種不可或缺的技術。它是一種二進位指令集格式，旨在為瀏覽器提供高效執行性能。與傳統的 JavaScript 相比，Wasm 在運行速度上具有顯著優勢，這使得它在遊戲、圖形處理、科學計算以及需要高性能密集型任務的領域特別受歡迎。本文將探討如何使用 C 語言編寫代碼並將其轉換為 WebAssembly 模組，以及如何在網頁環境中整合這些模組，並與 JavaScript 進行互動。
C 到 WASM 的編譯過程
要將 C 語言代碼轉換為 WebAssembly 模組，我們可以使用 LLVM 和 Emscripten 工具鏈。LLVM 是個開源項目，提供了多平臺、多後端的編譯器和工具套件；而 Emscripten 則是一個工具鏈，專門用於將 C/C++ 代碼移植到 JavaScript 環境。以下是如何開始的基本步驟：
1. 設置開發環境 – 你必須先安裝必要的軟體，如 CMake、Node.js、NPM 等。然後通過 NPM 安裝 `emcc`（Emscripten 的 C 編譯器的別名）：
npm install emcc -g
2. 撰寫 C 代碼 – 創建一個基本的 “hello world” 示例：
#include <stdio.h>
int main() {
printf("Hello, World!\n");
return 0;
}
3. 配置 Makefile – 如果你熟悉 Makefiles，你可以自己建立一個。否則，Emscripten 有一個簡單的方法來生成一個模板文件：
emcmake cmake .
這會產生一個包含所有必要命令的 Makefile。
4. 編譯至 Wasm – 現在你可以使用 Makefile 來編譯你的 C 代碼了：
make build
這個命令應該會生成一個以 `.wasm` 結尾的可執行的 WebAssembly 檔案。
5. 嵌入 HTML 中 – 為了在你的網頁中使用這個 Wasm 模組，你需要將它嵌入一個 HTML 檔案中。通常，這涉及到使用 JavaScript API 來加載和初始化 Wasm 模組。
6. 與 JavaScript 互動 – 一旦 Wasm 模組被加載並且準備就緒，你可以從 JavaScript 代碼中訪問和使用其中的功能。Emscripten 提供了一個稱為 `Module` 的對象，它可以作為介面來傳送訊息給 Wasm 模組，並接收來自它的回覆。
7. 優化與部署 – 根據你的需求，你可能還需要進一步調整你的 Wasm 模組，例如使用洩漏記憶體模式而不是保留記憶體模式來減少檔案大小，或者利用 Closure Compiler 或其他的最佳化策略來提高執行效率。
C 與 JavaScript 的互操作性
由於 Wasm 是在沙箱環境中運行的，它無法直接存取宿主環境的所有功能。然而，Wasm 可以透過特定的 API 與 JavaScript 進行互動，這意味著你可以設計一個 Wasm 模組，使其能夠呼叫 JavaScript 函數，也可以接受來自 JavaScript 的呼叫。這種互操作性對於充分利用現有的 C 庫和框架非常重要。
1. 從 C 到 JavaScript 的傳遞資料
當你在 C 代碼中想要呼叫 JavaScript 時，你可以在 `emscripten_run_script()` 函數中指定 JavaScript 腳本。以下是如何從 C 代碼中呼叫一段 JavaScript 代碼的例子：
// In your C code:
emscripten_run_script("alert('This is a message from C code');");
2. 從 JavaScript to C 的傳遞數據
當你想要從 JavaScript 向 C 函數傳遞參數或是通知 C 函數某些事件發生時，你可以使用 `emscripten_async_wakeup()` 函數。這個函數會在指定的 C 函數中被喚醒。下面是如何在 JavaScript 中這樣做的示例：
// In your JavaScript code:
var wakeUpHandle = Module['wakeUp']; // Get the handle to the 'wakeUp' function in the wasm module
wakeUpHandle({message: 'Some event has occurred'}); // Pass data as an object literal
在 C 端，你需要定義一個函數來處理這些事件：
// In your C header file:
extern void emscripten_async_wakeup(void *data);
// Define this callback function that will be called when the async wakeup happens
void onEventOccurred(void *data) {
// Process the event here by accessing the passed-in data
const char *msg = (char*)data;
printf("Received event: %s\n", msg);
}
然後在 C 代碼中註冊這個函數以便在 Wasm 模組內部被喚醒：
// In your C source file:
EMSCRIPTEN_KEEPALIVE
void registerCallbacks() {
emscripten_async_wakeup(&onEventOccurred, strdup("onEventOccurred")); // Register the callback with a unique identifier
}
最後，確保在適當的時候調用 `registerCallbacks()` 函數：
// At the appropriate time in your C code:
registerCallbacks();
C 到 WASM 的最佳化
雖然 Wasm 已經比許多其他語言更有效率，但你仍然可能希望最大化你的 C 模組的效能表現。以下是一些常見的最佳化技巧：
1. 最小化檔案大小 – 盡量移除不必要的函式庫和頭檔案，避免引入不相關的相依性。此外，考慮使用 Emscripten 的 `–strip` 選項來移除未使用的代碼。
2. 記憶體管理 – 選擇合適的記憶體模式，比如洩漏記憶體模式 (`-s LEGACY_AND_STATIC_MODE=1`) 可能在某些情況下有助於縮小檔案大小。
3. 使用 Proxy 物件 – 如果 C 模組需要大量且頻繁地讀取或更新陣列中的元素，使用 Proxy 物件可能有幫助，因為它們可以更快地存取陣列。
4. 避免全域變數 – 全域變數會增加全域命名空間的大小，並可能影響執行速度。如果可能，請嘗試限制全域變數的使用。
5. 測試在不同環境下的行為 – 在不同的瀏覽器和設備上測試你的 Wasm 模組的行為，確保它能在各種條件下正常工作。
總之，將 C 語言代碼轉換為 WebAssembly 模組並與 JavaScript 互動是一個複雜但富有成效的過程。瞭解這些概念和實踐將使你能夠有效地將高性能 C 代碼帶入網頁世界。
