前一陣子利用Balazor開發了一個NuGet站點，對WebAssembly進行了初步的了解，覺得挺有意思。在接下來的一系列文章中，我們將通過實例演示的方式介紹WebAssembly的一些基本概念和編程模式。首先我們先來說說什麼是WebAssembly，它主要幫助我們解決什麼問題。

本文演示實例下載：app1 app2

一、概述
二、WebAssembly程序(app.wat)
三、編譯生成app.wasm
四、JavaScript程序
五、跑起來看看
六、調用導出函數

一、概述

WebAssembly可以視為一種采用精簡的”二進制格式”的“低等級”、“類匯編”語言。目前主流的瀏覽器均提供了對WebAssembly的支持，雖然WebAssembly的執行性能（它能夠提供near-native的執行性能）是JavaScript無法比擬的，但是在表達能力和靈活性還是不如JavaScript，所以WebAssembly的出現並不是要取代JavaScript，而是作為JavaScript的“助手”，兩者配合，各自發揮自身的優勢，進而開發出更高質量的Web應用。

與其說WebAssembly像匯編，不如說它更像MSIL，因為它不是面向開發者的高級語言，而是高級語言的“編譯目標”。雖然.NET 的運行時CLR不能直接執行C#、VB.NET和F#這樣的高級語言編寫的代碼，而執行執行MSIL指令，但是我們可以將前者編譯成後者。與之類似，我們也可以使用C、C 、C#、Rust和AssemblyScript（面向WebAssembly的TypeScript）作為開發語言，然後將代碼編譯成WebAssembly。

與匯編一樣，雖然WebAssembly采用的是單純的二進制格式，但是可以轉換成文本形式。不僅如此，我們還可以按照這樣的文本格式來編寫程序（在接下來的內容中，我們提供的WebAssembly程序均采用這樣的編寫方式），並利用相應的工具將其編程成WebAssembly。WebAssembly文本采用一種名為S-expression的樹形結構，我們定義的內容都存在與一個具體的“節點”中，每個節點通過小括號包裹起來，子節點直接內嵌於父節點中。由於模塊是WebAssembly的基本部署和加載單元，所以module總是它們的根節點，如下所示的就是一個合法的最簡單的WebAssembly程序。

(module)

為了讓大傢對WebAssembly文本的S-expression有一個大致的了解，我們采用這樣的形勢定義了一個進行整數加法運算的add函數。如下面的代碼片段所示，我們定義的函數通過內嵌於module節點的(func)節點表示。它具有一些子節點，其中(export "add") 表示將這個函數以名稱“add”進行導出，這意味著加載此模塊的JavaScript應用可以直接調用此函數。額外三個節點(param $x i32) (param $y i32) (result i32)定義了函數的簽名，揭示了此函數包含兩個Int32(i32)的輸入參數，返回值（結果）的類型也是Int32(i32)。為了提供可讀性，同時也方面傳參方面，我們將參數進行了命名($x和$y)

(module
 (func (export "add") (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.add)
)

值得一提的是，WebAssembly僅僅支持4種數據類型，分別是32和64位的整數（i32和i64）和浮點數（f32和f64），連我們最常使用的字符串類型都不支持。由於字符串本質上就是一組字符序列，而一個字符本質上是采用某種編碼的一段字節序列，所以WebAssembly中針對字符串的處理需要自行解決編解碼的工作，所以直接以S-expression文本的形式編寫WebAssembly程序並不容易。

上面說WebAssembly更像MSIL，還因為執行WebAssembly的VM是一個“堆棧機（Stack Machine）”,意味著它采用“壓棧”的方式傳遞參數。而匯編面向的是真正的機器語言，是“堆棧機（Stack Machine）”和“寄存器機（Register Machine）”的結合，不僅參數傳遞可以采用堆棧，也可以采用寄存器。這一點可以從add函數的實現看出來，由於最終需要執行i32.add指令，我們需要在這之前調用local.get指令將兩個參數壓入棧中。i32.add執行後的結果也將入棧，並成為函數返回值。

在對WebAssembly以及基於S-expression的文本形式有了基本了解之後，我們通過一個簡單的例子來演示一下一個WebAssembly程序大體上如何編寫，我們著重關註JavaScript應用和WebAssembly之間的功能交互。我們創建一個空的目錄，並創建兩個文本文件app.wat和index.html，前者代表以S-expression文本形式編寫的WebAssembly程序，後者是一個空的HTML頁面，我們利用它提供的JavaScript程序加載並執行編譯後的WebAssembly模塊。

二、WebAssembly程序(app.wat)

如下所示的是app.wat的內容，看起來很長，好在我們現在對S-expression有了基本的了解，所以理解起來沒有什麼問題。模塊的第一個節點(func $print (import "js" "print") (param $op1 i32) (param $op2 i32) (param $op i32) (param $result i32))同樣是定義了一個函數，我們將其命名為$print， 子節點(import "js" "print") 表明該函數是從作為宿主的Javascript應用中導入的，具體的路徑為js->print。如果導入的Javascript對象通過變量imports表示，意味著imports.js.print表示的就是這個導入的對象。至於其餘的四個節點(param $op1 i32) (param $op2 i32) (param $op i32) (param $result i32))同樣是提供了函數的簽名：個i32類型的參數，分別表示第一個操作數、第二個操作數、操作符（1，2，3，4分別代表加、減、乘、除）和執行結果。由於這個函數僅僅打印運算表達式，所以沒有返回值。

