如何在 WebAssembly 中寫 “Hello World”？

作者：Stephan Avenwedde 2021-03-30 13:48:47

WebAssembly 是一種字節(jié)碼格式，幾乎所有的瀏覽器都可以將它編譯成其宿主操作系統(tǒng)的機(jī)器代碼。除了 JavaScript 和 WebGL 之外，WebAssembly 還滿足了將應(yīng)用移植到瀏覽器中以實(shí)現(xiàn)平臺獨(dú)立的需求。作為 C++ 和 Rust 的編譯目標(biāo)，WebAssembly 使 Web 瀏覽器能夠以接近原生的速度執(zhí)行代碼。

[[390511]]

通過這個分步教程，開始用人類可讀的文本編寫 WebAssembly。

當(dāng)談?wù)?WebAssembly 應(yīng)用時(shí)，你必須區(qū)分三種狀態(tài)：

源碼（如 C++ 或 Rust）： 你有一個用兼容語言編寫的應(yīng)用，你想把它在瀏覽器中執(zhí)行。
WebAssembly 字節(jié)碼： 你選擇 WebAssembly 字節(jié)碼作為編譯目標(biāo)。最后，你得到一個 .wasm 文件。
機(jī)器碼（opcode）： 瀏覽器加載 .wasm 文件，并將其編譯成主機(jī)系統(tǒng)的相應(yīng)機(jī)器碼。

WebAssembly 還有一種文本格式，用人類可讀的文本表示二進(jìn)制格式。為了簡單起見，我將其稱為 WASM-text。WASM-text 可以比作高級匯編語言。當(dāng)然，你不會基于 WASM-text 來編寫一個完整的應(yīng)用，但了解它的底層工作原理是很好的（特別是對于調(diào)試和性能優(yōu)化）。

本文將指導(dǎo)你在 WASM-text 中創(chuàng)建經(jīng)典的 “Hello World” 程序。

創(chuàng)建 .wat 文件

WASM-text 文件通常以 .wat 結(jié)尾。第一步創(chuàng)建一個名為 helloworld.wat 的空文本文件，用你最喜歡的文本編輯器打開它，然后粘貼進(jìn)去：

(module
    ;; 從 JavaScript 命名空間導(dǎo)入
    (import  "console"  "log" (func  $log (param  i32  i32))) ;; 導(dǎo)入 log 函數(shù)
    (import  "js"  "mem" (memory  1)) ;; 導(dǎo)入 1 頁 內(nèi)存（64kb）
   
    ;; 我們的模塊的數(shù)據(jù)段
    (data (i32.const 0) "Hello World from WebAssembly!")
   
    ;; 函數(shù)聲明：導(dǎo)出 helloWorld()，無參數(shù)
    (func (export  "helloWorld")
        i32.const 0  ;; 傳遞偏移 0 到 log
        i32.const 29  ;; 傳遞長度 29 到 log（示例文本的字符串長度）
        call  $log
        )
)

WASM-text 格式是基于 S 表達(dá)式的。為了實(shí)現(xiàn)交互，JavaScript 函數(shù)用 import 語句導(dǎo)入，WebAssembly 函數(shù)用 export 語句導(dǎo)出。在這個例子中，從 console 模塊中導(dǎo)入 log 函數(shù)，它需要兩個類型為 i32 的參數(shù)作為輸入，以及一頁內(nèi)存（64KB）來存儲字符串。

字符串將被寫入偏移量為 0 的數(shù)據(jù)段。數(shù)據(jù)段是你的內(nèi)存的疊加投影overlay，內(nèi)存是在 JavaScript 部分分配的。

函數(shù)用關(guān)鍵字 func 標(biāo)記。當(dāng)進(jìn)入函數(shù)時(shí)，棧是空的。在調(diào)用另一個函數(shù)之前，函數(shù)參數(shù)會被壓入棧中（這里是偏移量和長度）（見 call $log）。當(dāng)一個函數(shù)返回一個 f32 類型時(shí)（例如），當(dāng)離開函數(shù)時(shí)，一個 f32 變量必須保留在棧中（但在本例中不是這樣）。

創(chuàng)建 .wasm 文件

WASM-text 和 WebAssembly 字節(jié)碼是 1:1 對應(yīng)的，這意味著你可以將 WASM-text 轉(zhuǎn)換成字節(jié)碼（反之亦然）。你已經(jīng)有了 WASM-text，現(xiàn)在將創(chuàng)建字節(jié)碼。

轉(zhuǎn)換可以通過 WebAssembly Binary Toolkit（WABT）來完成。從該鏈接克隆倉庫，并按照安裝說明進(jìn)行安裝。

建立工具鏈后，打開控制臺并輸入以下內(nèi)容，將 WASM-text 轉(zhuǎn)換為字節(jié)碼：

wat2wasm helloworld.wat -o helloworld.wasm

你也可以用以下方法將字節(jié)碼轉(zhuǎn)換為 WASM-text：

wasm2wat helloworld.wasm -o helloworld_reverse.wat

一個從 .wasm 文件創(chuàng)建的 .wat 文件不包括任何函數(shù)或參數(shù)名稱。默認(rèn)情況下，WebAssembly 用它們的索引來識別函數(shù)和參數(shù)。

編譯 .wasm 文件

目前，WebAssembly 只與 JavaScript 共存，所以你必須編寫一個簡短的腳本來加載和編譯 .wasm 文件并進(jìn)行函數(shù)調(diào)用。你還需要在 WebAssembly 模塊中定義你要導(dǎo)入的函數(shù)。

創(chuàng)建一個空的文本文件，并將其命名為 helloworld.html，然后打開你喜歡的文本編輯器并粘貼進(jìn)去：

<!DOCTYPE  html>
<html>
  <head>
    <meta  charset="utf-8">
    <title>Simple template</title>
  </head>
  <body>
    <script>
   
      var memory = new  WebAssembly.Memory({initial:1});
 
      function  consoleLogString(offset, length) {
        var  bytes = new  Uint8Array(memory.buffer, offset, length);
        var  string = new  TextDecoder('utf8').decode(bytes);
        console.log(string);
      };
 
      var  importObject = {
        console: {
          log:  consoleLogString
        },
        js : {
          mem:  memory
        }
      };
     
      WebAssembly.instantiateStreaming(fetch('helloworld.wasm'), importObject)
      .then(obj  => {
        obj.instance.exports.helloWorld();
      });
     
    </script>
  </body>
</html>

WebAssembly.Memory(...) 方法返回一個大小為 64KB 的內(nèi)存頁。函數(shù) consoleLogString 根據(jù)長度和偏移量從該內(nèi)存頁讀取一個字符串。這兩個對象作為 importObject 的一部分傳遞給你的 WebAssembly 模塊。

在你運(yùn)行這個例子之前，你可能必須允許 Firefox 從這個目錄中訪問文件，在地址欄輸入 about:config，并將 privacy.file_unique_origin 設(shè)置為 true：