【專家手把手教學最新網頁檔案格式標準】瀏覽器專家教你怎麼用WebAssembly

在WebAssembly技術席捲各大主要瀏覽器業者時，來自臺灣的瀏覽器業者CloudMosa也是當仁不讓，在2017年11月時，讓超過8千萬次下載數的自家瀏覽器Puffin瀏覽器，也開始支援WebAssembly。

根據研究機構Netmarketshare統計，至2016年12月至2017年11月間，行動版Chrome和Safari的市占合計高達86.24%，而桌面版目前已支援WebAssembly的Chrome、Firefox、Safari及Edge的市占合計也高達79.4％。這些行動端、桌面端瀏覽器主力業者紛紛支援WebAssembly，更讓該技術所影響的使用者規模更大。

不過，CloudMosa並不只在近期才注意到這門技術，早在WebAssembly問世前的Asm.js時代，許多CloudMosa內部進行的小型開發專案，已經開始使用Asm.js開發，例如，把既有使用C、C++語言開發的影音解碼器程式，轉換成Asm.js格式，讓瀏覽器可以支援原生影音解碼器。

只要是新興HTML5技術，CloudMosa都必須支援

CloudMosa工程師蔡秉諺笑說，該公司選擇支援WebAssembly並沒有特別多考量，原因在於就是，「未來各大網站都會使用WebAssembly」，雖然現階段該技術問世不久，並不會迅速被廣大使用者接受，但是CloudMosa也已經觀察到，為數不少的網頁開發人員，已經開始實驗性使用。而以瀏覽器廠商角度出發，網頁開發者的使用潮流，也會決定該廠商要支援的技術方向，「現在已經開始有網頁技術內建WebAssembly的趨勢，而所有新興的HTML5技術，CloudMosa都必須要支援。」

用Emscripten將LLVM轉換成WebAssembly或Asm.js

最初Asm.js是Mozilla提出的專案，而在開發Asm.js的同時，Mozilla研究員Alon Zakai等人也開發了一套編譯器Emscripten，在底層架構中結合LLVM，讓開發者可以把C、C++轉換成LLVM Bitcode，而Emscripten再將LLVM Bitcdoe轉換成Asm.js格式。蔡秉諺表示，當Mozilla開啟這個專案之後，Google則順應著這個潮流，配合Mozilla的Asm.js，整合Chrome瀏覽器中的V8 JavaScript引擎，達到效能最佳化。在此之後，也有為數不少的網頁開發者，開始把舊有C、C++的函式庫，利用Emscripten，轉換成Asm.js格式，部署在瀏覽器裡執行。

不過蔡秉諺表示，使用Asm.js編譯C、C++程式碼也會出現幾大問題。首先，由於Mozilla及Google所開發的JavaScript引擎的特點不同，所以對於Asm.js的最佳化調整都有所差異，「因此同樣的程式碼，在Firefox跟Chrome的效能表現都不一樣。」之後Mozilla及Google才決定，直接使用Bytecode形式執行。

入門WebAssembly多半用Emscripten

蔡秉諺表示，現在開發者如果想要接觸這門新技術，除了使用Emscripten，開發者也可以直接開發WebAssembly，或使用Mozilla自家的Rust語言開發，再轉換成WebAssembly，「不過我認為，現階段這些工具都還未必很成熟」，以CloudMosa現在發展而言，開發者使用WebAssembly時，多半程式碼也都是靠Emscripten進行轉換。

也因此，現階段多數開發者想要接入WebAssembly的話，也都必須仰賴Emscripten，「而WebAssembly現階段成熟的開發工具，都是承襲過去Asm.js的生態系。」他表示，對於想要接觸WebAssembly的網頁開發者，目前的主流方式還是要仰賴Emscripten。

開發者得同時熟悉C、C++及JavaScript

不過他表示，WebAssembly目前仍然存在一些使用上限，並非所有程式碼都可以無痛轉移。目前蔡秉諺所碰上問題在於，由於WebAssembly是用於介接JavaScript與C、C++間的技術，對於網頁開發者來說，不見得可以同時熟悉JavaScript及C、C++領域。

此外，當程式碼進行轉換時，並不能直接在網頁中的JavaScript環境執行。因此，開發者仍然需要自己手動撰寫C、C++與JavaScript的程式碼，例如，串接介面、呼叫函數，連接相異環境，「所以開發者得要對兩大領域都要接觸。」

既有Asm.js使用者可以無痛轉移至WebAssembly

而對於過去已經有使用Asm.js的開發者而言，只需要在編譯程式碼時，額外加上另一個參數宣告：wasm=1。

蔡秉諺表示，在加上wasm=1的參數時，原先Emscripten會將程式碼編譯成Asm.js的格式，之後編譯出的格式就是WebAssembly，「其餘的開發工作都不會受到任何影響」，對於過去原先開發Asm.js的開發者，他表示，Mozilla的確讓技術轉移的門檻下降許多。

由於CloudMosa由於過去已經有使用Asm.js的經驗，因此，只要簡單的加入相關參數就可以轉換。因此，對於未接觸Asm.js、WebAssembly的網頁開發者，蔡秉諺也建議，可以先檢視企業內部是否有現成的C、C++函式庫可以直接使用於網頁環境，再從Emscripten下手，把一些既有使用C、C++函式庫的程式碼，使用Emscripten轉換，部署在瀏覽器執行。

蔡秉諺解釋，Asm.js與WebAssembly的使用實際過程，並未有太多差異。而使用WebAssembly轉換成二進位格式，不需要透過JavaScript引擎，「自然不會有JavaScript引擎的Overhead」，執行速度也能提升。再者，透過WebAssembly執行一樣的Bytecode，也不會出現相同程式碼，但是在相異瀏覽器下效能表現差異的問題。

不只網頁速度，WebAssembly也能加速網頁開發

蔡秉諺表示，在選擇開發工具時，開發者往往會兩個決策考量，首先是應用程式的執行速度，再者是開發速度。「而一般而言，開發者比較在意開發速度。」蔡秉諺表示，只有在應用程式上線後，才能顧及應用程式的執行速度。

他舉例，以Android生態系而言，開發者可以使用Java開發應用程式，並且利用JNI（Java Native Interface）呼叫C、C++的函式庫。

同理，現在JavaScript生態系，也有包含React、AngularJS等開發框架， 而開發者之所以依賴這些框架，原因在於「加快開發速度」，雖然比較低階的C、C++語言，同樣也可以開發出類似功能，但是還必須介入記憶體管理等工作，導致開發工作比較麻煩。

開發者不需要重新打造輪子

而利用WebAssembly許多既有的程式碼可以再利用。蔡秉諺舉例，像是壓縮工具Pako，讓使用者可以在網頁中製作Zip檔。原先得把許多既有C、C++的程式碼，使用JavaScript重寫，「如果有WebAssembly就不用重新開發。」

蔡秉諺表示，WebAssembly的目的是加快開發速度，把現成C、C++函式庫轉換成WebAssembly格式，「這才是WebAssembly的威力，而不是要開發者重新打造輪子。」