WebAssembly進階系列一：WebAssembly是什麼

導語：相信很多人據說過 WebAssembly，它是由 Google、Microsoft、Mozilla、Apple 等幾家大公司合做發起的一個關於面向Web的通用二進制和文本格式的項目。如今就讓咱們一步步揭開WebAssembly的神祕面紗，並親自動手將WebAssembly應用在實際業務中。

1. WebAssembly（wasm）究竟是什麼

WebAssembly究竟是何方神聖？來自官方的定義以下：

翻譯成中文的話，WebAssembly（wasm）就是一個可移植、體積小、加載快而且兼容 Web 的全新格式。

實際上，WebAssembly是一種新的字節碼格式，旨在成爲高級語言的編譯目標，目前可使用C、C++、Rust、Go、Java、C#等編譯器（將來還有更多）來建立wasm模塊（見下圖）。該模塊以二進制的格式發送到瀏覽器，並在專有虛擬機上執行，與JavaScript虛擬機共享內存和線程等資源。

wasm模塊老是與JavaScript「膠水」代碼一塊兒使用，在必要的時候能夠執行一些有用的操做。WebAssembly能夠看作是對JavaScript的增強，彌補JavaScript在執行效率上的缺陷。

2. 爲何要有WebAssembly

自從Brendan Eich創造了JavaScript語言以來，一直都沒有靜態變量類型。因爲JavaScript的動態變量，上一秒多是Array，下一秒就變成了Object，那麼引擎所作的優化就失去了做用，這也是致使運行效率下降的緣由。

爲了解決這個問題，WebAssembly的前身，asm.js誕生了。可是不管asm.js對靜態類型的問題解決的再好，它始終逃不過要通過Parser和ByteCode Compiler，這也是JavaScript代碼在引擎執行過程當中最耗時的兩步。

所以在2015年，咱們迎來了WebAssembly。WebAssembly是C、C++、Rust、Go、Java、C#等語言的編譯目標，通過編譯器編譯以後的二進制代碼，無需通過Parser和ByteCode Compiler這兩步，比asm.js更快。WebAssembly強制使用靜態類型，在語法上徹底脫離JavaScript，同時具備沙盒化的執行環境，安全性更好。

3. WebAssembly的優點

讓咱們分別對比下WebAssembly版本和原生JavaScript版本的遞歸無優化的Fibonacci函數，下圖是這兩個函數在值爲4五、4八、50時的性能對比：

顯而易見WebAssembly幾乎比JavaScript快一倍，這對於須要高計算量、對性能要求高的應用場景如圖像/視頻解碼、圖像處理、3D/WebVR/AR等，優點很是明顯。咱們能夠將現有的用C、C++等語言編寫的庫直接編譯成WebAssembly運行到瀏覽器上，而且能夠做爲庫被JavaScript引用。那就意味着咱們能夠將不少後端的工做轉移到前端，減輕服務器的壓力，這是WebAssembly最爲吸引人的特性。

讓咱們再用個動圖直觀感覺下WebAssembly與JavaScript的運行速度，相比之下WebAssembly確實快不少。若是想本身跑跑看或是看源碼的開發者，能夠移駕 Guy Bedford 的repo - Wasm Demo。

除此以外，WebAssembly還會引入GC / DOM / Web API等一系列特性，DOM和Web API很重要，這意味着WebAssembly可直接和html以及瀏覽器進行交互，從技術角度來看能夠徹底取代JavaScript。

4. WebAssembly能取代js嗎

自從有了WebAssembly以來，一直有一股聲音說能夠取代JavaScript了。他們的觀點是傳統的解釋型語言在執行時免不了要進行詞法分析 -> 語法分析 -> 預解析 -> 解釋執行等過程，性能太差。可是現代瀏覽器的JS引擎在進化的過程當中引入了許多優化手段如字節碼緩存，能夠省掉每次解釋執行時從新遍歷語法樹的過程，虛擬機可直接取指 -> 解碼 -> 運行。Chrome V8的JIT在運行過程當中直接生成並緩存機器碼，下次執行時可由計算機直接執行，連解碼的過程都省掉了。雖然JavaScript跟C、C++等靜態語言相比執行速度還有很大差距，可是大多數Web應用的性能瓶頸已經不是JavaScript語言自己了，反而是網絡資源的加載，這一點WebAssembly並沒有優點。

並且，當要開發一個新的功能時，不管你是選擇用C、C++、Rust仍是Java，開發成本都要比JavaScript高。遇到不兼容WebAssembly的瀏覽器（見下圖），你還得考慮降級爲用JavaScript實現，這無疑增長了業務複雜性。

5. 寫在最後

雖然WebAssembly還在持續不斷地發展，但已經有很多開發者積極擁抱並把它應用於實際業務中，相信WebAssembly和JavaScript能夠長期共存，充分發揮各自的優點一塊兒大放光彩。

參考資料

1. 認識 WebAssembly
2. WebAssembly的過去、如今和將來
3. 瞭解 WebAssembly 的基礎使用方法
4. WebAssembly：解決 JavaScript 痼疾的銀彈？
5. WebAssembly徹底入門——瞭解wasm的前世今身
6. WebAssembly兼容性

我的公衆號：前端開發升值記