使用 JavaScript 的 Web 組裝 (Wasm)
- PHPz轉載
- 2023-09-01 23:49:061305瀏覽
您是否想過是否可以在不犧牲 JavaScript 提供的可移植性和安全性的情況下在 Web 上執行高效能應用程式？好吧，別再好奇了！隨著 WebAssembly (Wasm) 的引入，現在可以為 Web 應用程式帶來類似本機的效能，同時仍利用 JavaScript 的強大功能。在本文中，我們將探討 WebAssembly 的基礎知識以及如何將其與 JavaScript 一起使用來解鎖一個充滿可能性的新世界。
什麼是 WebAssembly (Wasm)？
WebAssembly，通常稱為 Wasm，是一種專為 Web 瀏覽器設計的二進位指令格式。它是一種低階虛擬機，能夠以接近本機的速度執行程式碼。 Wasm 是 Mozilla、Google、Microsoft 和 Apple 等主要瀏覽器供應商合作開發的成果，其目標是將高效能應用程式引入網路。
WebAssembly 的主要優勢之一是它與多種程式語言相容，使其成為 Web 開發的通用解決方案。你可以用C 、Rust甚至TypeScript等語言編寫程式碼，然後將其編譯為Wasm二進位格式，可以直接在瀏覽器中執行。
將 WebAssembly 與 JavaScript 整合
WebAssembly 為 Web 開發帶來了許多好處。它允許開發人員以接近本機的速度執行運算密集型任務，使其適合需要高效能執行的應用程式。透過利用 WebAssembly，開發人員可以將用 C 、Rust 或 TypeScript 等語言編寫的現有程式碼庫移植到 Web，而無需犧牲效能。
WebAssembly 與 JavaScript 的整合可實現兩種語言之間的無縫互動。 JavaScript 充當橋樑，為使用 WebAssembly 模組提供方便的介面。這使得開發人員能夠將 WebAssembly 的強大功能與 JavaScript 程式庫和框架的豐富生態系統和靈活性結合起來。
儘管 WebAssembly 是一項獨立技術，但它可以與 JavaScript 無縫集成，從而允許開發人員在單一應用程式中結合兩種語言的優勢。 JavaScript 充當 Web 平台和 WebAssembly 模組之間的黏合劑，為與編譯的程式碼互動提供了方便的介面。
JavaScript 提供了載入 WebAssembly 模組所需的 API。 fetch API 用於檢索二進位文件，並將產生的 ArrayBuffer 傳遞給 WebAssembly.instantiate 函數。此函數非同步編譯模組並傳回一個包含導出函數和模組記憶體的實例。透過存取這些匯出的函數，JavaScript 可以呼叫 WebAssembly 模組提供的功能。
為了示範這種集成，讓我們考慮一個簡單的範例。我們將編寫一個計算斐波那契數列的 Wasm 模組，然後從 JavaScript 呼叫該模組。
第 1 步：寫 WebAssembly 模組
讓我們先用 C 來寫斐波那契計算邏輯。將以下程式碼儲存在名為 fibonacci.cpp 的檔案中 -
#include <emscripten.h>
extern "C" {
int EMSCRIPTEN_KEEPALIVE fibonacci(int n) {
if (n <= 1) {
return n;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
}
說明
在此程式碼中，我們有一個 C 函數 fibonacci，用於遞歸計算斐波那契數列。 EMSCRIPTEN_KEEPALIVE 巨集用於確保函數已匯出並且可以從 JavaScript 存取。
第 2 步：編譯 WebAssembly 模組
要將 C 程式碼編譯為 WebAssembly，我們將使用 Emscripten 工具鏈。在終端機中執行以下命令 -
emcc fibonacci.cpp -s WASM=1 -o fibonacci.wasm
此命令將產生 fibonacci.wasm 文件，其中包含已編譯的 WebAssembly 模組。
第 3 步：從 JavaScript 呼叫 WebAssembly
現在我們有了 WebAssembly 模組，讓我們從 JavaScript 呼叫它。將以下程式碼儲存在 HTML 檔案 index.html 中 -
範例
<!DOCTYPE html>
<html>
<head>
<script>
const fetchAndInstantiate = async () => {
const response = await fetch('fibonacci.wasm');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.instantiate(buffer);
const instance = module.instance;
const fibonacci = instance.exports.fibonacci;
const result = fibonacci(10);
console.log('Fibonacci(10):', result);
};
fetchAndInstantiate();
</script>
</head>
<body>
</body>
</html>
說明
在此程式碼中，我們使用 fetch API 來檢索 fibonacci.wasm 檔案並將其轉換為 ArrayBuffer。然後，我們使用 WebAssembly.instantiate 實例化 WebAssembly 模組，並從模組的實例中取得導出的斐波那契函數。最後，我們使用參數 10 呼叫斐波那契函數並將結果記錄到控制台。
第 4 步：運行範例
要執行該範例，請在 Web 瀏覽器中開啟 HTML 檔案。開啟瀏覽器的開發者控制台，您應該會看到輸出 Fibonacci(10): 55。這確認 WebAssembly 模組已成功從 JavaScript 載入並執行。
結論
WebAssembly 是一項強大的技術，為高效能 Web 應用程式開啟了新的可能性。透過結合 WebAssembly 和 JavaScript 的優勢，開發人員可以利用現有程式碼庫，以較低階語言編寫效能關鍵部分，並將它們無縫整合到他們的 Web 專案中。憑藉 WebAssembly 的靈活性和可移植性，該 Web 平台有望成為運行複雜應用程式的更強大的環境。
以上是使用 JavaScript 的 Web 組裝 (Wasm)的詳細內容。更多資訊請關注PHP中文網其他相關文章！