WebAssembly徹底入門——瞭解wasm的前世今身

前言

接觸WebAssembly以後，在google上看了不少資料。感受對WebAssembly的使用、介紹、意義都說的比較模糊和籠統。感受看了以後收穫沒有達到預期，要麼是文章中的例子本身去實操不能成功，要麼就是不知所云、一臉矇蔽。本着業務催生技術的態度，這邊文章就誕生了。前部分主要是對WebAssembly的背景作一些介紹，WebAssembly是怎麼出現的，優點在哪兒。若是想直接開始擼代碼試試效果，能夠直接跳到最後一個板塊。

WebAssembly是什麼？

定義

首先咱們給它下個定義。

WebAssembly 或者 wasm 是一個可移植、體積小、加載快而且兼容 Web 的全新格式

例子

固然，我知道，即便你看了定義也不知道WebAssembly究竟是什麼東西。廢話很少說，咱們經過一個簡單的例子來看看WebAssembly究竟是什麼。

上圖的左側是用C++實現的求遞歸的函數。中間是十六進制的Binary Code。右側是指令文本。可能有人就問，這跟WebAssembly有個屁的關係？其實，中間的十六進制的Binary Code就是WebAssembly。

編譯目標

你們能夠看到，其可寫性和可讀性差到沒法想象。那是由於WebAssembly不是用來給各位用手一行一行擼的代碼，WebAssembly是一個編譯目標。什麼是編譯目標？當咱們寫TypeScript的時候，Webpack最後打包生成的JavaScript文件就是編譯目標。可能你們已經猜到了，上圖的Binary就是左側的C++代碼通過編譯器編譯以後的結果。

WebAssembly的由來

性能瓶頸

在業務需求愈來愈複雜的如今，前端的開發邏輯愈來愈複雜，相應的代碼量隨之變的愈來愈多。相應的，整個項目的起步的時間愈來愈長。在性能很差的電腦上，啓動一個前端的項目甚至要花上十多秒。這些其實還好，說明前端愈來愈受到重視，愈來愈多的人開始進行前端的開發。

可是除了邏輯複雜、代碼量大，還有另外一個緣由是JavaScript這門語言自己的缺陷，JavaScript沒有靜態變量類型。這門解釋型編程語言的做者Brendan Eich，倉促的創造了這門若是被普遍使用的語言，以致於JavaScript的發展史甚至在某種層面上變成了填坑史。爲何說沒有靜態類型會下降效率。這會涉及到一些JavaScript引擎的一些知識。

靜態變量類型所帶來的問題

這是Microsoft Edge瀏覽器的JavaScript引擎ChakraCore的結構。咱們來看一看咱們的JavaScript代碼在引擎中會經歷什麼。

• JavaScript文件會被下載下來。
• 而後進入Parser，Parser會把代碼轉化成AST（抽象語法樹）.
• 而後根據抽象語法樹，Bytecode Compiler字節碼編譯器會生成引擎可以直接閱讀、執行的字節碼。
• 字節碼進入翻譯器，將字節碼一行一行的翻譯成效率十分高的Machine Code.

在項目運行的過程當中，引擎會對執行次數較多的function記性優化，引擎將其代碼編譯成Machine Code後打包送到頂部的Just-In-Time(JIT) Compiler，下次再執行這個function，就會直接執行編譯好的Machine Code。可是因爲JavaScript的動態變量，上一秒多是Array，下一秒就變成了Object。那麼上一次引擎所作的優化，就失去了做用，此時又要再一次進行優化。

asm.js出現

因此爲了解決這個問題，WebAssembly的前身，asm.js誕生了。asm.js是一個Javascript的嚴格子集，合理合法的asm.js代碼必定是合理合法的JavaScript代碼，可是反之就不成立。同WebAssembly同樣，asm.js不是用來給各位用手一行一行擼的代碼，asm.js是一個編譯目標。它的可讀性、可讀性雖然比WebAssembly好，可是對於開發者來講，仍然是沒法接受的。

asm.js強制靜態類型，舉個例子。

function asmJs() {
    'use asm';
    
    let myInt = 0 | 0;
    let myDouble = +1.1;
}

爲何asm.js會有靜態類型呢？由於像0 | 0這樣的，表明這是一個Int的數據，而+1.1則表明這是一個Double的數據。

asm.js不能解決全部的問題

