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

瀏覽器的重要性在當今行動優先的世界,其重要性不言而喻。在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


Advertisement

更多 iThome相關內容