WebAssembly漫談

WebAssembly是什麼

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.javascript

—— webassembly.org/html

從官網釋義來看，Wasm是基於棧式虛擬機的二進制指令格式。做爲高級編程語言的編譯目標，它具備強可移植性，容許客戶端、服務端應用部署在web上。前端

誕生背景

JavaScript缺陷

先來看看 JavaScript 代碼在 V8 引擎中是怎麼工做的[1]。java

JavaScript 進入 Parser（解析器），Parser 會將其轉化成 AST（抽象語法樹）
根據抽象語法樹，Interpreter（解釋器）會生成引擎可以直接閱讀和執行的 Bytecode（字節碼）
接着，Compiler（編譯器）將字節碼逐行翻譯成可高效執行的 Machine Code（機器碼）
對於執行次數較多的函數，引擎會將其編譯成 Machine Code 並進行 JIT 優化（Just-In-Time編譯），下次再執行這個函數的時候，就會直接執行編譯好的 Machine Code。

不像 C++、JAVA 這些強類型語言，JavaScript 是一種弱類型的語言，須要在運行過程當中動態編譯。一個 JS變量，可能在上一秒是個Number，下一秒就變成了Array，這種靈活性使得代碼在引擎中的優化有限。git

asm.js

既然 JavaScript 存在由於弱類型帶來的天生缺陷，那麼，是否能夠經過特殊寫法使其具備隱式類型推斷功能，來對代碼性能進行優化呢？鑑於此，WebAssembly的前身，asm.js 出現了。github

舉個例子，下述代碼中，｜0 會使引擎推斷出變量 a 是一個整數。web

let a = 1.2 | 0
console.log(a) // 1
複製代碼

可是，asm.js 並不能解決全部問題：shell

asm.js 是 JavaScript 的嚴格子集，開發者沒法使用 JS 的全部功能；
asm.js 一樣是做爲一種編譯目標存在的（Emscripten 可將 C++/C 編譯成 asm.js），雖然語法上比 WebAssembly 清楚得多，可是靠人工手寫仍是有必定難度；
此外，不管 asm.js 對類型推導的問題作得再好，它始終逃不過要通過 Parser 和 Interpreter 這兩步，而這兩步是 JS 代碼在引擎執行過程當中最耗時的兩步。

WebAssembly出現

鑑於 asm.js 存在的問題，WebAssembly 跳過了 Parser 和 Interpreter 這兩步，做爲編譯後的字節碼（一樣經過 Emscripten 編譯）直接在瀏覽器中運行，極大地提升了代碼在瀏覽器中的運行速度。下面是一張示意圖。編程

除了運行速度以外，Wasm 還具備如下優勢：segmentfault

特有的二進制格式有效地減少了包體積，進一步提高了瀏覽器的加載速度；
支持將 10+ 種編程語言（C/C++, Rust, Go等）編譯成 Wasm，這意味着能夠借鑑其餘語言的生態，使其餘語言下的標準類庫在瀏覽器中直接使用；
安全的沙箱運行環境，在瀏覽器中一樣支持同源策略等權限限制；
各大主流瀏覽器廠商（Firefox, Chrome, Safari, Edge等）相繼支持 WebAssembly，並不斷完善標準。目前，WebAssembly 已成爲繼 HTML、CSS、JavaScript 以後的第 4 種 Web 語言。

實操演示

先大體描述下 Wasm 程序的工做過程：

使用其餘語言（C/C++, Rust, Go等）編寫程序，並經過各自的工具鏈編譯爲 WebAssembly 文件（.wasm格式）；
經過 fetch、XMLHttpRequest 等獲取 .wasm 文件，獲得一串 ArrayBuffer；
將 ArrayBuffer 編譯爲瀏覽器可執行的模塊，並實例化；
調用從 Wasm 模塊內導出的方法，完成所需操做。

下面來看一個實際的例子：

環境安裝

Git：用於拉取 Emsdk 等
CMake：編譯 C 語言
Host system compiler（宿主環境編譯工具）：Linux - GCC、OSX - Xcode、 Win - VS Code
Python 2.7+
Emscripten SDK：Wasm 編譯器

git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk.bat install latest
./emsdk.bat activate latest
./emsdk_env.bat // 配置環境變量，每次從新登陸或者新建shell窗口，都要執行一次這行命令
複製代碼

Emscripten編譯C語言文件

int multiply(int a,int b){
    return a * b;
}
複製代碼

執行 emcc index.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm，生成 math.wasm。

加載調用

<html>
<head>
  <script> // Check for wasm support. if (!('WebAssembly' in window)) { alert('you need a browser with wasm support enabled :('); } function loadWebAssembly(filename, imports = {}) { return fetch(filename) .then(response => response.arrayBuffer()) .then(buffer => { imports.env = imports.env || {} Object.assign(imports.env, { memoryBase: 0, tableBase: 0, __memory_base: 0, __table_base: 0, memory: new WebAssembly.Memory({ initial: 256, maximum: 256 }), table: new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' }) }) return WebAssembly.instantiate(buffer, imports) }) .then(result => result.instance) } loadWebAssembly('math.wasm') .then(instance => { const { multiply } = instance.exports var button = document.getElementById('run'); button.value = 'Call wasm multiply'; button.addEventListener('click', function() { alert('60 * 11 = ' + multiply(60, 11)) }, false); }) </script>
</head>
<body>
  <input type="button" id="run" value="waiting for WebAssembly..."/>
</body>
</html>
複製代碼

用 http-server 在本地啓動一個靜態資源服務器並訪問頁面，可看到在點擊按鈕後，彈窗顯示 660，說明咱們成功地在 JS 中調用了 C 文件的方法。

應用場景

目前，Wasm 主要有如下幾類應用場景：

1 性能

對於那種計算密集型，或者對性能要求高的場景，如：圖像/視頻解碼、圖像處理、3D/WebVR/AR 等，Wasm 的優點明顯。如：

Bilibili：當你的視頻還在上傳中，已經能夠自由選擇AI推薦的封面。這裏採用了 webassembly+AI 的前端整合。Wasm 負責讀取本地視頻，生成圖片；tensorflow.js 負責加載 AI 訓練過的 model，讀取圖片並打分。
Figma：一個基於瀏覽器的協做式 UI 設計工具，做用相似於 Sketch。

2 複用

Wasm 可將多種高級語言編譯爲二進制碼，這使在瀏覽器中複用其餘語言的生態成爲可能。如：

Unity 教程遊戲的 Wasm 版本：webassembly.org.cn/demo/
利用 OpenCV 庫實現瀏覽器端實時頭像捕捉 & 圖片處理：vinissimus.github.io/opencv-js-w…

3 跨平臺

WASI（WebAssembly System Interface）的出現，使得 WebAssembly 也能應用在非瀏覽器的環境中，這給了 Serverless 的更大規模落地有了更多的想象空間[4]。

發展示狀

開發語言

目前，開發者們最喜好的 Wasm 開發語言有：Rust, C++, AssemblyScript等。其中，AssemblyScript 是專爲 Wasm 設計的類 TS 的語言，方便前端開發者上手。

應用類型

現階段的 WebAssembly 應用以 Web 應用開發爲主，但具體是哪些類型的 Web 應用還有待調研。此外，在遊戲開發、Serverless應用、容器化、音視頻處理、IoT等方面也有較多應用。

參考

最後

搜索公衆號Eval Studio，關注咱們，獲取更多動態