WebAssembly 實踐：如何寫代碼

時間 2019-11-05

標籤 webassembly 實踐如何代碼简体版

原文原文鏈接

本文不討論 WebAssembly 的發展，只是一步一步地教你怎麼寫 WebAssembly 的各類 demo。文中給出的例子我都放在 GitHub 中了（倉庫地址），包含了編譯腳本和編譯好的可執行文件，只需再有一個支持 WebAssembly 的瀏覽器就能夠直接運行。javascript

配置開發調試環境

安裝編譯工具

略。參考官方 Developer’s Guide 和 Advanced Tools，須要安裝的工具備：html

安裝過程挺繁瑣的，得本地 clone 代碼再編譯。es6

安裝瀏覽器

做爲一個新技術，之因此說 WebAssembly 前途明媚，不只是由於 W3C 成立了專門的 Webassembly Community Group，被標準承認；也是由於此次各大主流瀏覽器廠商（可貴的）達成了一致，共同參與規範的討論，在自家的瀏覽器裏都實現了。github

體驗新技術，建議使用激進版瀏覽器，最新版本中都已經支持了 WebAssembly。web

黃色的 Chrome (Chrome Canary)chrome
紫色的 Safari (Safari Technology Preview)express
深藍色的 Firefox (Firefox Nightly)
改頭換面的 IE (Microsoft Edge)

除了上邊幾個激進的瀏覽器，在主流版本里開啓 flag 也是可使用 WebAssembly 的：

Chrome: 打開 chrome://flags/#enable-webassembly，選擇 enable。
Firefox: 打開 about:config 將 javascript.options.wasm 設置爲 true。

快速體驗 WebAssembly

想快速體驗 WebAssembly ？最簡單的辦法就是找個支持 WebAssembly 的瀏覽器，打開控制檯，把下列代碼粘貼進去。

