為什么要說WebAssembly呢?

其實(shí)對(duì)于我而言，之前有了解過 WebAssembly，知道他很強(qiáng)大，但是沒有實(shí)際的使用過。偶然間在調(diào)研和使用 ffmpeg 的過程中，看到了很多瀏覽器端的方案，都是使用了 WebAssembly，原來已經(jīng)有很多實(shí)際的應(yīng)用真的在使用它，那么它是不是 web 的未來呢？這篇文章主要就是帶大家走進(jìn) WebAssembly，網(wǎng)上有很多類似的文章，但對(duì)于大多數(shù)的前端同學(xué)來說可能有難以理解的地方，所以本次文章盡量用通俗易懂的方式帶大家了解 WebAssembly。

WebAssembly 是什么?

「官方的解釋」：WebAssembly/wasm WebAssembly 或者 wasm 是一個(gè)可移植、體積小、加載快并且兼容 Web 的全新格式，是由主流瀏覽器廠商組成的 W3C 社區(qū)團(tuán)體制定的一個(gè)新的規(guī)范。

「我們來通俗的解釋」：WebAssembly 能夠把非 JavaScript 代碼運(yùn)行在瀏覽器中，這些代碼可以是C、C++、Rust等等。

WebAssembly 如何與 Web兼容的?

WebAssembly 提供了一種在網(wǎng)絡(luò)平臺(tái)以接近本地速度的方式運(yùn)行多種語言編寫的代碼的方式。

WebAssembly原理

Web 平臺(tái)可以看成有兩個(gè)部分：

VM，用于運(yùn)行 Web 應(yīng)用代碼，例如 JS 引擎運(yùn)行 JS 代碼??

Web API，例如 DOM、CSSOM、WebGL、IndexedDB、Web Audio API?

在以前，VM 只能加載 JS 運(yùn)行，JS 可能足夠滿足我們的需求，但如今JS會(huì)有各種各樣的原生性能的領(lǐng)域，比如3D 游戲、VR/AR、計(jì)算機(jī)視覺、圖片/視頻編輯等，并且，下載和解析體積比較大的JS是很困難的。

隨著 WebAssembly 的出現(xiàn)，上述提到的 VM 現(xiàn)在可以加載兩種類型的代碼執(zhí)行：JavaScript 和 WebAssembly。

雖然同樣運(yùn)行在瀏覽器中，但是 WebAssembly 不是用來替代 Javascript 的，他們其實(shí)是相輔相成的。WebAssembly 會(huì)被編譯進(jìn)你的瀏覽器，在你的 CPU 上以接近原生的速度運(yùn)行。你可以直接在 JavaScript 中將它們當(dāng)作模塊來用。也就是說，你可以通過 WebAssembly來充分利用編譯代碼的性能，同時(shí)保持 JavaScript 的靈活性。WebAssembly 其實(shí)是一種中間格式。

JS 是高層次的語言，靈活且極具表現(xiàn)力，動(dòng)態(tài)類型、不需要編譯步驟，并且有強(qiáng)大的生態(tài)，非常易于編寫 Web 應(yīng)用。

WebAssembly 是一種低層次、類匯編的語言，使用一種緊湊的二級(jí)制格式，能夠以近乎原生的性能運(yùn)行，并提供了低層次的內(nèi)存模型，是 C++、Rust 等語言的編譯目標(biāo)，使得這類語言編寫的代碼能夠在 Web 上運(yùn)行。

WebAssembly 的特性?

• 「快速、高效、可移植」—— 通過利用常見的硬件能力，WebAssembly 代碼在不同平臺(tái)上能夠以接近本地速度運(yùn)行。
• 「可讀、可調(diào)試」—— WebAssembly 是一門低階語言，但是它確實(shí)有一種人類可讀的文本格式（其標(biāo)準(zhǔn)即將得到最終版本），這允許通過手工來寫代碼，看代碼以及調(diào)試代碼。
• 「保持安全」—— WebAssembly 被限制運(yùn)行在一個(gè)安全的沙箱執(zhí)行環(huán)境中。像其他網(wǎng)絡(luò)代碼一樣，它遵循瀏覽器的同源策略和授權(quán)策略。
• 「不破壞網(wǎng)絡(luò)」—— WebAssembly 的設(shè)計(jì)原則是與其他網(wǎng)絡(luò)技術(shù)和諧共處并保持向后兼容。