可能有人有疑問，這問題不是解決了嗎？那爲何會有WebAssembly？WebAssembly又解決了什麼問題？你們能夠再看一下上面的ChakraCore的引擎結構。不管asm.js對靜態類型的問題作的再好，它始終逃不過要通過Parser，要通過ByteCode Compiler，而這兩步是JavaScript代碼在引擎執行過程中消耗時間最多的兩步。而WebAssembly不用通過這兩步。這就是WebAssembly比asm.js更快的緣由。

WebAssembly橫空出世

因此在2015年，咱們迎來了WebAssembly。WebAssembly是通過編譯器編譯以後的代碼，體積小、起步快。在語法上徹底脫離JavaScript，同時具備沙盒化的執行環境。WebAssembly一樣的強制靜態類型，是C/C++/Rust的編譯目標。

WebAssembly的優點

WebAssembly和asm.js性能對比

下面的圖是Unity WebGL使用和不使用WebAssembly的起步時間對比的一個BenchMark，給你們看成一個參考。
能夠看到，在FireFox中，WebAssembly和asm.js的性能差別達到了2倍，在Chrome中達到了3倍，在Edge中甚至達到了6倍。經過這些對比也能夠從側面看出，目前全部的主流瀏覽器都已經支持WebAssembly V1（Node >= 8.0.0）.

與JavaScript作對比

我本身在一個用create-react-app新建的項目中，分別對比了WebAssembly版本和原生JavaScript版本的遞歸無優化的Fibonacci函數，下圖是這兩個函數在值是4五、4八、50的時候的性能對比。

看圖說話，這就是WebAssembly與JavaScript很實際的一個性能對比。幾乎穩定的是JavaScript的兩倍。

WebAssembly在大型項目中的應用

在這裏可以舉的例子仍是不少，好比AutoCAD、GoogleEarth、Unity、Unreal、PSPDKit、WebPack等等。拿其中幾個來簡單說一下。

AutoCAD

這是一個用於畫圖的軟件，在很長的一段時間是沒有Web的版本的，緣由有兩個，其一，是Web的性能的確不能知足他們的需求。其二，在WebAssembly沒有面世以前，AutoCAD是用C++實現的，要將其搬到Web上，就意味着要重寫他們全部的代碼，這代價十分的巨大。

而在WebAssembly面世以後，AutoCAD得以利用編譯器，將其沉澱了30多年的代碼直接編譯成WebAssembly，同時性能基於以前的普通Web應用獲得了很大的提高。正是這些緣由，得以讓AutoCAD將其應用從Desktop搬到Web中。

Google Earth

Google Earth也就是谷歌地球，由於須要展現不少3D的圖像，對性能要求十分高，因此採起了一些Native的技術。最初的時候就連Google Chrome瀏覽器都不支持Web的版本，須要單獨下載Google Earth的Destop應用。而在WebAssembly以後呢，谷歌地球推出了Web的版本。而聽說下一個能夠運行谷歌地球的瀏覽器是FireFox。

Unity和Unreal遊戲引擎

這裏給兩個油管的連接本身體驗一下，你們注意上網的方式。

• Unity WebGL的戳這裏
• Unreal引擎的戳這裏

WebAssembly要取代JavaScript？

答案是否認的，請看下圖。

你們能夠看到這是一個協做關係。WebAssembly是被設計成JavaScript的一個完善、補充，而不是一個替代品。WebAssembly將不少編程語言帶到了Web中。可是JavaScript因其難以想象的能力，仍然將保留現有的地位。

何時使用WebAssembly？

說了這麼多，我到底何時該使用它呢？總結下來，大部分狀況分兩個點。

• 對性能有很高要求的App/Module/遊戲
• 在Web中使用C/C++/Rust/Go的庫
  舉個簡單的例子。若是你要實現的Web版本的Ins或者Facebook， 你想要提升效率。那麼就能夠把其中對圖片進行壓縮、解壓縮、處理的工具，用C++實現，而後再編譯回WebAssembly。

WebAssembly的幾個開發工具

• AssemblyScript。支持直接將TypeScript編譯成WebAssembly。這對於不少前端同窗來講，入門的門檻仍是很低的。
• Emscripten。能夠說是WebAssembly的靈魂工具不爲過，上面說了不少編譯，這個就是那個編譯器。將其餘的高級語言，編譯成WebAssembly。
• WABT。是個將WebAssembly在字節碼和文本格式相互轉換的一個工具，方便開發者去理解這個wasm究竟是在作什麼事。

WebAssembly的意義

在個人我的理解上，WebAssembly並無要替代JavaScript，一統天下的意思。我總結下來就兩個點。

