WebAssembly：隨風潛入夜

What？

　　WebAssembly 是一種二進制格式的類彙編代碼，能夠被瀏覽器加載和並進一步編譯成可執行的機器碼，從而在客戶端運行。它還能夠做爲高級語言的編譯目標，理論上任何語言均可以編譯爲 WebAssembly。

　　咱們知道彙編語言就是機器碼的一種直譯版本，它是一套指令的集合，必須與特定機器匹配。WebAssembly 雖然也能夠當作彙編代碼，但有一點不一樣，它是與特定機器無關的，它的指令被稱爲虛擬指令，並不是真正的處理器指令。也就是說 WebAssembly 是一個平臺無關的通用編譯目標，能夠運行在各類設備上，包括手機和物聯網。

　　WebAssembly 起源於 Mozilla 的一個項目：ASM.js，這玩意兒簡單的說就是 JS 的一個輕簡版子集，去除了動態類型、對象、垃圾回收等損耗性能的部件。它的做用是成爲 C/C++ 的編譯目標，從而能將大中型遊戲引入瀏覽器，事實證實效果不錯。然而 ASM.js 畢竟仍然是 JS，它不具有原生代碼的一些功能，如 SIMD、線程、共享內存等，所以 ASM.js 進一步發展，就成了 WebAssembly。

　　WebAssembly 的實質是 AST，而非字節碼（bytecode），使用 AST 的緣由是由於 AST 比字節碼更容易壓縮，也更容易翻譯。

　　做爲瀏覽器廠商四巨頭（谷歌、蘋果、火狐、微軟）合做共謀的產物，WebAssembly 的應用前景不可小覷。

 

Why？

　　隨着高計算量 Web 應用（3D圖形、遊戲、VR等）的出現，JavaScript 的速度又一次顯得不夠用了。WebAssembly 的目的就是讓瀏覽器多一種運行更快速的代碼。

　　WebAssembly 比 JS 快這是顯然的，一個接近 native code，另外一個是動態類型的解釋型語言，徹底無法比。簡單比較一下 JS 和 WebAssembly 的運行時過程就知道 WebAssembly 究竟快在哪兒了：

       WebAssembly 不只運行更快，傳輸也更快，由於它是二進制格式的，壓縮率更高，體積更小。引用 Opera CTO 羅志宇的說法，WebAssembly 就是對 JS 性能問題的終極填坑方案。

       在瀏覽器中引入 native code 的嘗試其實早就有了，可是幾乎沒有一個成功的，不管是 Java Applet，仍是谷歌的 Portable Native。Brendan Eich 對此的見解是，這些方案試圖重建一個系統來替代 JS，這種革命式的改造在無權威的互聯網世界是行不通的，由於 JS 已經在 web 端造成了天然壟斷地位，若是僅僅爲了改善性能問題，就完全推翻重構，無異於削足適履，瀏覽器廠商是不幹的。

　　做爲實用主義者，Brendan Eich 認爲現實老是以漸進的方式改良，所以 WebAssembly 被設計爲與 JS 協同使用，它既不會，也不可能替代 JS。

 

How？

　　生成 WebAssembly 的方式有多種，能夠直接手寫，由於 WebAssembly 提供了文本形式，寫起來跟彙編差很少。更通行的方式是將用其它語言——目前主要是靜態語言（C、C++、Rust等）編寫的代碼編譯成 WebAssembly（.wasm），編譯工具最主要的是 LLVM。若是要支持動態語言，如 Python、Ruby 甚至 JS，那麼編譯器必須引入更多的擴展。

　　LLVM 編譯的基本工做機制是：首先使用一種針對特定語言的插件（相似於 webpack 中的 loader）將該語言編譯爲一種中間態形式（IR），而後再由 LLVM 對 IR 進一步編譯、優化，從而獲得.wasm。固然也有其它的編譯工具，如 Emscripten、Binaryen 等。工具鏈的便捷程度是影響 WebAssembly 發展的一個重要因素。

       獲得 .wasm 文件以後怎麼用呢？目前 .wasm 須要由 JS 引入後才能運行，JS 中有一個用於操做二進制代碼的 API：ArrayBuffer，JS 使用 ArrayBuffer 加載 .wasm，而後調用編譯方法，而後再建立實例。WebAssembly 尚未集成 Web API，要調用 Web API，就必須藉助 JS。將來計劃容許 WebAssembly 直接調用 Web API，而且讓 .wasm 模塊像 ES6 模塊同樣易於使用。

　　目前 Chrome、FF、Edge、Safari 最新版都已支持 WebAssembly，對於不支持 WebAssembly 的瀏覽器，會有 polyfill 把 WebAssembly 從新翻譯爲 JavaScript。

 

Pros？

　　一、WebAssembly 使得 web 應用具有了原生應用的性能；

　　二、WebAssembly 提供了一種符合 W3C 標準的技術，從而能夠取代私有的、非標的、安全性差的插件，如 flash 和 Silverlight；

　　三、從古至今，瀏覽器只支持一種程序語言：JS，WebAssembly 使得有更多語言可以用於打造 web 應用；

　　四、WebAssembly 是一個漸進式的方案，而非疾風驟雨，水火不相容的革命，所以更具備現實可操做性。

 

Cons？

　　如今還很差說，我們拭目以待吧。

 

參考資料：

https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/#

https://medium.com/javascript-scene/why-we-need-webassembly-an-interview-with-brendan-eich-7fb2a60b0723

 

廣告

我廠技術部公衆號 codeLofter，目前是我在打理，除了文章，還會發一些國外技術推文（twitter）集錦