WebAssembly核心編程[1]:wasm模塊實例化的N種方式

當我們在一個Web應用中使用WebAssembly，最終的目的要么是執行wasm模塊的入口程序（通過start指令指定的函數），要么是調用其導出的函數，這一切的前提需要創建一個通過WebAssembly.Instance對象表示的wasm模塊實例(源代碼)。

一、wasm模塊實例化總體流程
二、利用WebAssembly.Module創建實例
三、通過字節內容創建創建實例
四、利用XMLHttpRequest加載wasm模塊
五、極簡編程方式

一、wasm模塊實例化總體流程

雖然編程模式多種多樣，但是wasm模塊的實例化總體采用如下的流程：

步驟一：下載wasm模塊文件；
步驟二：解析文件并創建通過WebAssembly.Module類型表示的wasm模塊；
步驟三：根據wasm模塊，結合提供的導入對象，創建通過WebAssembly.Instance類型表示的模塊實例。

二、利用WebAssembly.Module創建實例

我們照例通過一個簡單的實例來演示針對wasm模塊加載和模塊實例創建的各種編程模式。我們首先利用WebAssembly Text Format（WAT）形式定義如下一個wasm程序，定義的文件名為app.wat。如代碼所示，我們定義了一個用于輸出指定浮點數（i64）絕對值的導出函數absolute。絕對值通過f64.abs指令計算，具體得輸出則通過導入的print函數完成。

(module
   (func $print (import "imports" "print") (param $op f64) (param $result f64))
   (func (export "absolute") (param $op f64)
      (local.get $op)
      (f64.abs (local.get $op))
      (call $print)
   )
)

我們通過指定wat2wasm （源代碼壓縮包種提供了對應的.exe）命令（wat2wasm app.wat –o app.wasm)編譯app.wat并生成app.wasm后，定義如下這個index.html頁面，作為宿主程序的JavaScript腳本完全按照上面所示的步驟完成了針對wasm模塊實例的創建。

<html>
    <head></head>
    <body>
        <div id="container"></div>
        <script>
            var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
           fetch("app.wasm")
                .then((response) => response.arrayBuffer())
                .then(bytes => {
                    var module = new WebAssembly.Module(bytes);
                    var instance = new WebAssembly.Instance(module, {"imports":{"print": print}});
                    instance.exports.absolute(-3.14);
                })
        </script>
    </body>
</html>

具體來說，我們調用fetch函數將app.wasm文件下載下來后，我們將獲得的字節內容作為參數調用構建函數創建了一個WebAssembly.Module對象。然后將這個Module對象和創建的導入對象（{"imports":{"print": print}}）作為參數調用構造函數創建了一個WebAssembly.Instance對象，該對象正是我們需要的wasm模塊實例。我們從模塊實例中提取并執行導出的absolute函數。導入的print函數會將絕對值計算表達式以如下的形式輸出到頁面中。

除了調用構造函數以同步（阻塞）的方式根據WebAssembly.Module對象創建WebAssembly.Instance對象外，我們還可以調用WebAssembly.instantiate靜態方法以異步的方式“激活”wasm模塊實例，它返回一個Promise<WebAssembly.Instance>對象。

var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
fetch("app.wasm")
    .then((response) => response.arrayBuffer())
    .then(bytes => {
        var module = new WebAssembly.Module(bytes);
        return WebAssembly.instantiate(module, { "imports": { "print": print } });
    })
    .then(instance => instance.exports.absolute(-3.14));

三、通過字節內容創建創建實例

靜態方法WebAssembly.instantiate還提供了另一個重載，我們可以直接指定下載wasm模塊文件得到的字節內容作為參數。這個重載返回一個Promise<WebAssembly.WebAssemblyInstantiatedSource>對象，WebAssemblyInstantiatedSource對象的instance屬性返回的正是我們需要的wasm模塊實例。

var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
fetch("app.wasm")
    .then((response) => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes, {"imports":{"print": print}}))
    .then(result =>result.instance.exports.absolute(-3.14));

四、利用XMLHttpRequest加載wasm模塊

fetch函數是我們推薦的用于下載wasm模塊文件的方式，不過我們一定義要使用傳統的XMLHttpRequest對象也未嘗不可。上面的三種激活wasm模塊實例的方式可以采用如下的形式來實現。

var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
const request = new XMLHttpRequest();
request.open("GET", "app.wasm");
request.responseType = "arraybuffer";
request.send();

request.onload = () => {
    var bytes = request.response;
    var module = new WebAssembly.Module(bytes);
    var instance = new WebAssembly.Instance(module, {"imports":{"print": print}});
    instance.exports.absolute(-3.14);
};

上面演示的利用創建的WebAssembly.Module對象和導入對象調用構造函數創建WebAssembly.Instance的同步形式。下面則是將二者作為參數調用靜態方式WebAssembly.instantiate以異步方式激活wasm模塊實例的方式。

var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
const request = new XMLHttpRequest();
request.open("GET", "app.wasm");
request.responseType = "arraybuffer";
request.send();

request.onload = () => {
    var bytes = request.response;
    WebAssembly
        .instantiate(request.response, {"imports":{"print": print}})
        .then(result => result.instance.exports.absolute(-3.14));
};

下面演示WebAssembly.instantiate靜態方法的另一個重載。

var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
const request = new XMLHttpRequest();
request.open("GET", "app.wasm");
request.responseType = "arraybuffer";
request.send();

request.onload = () => {
    var bytes = request.response;
    WebAssembly
        .instantiate(request.response, {"imports":{"print": print}})
        .then(result => result.instance.exports.absolute(-3.14));
};

五、極簡編程方式

其實我們有“一步到位”的方式，那就是按照如下的形式執行靜態方法WebAssembly.instantiateStreaming。該方法的第一個參數用于提供下載.wasm模塊文件的PromiseLike<Response>對象，第二個參數則用于指定導入對象。該方法同樣返回一個Promise<WebAssembly.WebAssemblyInstantiatedSource>對象，WebAssemblyInstantiatedSource的instance屬性返回的正是我們所需的wasm模塊實例。

var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
WebAssembly
    .instantiateStreaming(fetch("app.wasm"), {"imports":{"print": print}})
    .then(result => result.instance.exports.absolute(-3.14))

WebAssembly入門筆記[1]：與JavaScript的交互
 WebAssembly入門筆記[2]：利用Memory傳遞字節數據
 WebAssembly入門筆記[3]：利用Table傳遞引用
 WebAssembly入門筆記[4]：利用Global傳遞全局變量

 WebAssembly核心編程[1]:wasm模塊實例化的N種方式
 WebAssembly核心編程[2]:類型系統
 WebAssembly核心編程[3]: Module 與 Instance
WebAssembly核心編程[4]: Memory

posted @ 2024-01-31 08:37 Artech 閱讀(917) 評論(0) 收藏舉報

刷新頁面返回頂部