• 給了Web更好的性能
• 給了Web更多的可能
  關於WebAssembly的性能問題，以前也花了很大的篇幅講過了。而更多的可能，隨着WebAssembly的技術愈來愈成熟，勢必會有更多的應用，從Desktop被搬到Web上，這會使原本已經十分強大的Web更加豐富和強大。

WebAssembly實操

要進行這個實際操做，你須要安裝上文提到過的編譯器Emscripten，而後按照這個步驟去安裝。如下的步驟都默認爲你已經安裝了Emscripten。

WebAssembly在Node中的應用

導入Emscripten環境變量

進入到你的emscripten安裝目錄，執行如下代碼。

source emsdk/emsdk_env.sh

新建C文件

用C實現一個求和文件test.c，以下。

int add(int a, int b) {
    return a + b;
}

使用Emscripten編譯C文件

在一樣的目錄下執行以下代碼。

emcc test.c -Os -s WASM=1 -s SIDE_MODULE=1 -o test.wasm

emcc就是Emscripten編譯器，test.c是咱們的輸入文件，-Os表示此次編譯須要優化，-s WASM=1表示輸出wasm的文件，由於默認的是輸出asm.js，-s SIDE_MODULE=1表示就只要這一個模塊，不要給我其餘亂七八糟的代碼，-o test.wasm是咱們的輸出文件。

編譯成功以後，當前目錄下就會生成test.wasm。

編寫在Node中調用的代碼

新建一個js文件test.js。代碼以下。

const fs = require('fs');
let src = new Uint8Array(fs.readFileSync('./test.wasm'));
const env = {
    memoryBase: 0,
    tableBase: 0,
    memory: new WebAssembly.Memory({
        initial: 256
    }),
    table: new WebAssembly.Table({
        initial: 2,
        element: 'anyfunc'
    }),
    abort: () => {throw 'abort';}
}
WebAssembly.instantiate(src, {env: env})
.then(result => {
    console.log(result.instance.exports._add(20, 89));
})
.catch(e => console.log(e));

執行test.js

運行如下代碼。

node test.js

而後就能夠看到輸出的結果109了。

WebAssembly在React當中的應用

經過fetch的方法調用

直接用fetch的方式。大概的調用方式以下。

const fibonacciUrl = './fibonacci.wasm';
const {_fibonacci} = await this.getExportFunction(fibonacciUrl);

而getExportFunction具體代碼以下。

getExportFunction = async (url) => {
    const env = {
      memoryBase: 0,
      tableBase: 0,
      memory: new WebAssembly.Memory({
        initial: 256
      }),
      table: new WebAssembly.Table({
        initial: 2,
        element: 'anyfunc'
      })
    };
    const instance = await fetch(url).then((response) => {
      return response.arrayBuffer();
    }).then((bytes) => {
      return WebAssembly.instantiate(bytes, {env: env})
    }).then((instance) => {
      return instance.instance.exports;
    });
    return instance;
};

經過import C文件來調用

先經過Import的方式來引進依賴。

import wasmC from './add.c';

而後進行調用。具體的方式以下。

wasmC({
  'global': {},
  'env': {
    'memoryBase': 0,
    'tableBase': 0,
    'memory': new WebAssembly.Memory({initial: 256}),
    'table': new WebAssembly.Table({initial: 0, element: 'anyfunc'})
  }
}).then(result => {
  const exports = result.instance.exports;
  const add = exports._add;
  const fibonacci = exports._fibonacci;
  console.log('C return value was', add(2, 5643));
  console.log('Fibonacci', fibonacci(2));
});

詳細的代碼在這裏，歡迎Star。

寫在後面

現在技術出現的愈來愈多，可是實際上在工做中可以用到的，越並非那麼多。其實不少大廠所輸出的一些技術，都是有業務場景的，有業務作推進。而不是憑空造輪子。因此總結下來適合本身的纔是最好的。固然不是說不要了解新技術，瞭解新技術跟上步伐是十分必要的。咱們如今不用，不表明不須要了解。相反，之後再遇到相似的業務場景時，咱們就會多一種選擇，能夠更加從容的對待。

往期文章：

• 如何在SpringBoot中集成JWT(JSON Web Token)鑑權
• 手把手教你從零開始搭建SpringBoot後端項目框架

相關：

• 我的網站： Lunhao Hu
• 微信公衆號： SH的全棧筆記（或直接在添加公衆號界面搜索微信號LunhaoHu）