WebAssembly 和 JavaScript?

我們先來看下 WebAssembly 在瀏覽器中的位置：

WebAssembly在瀏覽器中的位置

• WebAssembly 和 JavaScript 在同一個(gè)層次執(zhí)行，也就是JS Engine
• 和 JavaScript 一樣，能夠操作 WebAPI

根據(jù)上圖，我們先來看下 JavaScript 在 Web 中所做的工作：

每個(gè)圖形大概的表示每個(gè)階段消耗的時(shí)間，JS 在 Web 中主要經(jīng)過了這些過程

• 解析（parse）、編譯+優(yōu)化（compile + optimize）、重新優(yōu)化（re-optimize）、執(zhí)行（execute）、垃圾回收（garbage collection）

我們?cè)賮砜聪?WebAssembly 在 Web 中所做的工作：

• 解碼（parse）、編譯+優(yōu)化（compile + optimize）、執(zhí)行（execute）

因?yàn)?Wasm 的特性和它特殊的格式，在很多情況下，Wasm 比 Javascript 要更快

• 獲取 Wasm 花費(fèi)的時(shí)間更少，因?yàn)樗?JavaScript 更緊湊，特有的二進(jìn)制格式有效地減小了包體積，進(jìn)一步提升了瀏覽器的加載速度。
• 解碼 Wasm 花費(fèi)的時(shí)間更少。
• 編譯和優(yōu)化，因?yàn)?Wasm 更接近機(jī)器代碼。
• 不需要重新優(yōu)化，因?yàn)?Wasm 內(nèi)置了類型和其他信息，因此 JS 引擎不需要去推測(cè)它。
• 執(zhí)行通常需要更少的時(shí)間，因?yàn)?Wasm 的指令集更適合機(jī)器。
• 由于內(nèi)存是手動(dòng)管理的，因此不需要垃圾收集。

WebAssembly 的使用?

「WebAssembly 編寫和使用過程:」

• 各種語言當(dāng)前有分別對(duì)應(yīng)的不同編譯工具，能夠?qū)⒋a編譯為 wasm 格式的文件，如果所對(duì)應(yīng)的需求所使用的 wasm 是比較常見的庫，比如 ffmpeg，那么可以在 github 上找到很多已經(jīng)編譯好的 wasm 文件。
• 有文件后，可以通過 fetch 或者 等方式獲取 wasm 文件內(nèi)容，并得到一份 ArrayBuffer。
• 將得到的 ArrayBuffer 編譯為瀏覽器可執(zhí)行的模塊，并實(shí)例化
• 到這里就可以調(diào)用從 Wasm 模塊內(nèi)導(dǎo)出的方法了

下面我們具體看下每一步中的實(shí)際例子：

1. 首先需要配置編譯 WASM 所需要的環(huán)境，你首先需要先編譯 LLVM，這是運(yùn)行后續(xù)工具的先決條件。

• Git。
• CMake
• 系統(tǒng)編譯工具。Linux上，安裝 GCC。OS X 上，安裝 Xcode。Windows 上安裝 Visual Studio 2015 Community with Update 3 或更新版本。
• Python 2.7.x，在 Linux 和 OS X上，很可能已經(jīng)裝好了?？催@里。

2. 接下來，您需要通過源碼自己編譯一個(gè) Emscripten。運(yùn)行下列命令來自動(dòng)化地使用 Emscripten SDK。(因?yàn)橄旅嬗胏舉例，所以使用 c 語言的 Wasm 編譯工具 Emscripten)。

安裝程序會(huì)設(shè)置所有 Emscripten 運(yùn)行所需要的環(huán)境變量。

git clone https://github.com/juj/emsdk.git
cd emsdk

# 在 Linux 或者 Mac macOS 上
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
# 如果在你的 macos 上獲得以下錯(cuò)誤
Error: No tool or SDK found by name 'sdk-incoming-64bit'
# 請(qǐng)執(zhí)行
./emsdk install latest
# 按照提示配置環(huán)境變量即可
./emsdk activate latest


# 在 Windows 上
emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

# 注意：Windows 版本的 Visual Studio 2017 已經(jīng)被支持，但需要在 emsdk install 需要追加 --vs2017 參數(shù)。

3. 編寫C代碼（這里用C舉例）

#include <stdio.h>

int main(int argc, char ** argv){
  printf("Hello World\n");
}