WebAssembly.compile(new Uint8Array(`
  00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01
  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
  0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)).then(module => {
  const instance = new WebAssembly.Instance(module)
  const { add, square } = instance.exports

  console.log('2 + 4 =', add(2, 4))
  console.log('3^2 =', square(3))
  console.log('(2 + 5)^2 =', square(add(2 + 5)))

})

裏邊這一坨奇怪的數字，就是 WebAssembly 的二進制源碼。

運行結果

若是報錯，說明你的瀏覽器不支持 WebAssembly ；若是沒報錯，代碼的運行結果以下（還會返回一個 Promise）：

2 + 4 = 6
3^2 = 9
(2 + 5)^2 = 49

其中 add 和 square 雖然作的事情很簡單，就是計算加法和平方，但那畢竟是由 WebAssembly 編譯出來的接口，是硬生生地用二進制寫出來的！

解釋代碼

上邊的二進制源碼一行 16 個數，有 4 行零兩個，一共有 66 個數；每一個數都是 8 位無符號十六進制整數，一共佔 66 Byte。

WebAssembly 提供了 JS API，其中 WebAssembly.compile 能夠用來編譯 wasm 的二進制源碼，它接受 BufferSource 格式的參數，返回一個 Promise。

那些代碼裏的前幾行，目的就是把字符串轉成 ArrayBuffer。先將字符串分割成普通數組，而後將普通數組轉成 8 位無符號整數的數組；裏的數字是十六進制的，全部用了 parseInt(str, 16)。

new Uint8Array(
  `...`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)

若是瀏覽器支持經過 <script type="module"> 的方式引入 wasm 文件，這些步驟都是多餘的（他們有這個計劃）。

而後，若是 WebAssembly.compile 返回的 Promise fulfilled 了，resolve 方法的第一個參數就是 WebAssembly 的模塊對象，是 WebAssembly.Module 的實例。

而後使用 WebAssembly.Instance 將模塊對象轉成 WebAssembly 實例（第二個參數能夠用來導入變量）。

經過 instance.exports 能夠拿到 wasm 代碼輸出的接口，剩下的代碼就和和普通 javascript 同樣了。

注意數據類型

WebAssembly 是有明確的數據類型的，我那個例子裏用的都是 32 位整型數（是否是看不出來…… 二進制裏那些 7f 表示 i32 指令，意思就是32位整數），因此用 WebAssembly 編譯出來的時候要注意數據類型。

若是你亂傳數據，WebAssembly 程序也不會報錯，由於在執行時會被動態轉換（dynamic_cast），它支持傳遞模糊類型的數據引用。可是你若是給函數傳了個字符串或者超大的數，具體會被轉成什麼就說不清了，一般是轉成 0。

console.log(square('Tom')) // 0
console.log(add(2e+66, 3e+66)) // 0
console.log(2e+66 + 3e+66) // 5e+66

想了解更多關於數據類型的細節，能夠參考：Data Types。

把 C/C++ 編譯成 WebAssembly

有一個在線 C++ 轉 wasm 的工具： WasmExplorer

二進制代碼簡直不是人寫的😂，還有其餘方式能寫 WebAssembly 嗎？

有，那就是把其餘語言編譯成 WebAssembly 的二進制。想實現這個效果，不得不用到各類編譯工具了。其中一個比較關鍵的工具是 Emscripten，它基於 LLVM ，能夠將 C/C++ 編譯成 asm.js，使用 WASM 標誌也能夠直接生成 WebAssembly 二進制文件（後綴是 .wasm）。

Emscripten
source.c   ----->  target.js

     Emscripten (with flag)
source.c   ----->  target.wasm

工具如何安裝就不講了，在此只提醒一點：emcc 在 1.37 以上版本才支持直接生成 wasm 文件。

編寫 C 代碼

項目代碼地址

首先新建一個 C 語言文件，假設叫 math.c 吧，在裏邊實現 add 和 square 方法：

// math.c

int add (int x, int y) {
  return x + y;
}

int square (int x) {
  return x * x;
}

而後執行 emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm 就能夠生成 wasm 文件了。

代碼解釋

C 語言代碼一目瞭然，就是寫了兩個函數，因爲 C 語言裏的函數都是全局的，這兩個函數默認都會被模塊導出。

不知道你有沒有注意到，這個文件裏沒寫 main 函數！沒寫入口函數，它自身什麼也執行不了，可是能夠把它當成一個庫文件使用，因此我在也是用模塊的方式編譯生成的 wasm 文件。

在 WebAssembly 官方給出的例子中，是寫了 main 函數，並且是直接把 C 文件編譯生成了 html + js + wasm 文件，其實是生成了一個能夠運行 demo，簡單粗暴。生成的代碼體積比較大，很難看懂裏邊具體作了什麼。爲了代碼簡潔，我這裏只是生成 wasm 模塊，沒有其餘多餘文件，要想把它運行起來還須要本身寫 html 和 js 讀取並執行 wasm 文件。（完整代碼）

若是你也想直接生成可用的 demo，你能夠再寫個 main 函數，而後執行 emcc math.c -s WASM=1 -o math.html 就能夠了。

如何運行 WebAssembly 二進制文件？

如今有了 wasm 文件，也有了支持 WebAssembly 的瀏覽器，怎麼把它運行起來呢？

目前只有一種方式能調用 wasm 裏的提供接口，那就是：用 javascript ！

官方網站中有一篇 Understanding the JS API 介紹瞭如何用 JS API 加載並執行 wasm 文件，寫的比較粗略。

WebAssembly 目前只設計也只實現了 javascript API，就像我剛開始提供的那個例子同樣，只有經過 js 代碼來編譯、實例化才能夠調用其中的接口。這也很好的說明了 WebAssembly 並非要替代 javascript ，而是用來加強 javascript 和 Web 平臺的能力的。我以爲 WebAssembly 更適合用於寫模塊，承接各類複雜的計算，如圖像處理、3D運算、語音識別、視音頻編碼解碼這種工做，主體程序仍是要用 javascript 來寫的。

編寫加載函數 (loader)

在最開始的例子裏，已經很簡化的將執行 WebAssembly 的步驟寫出來了，其實就是【加載文件】->【轉成 buffer】->【編譯】->【實例化】。

function loadWebAssembly (path) {
  return fetch(path)                   // 加載文件        
    .then(res => res.arrayBuffer())    // 轉成 ArrayBuffer
    .then(WebAssembly.instantiate)     // 編譯 + 實例化
    .then(mod => mod.instance)         // 提取生成都模塊
}

代碼其實很簡單，使用了 Fetch API 來獲取 wasm 文件，而後將其轉換成 ArrayBuffer，而後使用 WebAssembly.instantiate 這個一步到位的方法來編譯並初始化一個 WebAssembly 的實例。最後一步是從生成的模塊中提取出真正的實例對象。

完成了上邊的操做，就能夠直接使用 loadWebAssembly 這個方法加載 wasm 文件了，它至關因而一個 wasm-loader ；返回值是一個 Promise，使用起來和普通的 js 函數沒什麼區別。從 instance.exports 中能夠找到 wasm 文件輸出的接口。

loadWebAssembly('path/to/math.wasm')
  .then(instance => {
    const { add, square } = instance.exports
    // ...
  })

返回 Promise 不僅是由於 fetch 函數，即便像最開始的例子那樣把二進制硬編碼，也必需要用 Promise 。由於 WebAssembly.compile 和 WebAssembly.instantiate 這些接口都是異步的，自己就返回 Promise 。

更完整的加載函數

若是你直接使用上邊那個 loadWebAssembly 函數，有可能會執行失敗，由於在 wasm 文件裏，可能還會引入一些環境變量，在實例化的同時還須要初始化內存空間和變量映射表，也就是 WebAssembly.Memory 和 WebAssembly.Table。

/**
 * @param {String} path wasm 文件路徑
 * @param {Object} imports 傳遞到 wasm 代碼中的變量
 */
function loadWebAssembly (path, imports = {}) {
  return fetch(path)
    .then(response => response.arrayBuffer())
    .then(buffer => WebAssembly.compile(buffer))
    .then(module => {
      imports.env = imports.env || {}

      // 開闢內存空間
      imports.env.memoryBase = imports.env.memoryBase || 0
      if (!imports.env.memory) {
        imports.env.memory = new WebAssembly.Memory({ initial: 256 })
      }

      // 建立變量映射表
      imports.env.tableBase = imports.env.tableBase || 0
      if (!imports.env.table) {
        // 在 MVP 版本中 element 只能是 "anyfunc"
        imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
      }

      // 建立 WebAssembly 實例
      return new WebAssembly.Instance(module, imports)
    })
}

這個 loadWebAssembly 函數還接受第二個參數，表示要傳遞給 wasm 的變量，在初始化 WebAssembly 實例的時候，能夠把一些接口傳遞給 wasm 代碼。

調用 wasm 導出的接口

有了 loadWebAssembly 就能夠調用 wasm 代碼導出的接口了。

loadWebAssembly('./math.wasm')
  .then(instance => {
    const add = instance.exports._add
    const square = instance.exports._square

    console.log('2 + 4 =', add(2, 4))
    console.log('3^2 =', square(3))
    console.log('(2 + 5)^2 =', square(add(2 + 5)))
  })

比較奇怪的一點是，用 C/C++ 導出的模塊，屬性名上默認都帶了 _ 前綴，asm.js 轉成了 wasm 模塊就不帶。

在瀏覽器中的運行效果

參考剛纔用 C 語言寫出來的項目（代碼地址），直接用瀏覽器打開 index.html 便可。能看到這樣的輸出（我使用的是 Chrome Canany 瀏覽器）：

若是你打開開發者工具的 Source 面板，可以看到 wasm 的源代碼，瀏覽器已經將二進制轉換成了對等的文本指令)。

雖然是一個 wasm 文件，瀏覽器將它解析成了兩個（也有可能更多），是由於咱們輸出了兩個接口，每一個文件都對應了一個接口的定義。能夠理解爲 Canary 瀏覽器爲了方便看源碼實現的 sourcemap 功能。

把 asm.js 編譯成 WebAssembly

項目代碼地址

剛纔也介紹了 Emscripten 能夠將 C/C++ 編譯成 asm.js ，這是它的默認功能，加上 flag 才能生成 wasm 。

asm.js 是 javascript 的子集，是一種語法（不是一個前端工具庫！），用了不少底層語法來標註數據類型，目的是提升 javascript 的運行效率，自己就是做爲 C/C++ 編譯的目標設計的（不是給人寫的），能夠理解爲一種中間表示層語法 (IR, Intermediate Representation)。asm.js 出生於 WebAssembly 以前， WebAssembly 借鑑了這個思路，作的更完全一些，直接跳過 javascript ，設計了一套新的平臺指令。

編寫 asm.js 代碼

// math.js

function () {
  "use asm";

  function add (x, y) {
    x = x | 0;
    y = y | 0;
    return x + y | 0;
  }

  function square (x) {
    x = x | 0;
    return x * x | 0;
  }

  return {
    add: add,
    square: square
  };
}

上邊定義了一個函數，而且聲明瞭 "use asm"，這樣一來，這個函數就會被視爲 asm.js 的模塊，裏邊能夠添加方法，經過 return 暴露給外部使用。

不過，目前只有 asm.js 才能轉成 wasm，普通 javascript 是不行的！ 由於 javascript 是弱類型語言，用法也比較靈活，自己就很難編譯成強類型的指令。

使用 Binaryen 和 WABT

雖然 Emscripten 能生成 asm.js 和 wasm ，可是卻不能把 asm.js 轉成 wasm 。由於它是基於 LLVM 的，然而 asm.js 無法編譯成 LLVM IR (Intermediate Representation)。想要把 asm.js 編譯成 WebAssembly，就要用到他們官方提供的 Binaryen 和 WABT (WebAssembly Binary Toolkit) 工具了。

原理和編譯方法參考官方文檔，整個過程大概是這樣的：

Binaryen             WABT
math.js   --->   math.wast   --->   math.wasm

用腳本描述大概是這樣：

asm2wasm math.js -o math.wast
wast2wasm math.wast -o math.wasm

wast 是什麼格式？

WebAssembly 除了定義了二進制格式之外，還定義了一份對等的文本描述。官方給出的是線性表示的例子，而 wast 是用 S-表達式(s-expressions) 描述的另外一種文本格式。

上邊的 asm.js 代碼編譯生成的 wast 文件是這樣的：

(module
  (export "add" (func $add))
  (export "square" (func $square))

  (func $add (param $x i32) (param $y i32) (result i32)
    (return
      (i32.add
        (get_local $x)
        (get_local $y)
      )
    )
  )

  (func $square (param $x i32) (result i32)
    (return
      (i32.mul
        (get_local $x)
        (get_local $x)
      )
    )
  )
)

和 lisp 挺像的，反正比二進制宜讀多了😂。能看出來最外層聲明瞭是一個模塊，而後導出了兩個函數，下邊緊接着是兩個函數的定義，包含了參數列表和返回值的類型聲明。若是對這種相似 lisp 的語法比較熟悉，徹底能夠手寫 wast 嘛，只要裝個 wast2wasm 小工具就能夠生成 wasm 了。或者在這個在線 wast -> wasm 轉換工具裏寫 wast 代碼，能夠實時預覽編譯的結果，也能夠下載生成的 wasm 文件。

在 WebAssembly 中調用 Web API

在 js 裏能調用 wasm 裏定義的方法，反過來，wasm 裏能不能調用 javascript 寫的方法呢？能不能調用平臺提供的方法（Web API）呢？

固然是能夠的。不過在 MVP (Minimum Viable Product) 版本里實現的功能有限。要想在 wasm 裏調用 Web API，須要在建立 WebAssembly 實例的時候把 Web API 傳遞過去才能夠，具體作法能夠參考上邊寫的那個比較複雜的 loader。（經過 WebAssembly.Table 傳變量至關麻煩）。

向 wasm 中傳遞 js 變量

在有了 loadWebAssembly 這個方法以後，就能夠給 wasm 代碼傳遞 js 變量和函數了。

const imports = {
  Math,
  objects: {
    count: 2333
  },
  methods: {
    output (message) {
      console.log(`-----> ${message} <-----`)
    }
  }
}

loadWebAssembly('path/to/source.wasm', imports)
  .then(instance => {
    // ...
  })

上邊的代碼裏給 wasm 模塊傳遞了三個對象： Math 、objects 、methods，分別對應了 Web API 、普通 js 對象、使用了 Web API 的 js 函數。屬性名和變量名都並沒什麼限制，是能夠隨便起的，把它傳遞給 loadWebAssembly 方法的第二個參數就能夠傳遞到 wasm 模塊中了。

真正實現傳遞的是 loadWebAssembly 的這行代碼：

new WebAssembly.Instance(module, imports)

獲取並使用從 js 傳遞的變量

既然 wasm 的代碼最外層聲明的是一個模塊，咱們能向外 export 接口，固然也能夠 import 接口。完整代碼以下：

(module
  (import "objects" "count" (global $count f32))
  (import "methods" "output" (func $output (param f32)))
  (import "Math" "sin" (func $sin (param f32) (result f32)))

  (export "test" (func $test))
  (func $test (param $x f32)
    (call $output (f32.const 42))
    (call $output (get_global $count))
    (call $output (get_local $x))
    (call $output
      (call $sin
        (get_local $x)
      )
    )
  )
)

這段代碼也是在最外層聲明瞭一個 module，而後前三行是 import 語句。首先從 objects 中導入 count 屬性，而且在代碼裏聲明爲全局的 $count 變量，格式是 32 位浮點數。

(import "objects" "count" (global $count f32))

而後從 methods 中導入 output 方法，聲明爲一個接受 32 位浮點數做爲參數的函數 $output。

(import "methods" "output" (func $output (param f32)))

最後從 Math 中導入 sin 方法，聲明爲一個接受 32 位浮點數做爲參數的函數 $sin，返回值也是 32 位浮點數。這樣一來就把 js 傳遞的對象轉成了自身模塊中可使用變量。

(import "Math" "sin" (func $sin (param f32) (result f32)))

調用 js 中定義的接口

接下來是定義而且導出了一個 test 函數，接受一個 32 位浮點數做爲參數。在 wast 的語法裏 call 指令用來調用函數，get_global 用來獲取全局變量的值，get_local 用來獲取局部變量的值，只能在函數定義中使用。這樣來看，test 函數裏執行了四條命令，首先調用 $output 輸出了一個常量 42；而後調用 $output 輸出全局變量 $count ，這個值是經過 import 獲取來的；接着又輸出了函數的參數 $x；最後輸出了函數參數 $x 調用 Web API $sin 計算後的結果。

(func $test (param $x f32)
    (call $output (f32.const 42))
    (call $output (get_global $count))
    (call $output (get_local $x))
    (call $output
      (call $sin
        (get_local $x)
      )
    )
  )

編譯執行

經過 west2wasm source.wast -o source.wasm 能夠生成 wasm 文件，而後使用 loadWebAssembly 編譯 wasm 文件。

loadWebAssembly('path/to/source.wasm', imports)
  .then(instance => {
    const { test } = instance.exports
    test(2333)
  })

會獲得以下結果：

-----> 42 <-----
-----> 666 <-----
-----> 2333 <-----
-----> 0.9332447648048401 <-----

代碼雖然簡單，可是實現了向 wasm 中傳遞變量，而且能在 wasm 中調用 Math 和 console 這種平臺接口。若是想要繞過 javascript 直接給 wasm 傳參，或者在 wasm 裏直接引用 DOM API，就得看他們下一步的計劃了。參考 GC / DOM / Web API Integration 。