WebAssembly：隨風潛入夜

標籤：rust   中間   bridged   操作性   設計   計算   改善   運行時   回收   

What？

　　WebAssembly 是一種二進位格式的類彙編代碼，可以被瀏覽器載入和並進一步編譯成可執行檔機器碼，從而在用戶端運行。它還可以作為進階語言的編譯目標，理論上任何語言都可以編譯為 WebAssembly。

　　我們知道組合語言就是機器碼的一種直譯版本，它是一套指令的集合，必須與特定機器匹配。WebAssembly 雖然也可以看成彙編代碼，但有一點不同，它是與特定機器無關的，它的指令被稱為虛擬指令，並非真正的處理器指令。也就是說 WebAssembly 是一個平台無關的通用編譯目標，可以運行在各種裝置上，包括手機和物聯網。

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

　　WebAssembly 的實質是 AST，而非位元組碼（bytecode），使用 AST 的原因是因為 AST 比位元組碼更容易壓縮，也更容易翻譯。

　　作為瀏覽器廠商四巨頭（Google、蘋果、Firefox、微軟）合作共謀的產物，WebAssembly 的應用前景不可小覷。

 

Why？

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

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

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

       在瀏覽器中引入 native code 的嘗試其實早就有了，但是幾乎沒有一個成功的，無論是 Java Applet，還是Google的 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？

　　1、WebAssembly 使得 web 應用具備了原生應用的效能；

　　2、WebAssembly 提供了一種符合 W3C 標準的技術，從而可以取代私人的、非標的、安全性差的外掛程式，如 flash 和 Silverlight；

　　3、從古至今，瀏覽器只支援一種程式語言：JS，WebAssembly 使得有更多語言能夠用於打造 web 應用；

　　4、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

WebAssembly：隨風潛入夜