4. 轉(zhuǎn)到一個(gè)已經(jīng)配置過 Emscripten 編譯環(huán)境的終端窗口中，進(jìn)入剛剛保存 hello.c 文件的文件夾中，然后運(yùn)行下列命令：

emcc hello.c -s WASM=1 -o hello.html

5. 經(jīng)過上面步驟就可以得到 .wasm 文件，下面我們使用 fetch 來加載和運(yùn)行 wasm，我們先來看一下代碼。

function fetchAndInstantiate(url, importObject) {
  return fetch(url).then(response
    response.arrayBuffer()
  ).then(bytes
    WebAssembly.instantiate(bytes, importObject)
  ).then(results
    results.instance
  );
}

• 首先我們使用 fetch 函數(shù)來獲取了 wasm 文件內(nèi)容，函數(shù)返回了 response 對(duì)象
• 我們使用 arrayBuffer 函數(shù)把 response 轉(zhuǎn)換為帶類型數(shù)組
• 最后使用 WebAssembly.instantiate 函數(shù)來進(jìn)一步編譯和實(shí)例化數(shù)組。

WebAssembly 對(duì)象是原生提供的包含了所有 WebAssembly 相關(guān)功能的命名空間 其中 WebAssembly.Instance 對(duì)象是一個(gè)有狀態(tài)的、可執(zhí)行的模塊的實(shí)例。實(shí)例對(duì)象包含所有的能夠從 JavaScript 調(diào)用到 WebAssembly 代碼的導(dǎo)出的 WebAssembly 函數(shù)。MDN WebAssembly API參考

6. 我們可以使用上面的函數(shù)來運(yùn)行我們自己的 wasm 文件。

fetchAndInstantiate('myModule.wasm', importObject)
  .then((instance) => {
    // 調(diào)用導(dǎo)出函數(shù)：
    instance.exports.exported_func();

    // 或者獲取導(dǎo)出內(nèi)存的緩存內(nèi)容：
    const i32 = new Uint32Array(instance.exports.memory.buffer);

    // 或者獲取導(dǎo)出表格中的元素：
    const table = instance.exports.table;
    console.log(table.get(0)());
  })

總結(jié)一下上面的內(nèi)容，其實(shí)就是兩種語言之間以 wasm 為橋梁進(jìn)行了一次通信：

上面的整個(gè)步驟就是我們從環(huán)境搭建到最后使用 wasm 文件的流程，當(dāng)前你所使用的語言可能不同，所使用的編譯工具自然也不同。并且以上只是最簡單的使用方式，如果考慮到性能、優(yōu)化等問題，還有很深的內(nèi)容值得探討。

WebAssembly 的應(yīng)用?

figma - 基于瀏覽器的多人實(shí)時(shí)協(xié)作 UI 設(shè)計(jì)工具

- https://www.figma.com/

Google Earth — 支持各大瀏覽器的 3D 地圖，而且運(yùn)行流暢

- https://earth.google.com/web/?

WebAssembly 的兼容性?

可以看到的是，很多現(xiàn)代瀏覽器對(duì)于 WebAssembly 的支持越來越好，未來的趨勢(shì)對(duì)于 Webassembly 來說是向好的

總結(jié)?

當(dāng)前 WebAssembly 大多數(shù)被用在對(duì)原生能力有很高要求的地方，或者是將一些應(yīng)用程序移植到 Web，但是 WebAssembly 并不僅僅局限在瀏覽器，它還被應(yīng)用在使代碼跨平臺(tái)、跨設(shè)備工作。

WebAssembly 到底是不是 web 的未來？現(xiàn)在來看的話，它還在發(fā)展階段，首先要解決的問題其實(shí)就是各瀏覽器的兼容性，其次就是性能問題。我認(rèn)為它并不是用來取代 JS 的，但是極有可能演變?yōu)?ES6 之后 Web 的新拐點(diǎn)。

參考文獻(xiàn)?

WASM中文網(wǎng)

- https://www.wasm.com.cn/

MDN WebAssembly概念

- https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts

W3C Web 中文興趣組 · WebAssembly 線上研討會(huì)2020年8月29日

- https://www.w3.org/2020/08/29-chinese-web-wasm.minutes.html?

記一次完整 C++ 項(xiàng)目編譯成 WebAssembly 的實(shí)踐

- https://developer.aliyun.com/article/740902