網頁應用飆速新時代來了！WebAssembly讓網頁程式像原生AP一樣快

瀏覽器的重要性在當今行動優先的世界，其重要性不言而喻。在2015年時，JavaScript之父Brenden Eich來臺時，就示範即使是使用瀏覽器，也能執行效能標準要求高的射擊遊戲，當時的背後功臣就是Asm.js架構，這個瘦身版本的JavaScript，限制 JavaScript的功能，取消該語言會影響執行效能的部分，因此讓瀏覽器效能可以獲得大幅度成長。

不過暨Asm.js後，下個後進之秀WebAssembly，並沒有像Asm.js背負著JavaScript既有包袱，而是直接定義了一個新的網頁執行層，讓瀏覽器能直接執行二進位檔案格式的WebAssembly檔案，來達到像是執行Bytecode程式碼般的高效能。在今年初WebAssembly已經開始支援市面上幾大主流瀏覽器，像是3月時，Firefox 52版第一個宣布支援，而後繼的Chrome 57、Edge 16及Safari 11也都支援。

Mozilla新興科技部門院士David Bryant表示，WebAssembly使網頁技術獲得非常大幅度進步，該技術讓開發者可以把複雜的軟體打包，並且在瀏覽器環境中安裝、執行。

不只如此，WebAssembly也讓使用者不需要原生套件，就能延伸瀏覽器的使用體驗，「開發者可以利用網頁瀏覽引擎所做的事情就變得更多。」他說。

David Bryant表示，過去開發者總認為瀏覽器只能執行某些功能，為了讓應用程式可於網頁瀏覽器上執行，得相當依賴使用外部套件，例如遊戲開發者，就特別依靠外部套件，才能讓遊戲在瀏覽器環境執行。

而現今透過WebAssembly，讓瀏覽器效能獲得相當幅度提升，開發者就可以減少對外部套件的依賴。

David Bryant舉例，像在上一世代網路世界占有重要地位的Flash，以往開發者要建立網頁應用、互動式媒體都少不了它，「但現在透過WebAssembly就可以做到」，他也信心滿滿地認為，WebAssembly這門技術的威力，藉由強化瀏覽器效能，因而釋放各類網頁技術的威力，讓開發者可以著手設計各類的網頁應用、體驗。

初期發想是讓JavaScript變成中介語言

羅馬不是一天造成的，同理，提及WebAssembly，也得要從它的前身Ams.js說起。David Bryant表示，WebAssembly這門技術的初始發想，約莫能追溯至2008年至2010年。當時，大多的網頁應用程式，透過改善的JavaScript執行，效能表現已經足以獲得一定程度的改善，「有不少程式語言專家，都在想辦法改善JavaScript，但是當時已經達到效能瓶頸了。」

David Bryant解釋，JavaScript的運作機制，必須先將程式碼交由瀏覽器執行，而瀏覽器後續則透過直譯器執行JavaScript應用程式，「但如果將JavaScript定位成一個中介程式語言（Intermediate Programming Language）」，可以改變原本的作業方式，讓開發者可在瀏覽器外環境進行更多工作，像是執行程式或改善程式碼運作效能，「而這個點子的具體實現，就是Asm.js。」

限制拖累JavaScript效能的語法，加速效能表現

而Asm.js是經過編譯的JavaScript子集，透過它可以限制JavaScript拖累效能的語法，像是動態型別轉換、記憶體回收等執行，留下嚴格定義的浮點數及整數運算子。因此，讓JavaScript的執行效率可與Bytecode相比。David Bryant表示，Asm.js有兩個重要優點，首先，在程式碼匯入瀏覽器前，開發者可先著手改善效能，因此可以提升JavaScript直譯器的效能。

再者，由於Asm.js是JavaScript子集，「瀏覽器可以直接執行它，開發者不需要替瀏覽器新加功能，或者自己設計新的中介程式語言。」而David Bryant表示，Asm.js的效能表現相當不錯，例如，臉書已經在正式環境使用Asm.js，靠它執行運算密集的工作。或是也有一些遊戲開發公司利用Asm.js製作遊戲引擎，將C或C++編譯成Asm.js，「讓應用程式不只可在瀏覽器運作，還能跑得很快。」

