WebAssembly 的元件

大家好，

這篇文章是我們關於 WebAssembly 的多部分系列的繼續。 請參閱此處的其他部分。

現在我們了解了 WebAssembly 的基礎知識，讓我們來探索一下它的架構。 關鍵組件包括：

1. 模組
2. 執行環境
3. 堆疊機
4. 記憶
5. 桌子

WebAssembly 模組

WebAssembly 模組是一個已編譯的程式碼單元，包含函數、記憶體、表格和執行所需的其他資源。 每個模組都是獨立的並且可以獨立實例化。 它本質上是一個 .wasm 文件。 模組支援導入和導出函數和內存，從而實現模組化編程以及與其他 Web 技術的整合。

WebAssembly 執行環境

WebAssembly 在主機（如瀏覽器或 Node.js）內的安全、隔離、沙盒環境中運作。 此環境限制對主機系統的訪問，從而增強安全性。 存取資源需要明確的請求。執行環境包括 WebAssembly 執行時期管理模組載入、驗證、記憶體和指令執行。

堆疊機

WebAssembly 使用基於堆疊的虛擬機器。指令操作堆疊上的資料。 這是一個簡單的例子：

<code>(
    func $add(param $a i32) (param $b i32) (result i32)
        local.get $a
        local.get $b

        i32.add
)</code>

函數將兩個 32 位元整數相加。棧機的執行步驟為：

1. 空堆疊。
2. 將 $a 壓入堆疊。
3. 將 $b 壓入堆疊。
4. 彈出$a和$b，添加它們。
5. 將結果壓入堆疊（這是回傳值）。

記憶

WebAssembly 的線性記憶體模型是一個連續的、可成長的位元組數組－WebAssembly 程式的 HEAP。 它透過位元組偏移量進行索引，允許直接存取特定位置。

例如，分別在位址0和1處儲存兩個8位數字（10和16）：

• 10 – 位址 0
• 16 – 位址 1

可以使用不同的位元視圖存取資料；一致性是避免衝突的關鍵。 JavaScript 透過 WebAssembly.Memory 介面存取記憶體。 例如：

const memory = new WebAssembly.Memory({ initial: 10, maximum: 100 });

這會分配 640kB（最小）記憶體（1 頁 = 64kB）。 共享記憶體允許多線程存取。 setValue(ptr, value, type) 和 getValue(ptr, type) 簡化設定和取得值。

這是一個說明記憶體互動的 C/JavaScript 範例：

<code>(
    func $add(param $a i32) (param $b i32) (result i32)
        local.get $a
        local.get $b

        i32.add
)</code>

const memory = new WebAssembly.Memory({ initial: 10, maximum: 100 });

記得使用_free釋放記憶體以防止洩漏。 模組還可以定義自己的記憶體。

桌子

WebAssembly 表是儲存函數引用的獨立記憶體段，支援動態函數呼叫。 這允許在運行時調用函數，而無需事先知道函數的名稱，而是使用索引。 這對於載入功能未知的遊戲外掛程式等場景至關重要。

結論

本概述涵蓋了 WebAssembly 的核心元件。 如需深入探索，請查看以下資源：

• Marco Selvatici 的 WASM 教程
• MDN 的 WebAssembly 文件
• WASM 範例

接下來，我們將建立一些實際項目！

以上是WebAssembly 的元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！