(module

 ;; import js func print (op1, op2, op, result) 

 (func $print (import "js" "print") 
 (param $op1 i32) 
 (param $op2 i32) 
 (param $op i32) 
 (param $result i32))

 ;; int32 add (int32 x, int32 y)
 (func $add (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.add)

 ;; int32 sub(int32 x, int32 y)
 (func $sub (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.sub)


 ;; int32 mul(int32 x, int32 y)
 (func $mul (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.mul)


 ;; int32 div(int32 x, int32 y)
 (func $div (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.div_u)

 (func $main
 ;; call print(1, 2, add(1,2), 1)
 i32.const 1
 i32.const 2
 i32.const 1

 i32.const 1
 i32.const 2
 call $add
 call $print

 ;; call print(1, 2, sub(1,2), 2)
 i32.const 1
 i32.const 2
 i32.const 2

 i32.const 1
 i32.const 2
 call $sub
 call $print

 ;; call print(1, 2, mul(1,2), 3)
 i32.const 1
 i32.const 2
 i32.const 3

 i32.const 1
 i32.const 2
 call $mul
 call $print

 ;; call print(1, 2, div(1,2), 4)
 i32.const 1
 i32.const 2
 i32.const 4

 i32.const 1
 i32.const 2
 call $div
 call $print
 )

 (start $main)
)

接下來我們定義了四個進行加、減、乘和除運算的函數add、sub、mul和div，它們與上面定義的add函數類似，不過由於缺少了（export “{funcname}”）節點，所以它們僅僅是四個內部函數而已。接下來，我們定義了一個$main函數，它會傳入相同的參數（1、2）調用上述4個函數，並調用導入的print方法將包含結果的運算表達式打印出來。雖然命名為$main，但是它也僅僅是一個普通的函數而已，所以我們需要利用(start $main)節點將其作為入口函數，這樣它就會在加載的時候自動執行了。
三、編譯生成app.wasm
以文本形式編寫的WebAssembly程序需要編譯成二進制模塊才能被加載執行，這裡我們使用的wat2wasm這個工具，這個工具可以從這裡下載。除了將wat文件轉化成wasm文件的wat2wasm，下載包裡還包含了其他一些有用的工具，比如進行反向操作的wasm2wat。上面編寫的app.wat文件利用如下的命令就可以編譯生成WebAssembly目標文件app.wasm。

wat2wasm app.wat -o app.wasm


四、JavaScript程序
如下所示的就是index.html文件的內容，我們著重關註其提供的JavaScript代碼。我們首先定義被WebAssembly導入的用來輸出運行表達式的函數print，然後按照導入路徑js.print將其封裝到一個導入對象中（{"js":{"print":print}}）。我們調用WebAssembly.instantiateStreaming函數以異步方式加載app.wasm模塊，並創建對應的實例。具體下載app.wasm模塊通過第一個參數提供的Promise（fetch("app.wasm")）完成，第二個參數代表導入對象。

<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var url="app.wasm";
var print = (op1, op2, op, result) => {
switch (op) {
case 1:
console.log(`${op1}   ${op2} = ${result}`);
break;
case 2:
console.log(`${op1} - ${op2} = ${result}`);
break;
case 3:
console.log(`${op1} * ${op2} = ${result}`);
break;
case 4:
console.log(`${op1} / ${op2} = ${result}`);
break;
default:
console.log("invalid operator.");
}
 };
 WebAssembly
 .instantiateStreaming(fetch("app.wasm"), 
 {"js":{"print":print}});
</script>
</body>
</html>


五、跑起來看看
我們采用相應的方式將當前目錄發佈為本地web站點，比如執行Python命令（python -m http.server），然後我們利用瀏覽器訪問此站點的默認文件index.html，瀏覽器的控制臺輸出就會看到WebAssembly模塊初始化輸出的四個運算表達式。

六、調用導出函數
上面我們演示了WebAssembly模塊在初始化的時候調用導入的JavaScript函數，現在我們來演示JavaScript應用如何調用從WebAssembly導出的函數，為此我們將app.wat的代碼改寫成如下的形式，僅僅保留4個導出的函數add、sub、mul和div。

(module
 (func (export "add") (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.add)

 (func (export "sub") (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.sub)

 (func (export "mul") (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.mul)

 (func (export "div") (param $x i32) (param $y i32) (result i32)
 local.get $x
 local.get $y
 i32.div_u)
)


index.html中的Javascript代碼也做了如下的修改：我們在調用WebAssembly.instantiateStreaming函數成功加載WebAssembly模塊並創建對應模塊實例後，利用返回結果的instance屬性得到這個模塊實例。模塊導出的成員都保存在該實例的exports屬性返回的集合中，為此我們從中提取出導出的四個返回，並利用它們完成對應的運算後，調用console.log函數將包含結果的運算表達式輸出到控制臺上。由於WebAssembly模塊不在需要調用導入的函數，所以調用instantiateStreaming函數的時候不需要在指定導入對象。
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var url="app.wasm";
 WebAssembly
 .instantiateStreaming(fetch("app.wasm"))
 .then(result => {
var exports = result.instance.exports;

var result = exports.add(1,2);
console.log(`1   2 = ${result}`);

 result = exports.sub(1,2);
console.log(`1 - 2 = ${result}`);

 result = exports.mul(1,2);
console.log(`1 * 2 = ${result}`);

 result = exports.div(1,2);
console.log(`1 / 2 = ${result}`);
 });
</script>
</body>
</html>


程序運行之後，瀏覽器的控制臺上依然會輸出相同的結果。