不過，Asm.js仍然有其侷限。David Bryant表示，作為JavaScript的中介程式語言，Asm.js仍必須設計為開發者可讀格式，得花費額外的系統資源才能讓程式碼在瀏覽器執行，也因此，Mozilla想要繼續改善Asm.js，讓Asm.js的中介碼（Intermediate representation），進一步演進為二進位格式（Binary representation），也因此，才會萌生出WebAssembly的設計概念，「讓瀏覽器幾乎可以擁有原生的效能表現。」

延伸既有瀏覽器的應用範圍，讓平臺變得更豐富

「你可以想像WebAssembly在瀏覽器當中建立一個虛擬CPU」，David Bryant表示，接著它會編譯二進位格式的WebAssembly檔案，將程式碼轉換可執行格式（Executable format）。當應用程式要啟動時，這些二進位檔案便會匯入至瀏覽器執行。他表示，這樣的運作模式有許多好處，過去網頁技術無法提供這樣的作業方式，必須靠外部套件才能支援檔案格式，例如Flash。David Bryant解釋，而WebAssembly是個單純的原生網頁元件，「透過WebAssembly，可以讓瀏覽器變成一個更適合執行應用程式的引擎，甚至是作業系統。」

他認為，WebAssembly可以延伸既有瀏覽器的應用範圍，讓平臺變得更豐富，而使用者也不需要改變既有習慣。David Bryant舉例，例如開發者可利用WebAssembly所建立的虛擬機、虛擬CPU，也已經整合其他瀏覽器的功能及基礎架構。不僅如此，由於瀏覽器已經內建了WebAssembly，各類網頁應用程式都能受益於此技術，透過它將程式碼編譯成二進位格式，獲得效能加速，「不只限定於JavaScript，其他程式語言也可以。」

貼近底層CPU指令集效能才夠快

而David Bryant也笑說，許多人常常問他：「Asm.js已經很快了，究竟Mozilla是如何讓WebAssembly變得更快呢？」他表示，WebAssembly的效能進步，總共有兩大原因。第一個原因是，透過WebAssembly，系統可以明確定義指令集轉換的二進位格式，確保在不同的瀏覽器下，都能有一致轉換作業流程。但如果是Asm.js，它仍然只是JavaScript子集，「意味著開發者必須靠各瀏覽器引擎進行轉換，但各瀏覽器都各有自己的特色。」

此外，他解釋，第二個原因是，WebAssembly檔案因為採用二進位格式，所以其運作跟底層CPU指令集更為貼近。David Bryant表示，JavaScript作為一個程式語言，其目的是要滿足開發者大部分的通用需求，也因此部分JavaScript表達式，對於底層CPU指令集也未必是很好的溝通方式，但是利用WebAssembly，便能突破JavaScript子集Asm.js的包袱，讓效能再度提升，「Asm.js已經很好了，但WebAssembly更棒。」他笑著說。

Mozilla新興科技部門院士David Bryant表示，WebAssembly的目的並不是要解決特例的單一問題，而是要讓瀏覽器變成一個更強大、更多功能的平臺。（攝影／洪政偉）

既有程式雖不是JavaScript，也能利用WebAssembly編譯

而有WebAssembly這個元件，也讓網頁開發者的工具選擇變得更多。David Bryant舉例，例如C或C++程式語言，亦可以透過WebAssembly進行編譯，轉換成二進位格式。「雖然聽起來很不實際，但是理論上，即使是不了解JavaScript的程式設計師，現在也能開發網頁應用程式。」他舉例，網頁遊戲應用開發團隊的分工，能切割得更為精細，原本既有JavaScript開發者仍能沿用其慣用的開發工具，而偏好其他程式語言的使用者，可以專注心力開發遊戲引擎、遊戲邏輯設計，利用WebAssembly檔案，讓新程式碼可以在既有平臺上繼續運作。除了開發者，網頁應用開發框架業者也能受益。

David Bryant表示，既有的JavaScript開發框架業者，即使導入了WebAssembly，也能繼續使用原本的API，「不只效能提升，還能開始整併其他程式語言。」

JavaScript與WebAssembly是互補關係

而WebAssembly的出現，許多開發者也不時認為：「未來JavaScript就會消失。」對此，Brendan Eich就曾大力澄清，WebAssembly並非要取代JavaScript，而是要與它互補，WebAssembly將成為Asm.js架構的接班人，並不代表JavaScript會消失。

而David Bryant亦抱持同樣觀點。他坦言，WebAssembly的確會取代部分JavaScript的需求，例如，開發者可以使用其他程式語言進行開發，完成編譯後再交由瀏覽器執行。但他認為，JavaScript並不會因此而消失。其中一個原因在於，開發者總是希望可以因應開發需求，選擇合適的函式庫、程式語言及工具，「而WebAssembly想要達成的目標，是提供開發者一個更強大的開發工具。」

他也曾聽聞，部分網頁開發者不想使用JavaScript，卻又苦無沒有其他工具可用，由於既有應用程式是透過C語言開發，若利用JavaScript就得要全部重新開發，「而透過WebAssembly，就可以使用原生的C語言，編譯成WebAssembly檔案執行。」

再者，雖然WebAssembly可以讓瀏覽器效能提升，讓使用者獲得更好的網頁體驗，「但這些網頁瀏覽器的功能，仍然需要JavaScript的元件才能運作。」David Bryant舉例，網頁應用程式也能同時使用JavaScript和WebAssembly，前者負責執行基本的網頁程式、與使用者進行互動，後者則負責執行消耗資源的運算，「兩者應該是互相合作的關係。」因此，他認為，也許拜WebAssembly所賜，IT業界對於JavaScript專長的工程師需求反而會增加，讓JavaScript的使用率增加，而不是對它造成負面影響。

提供開發者工具，創新應用將隨之而來

David Bryant表示，當今網頁應用的三大重要元件分別是HTML、JavaScript及CSS，但是在各大瀏覽器的強力支援之下，「我認為WebAssembly應該也被列入其中。」 他表示，現今JavaScript仍是是網頁開發者的首選語言，「不過有了WebAssembly之後，開發者將會擁有更多選擇」，以往部分廠商導入新技術的策略，通常會先評估該門技術是否已經拿到突破7成以上的市占率後，才會積極擁抱，「而我預計在今年底前，WebAssembly的導入率就會突破這個數字。」

David Bryant也非常好奇，除了網頁遊戲、互動式媒體應用程式，究竟開發者會使用這門技術進行何種創新。他認為，WebAssembly的目的並不是要解決特例的單一問題，而是放眼更大格局，改善網頁技術，「讓瀏覽器變成一個更強大、更多功能的平臺。」

就如電影《侏儸紀公園》中的一句經典對白：「生命會找到自己的出路」，David Bryant表示，在Mozilla推出這些工具給開發者後，便放任開發者自行發揮創意，「而我們的角色是站著旁觀，看開發者想出哪些有趣的新應用。」

 CTO小檔案 

David Bryant Mozilla

新興科技部門院士

學歷：田納西大學電機工程碩士

經歷：曾任職於貝爾實驗室技術委員會，負責訊號處理、電腦繪圖元件業務，在昇陽電腦及Nokia時，則負責產品工程、行銷等業務。在2015年加入Mozilla後，先擔任平臺工程副總裁，現在則為Mozilla新興科技部門院士

 公司檔案 

Mozilla

● 總部：美國加州山景城

● 成立時間：2005年

● 主要業務：開發Firefox 瀏覽器及倡議Web技術發展

● 年營收：4.21億美元（2015年）

● 執行長：Chris Beard

● 基金會董事長：Mitchell Baker

 公司大事紀 

● 2003年：Mozilla基金會成立

● 2005年：Mozilla基金會成立Mozilla公司

● 2013年：Firefox 22開始支援Asm.js

● 2017年5月：推出量子專案

● 2017年11月：Google成為Firefox預設搜尋引擎

● 2017年11月：推出Firefox 57