目前位置:最新消息

Latest News

最新訊息


彙整網頁設計常見問題,希望對您有幫助(鞠躬)


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


四大主流瀏覽器從瀏覽器,火狐,邊緣到Safari瀏覽器今年紛紛支援WebAssembly,瀏覽器上執行的網頁程式,也能擁有像執行字節碼程式碼般的高效能,技術源頭Mozilla的新興科技部門院士親自解密關鍵

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這門技術的初始發想,約莫能追溯至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 ++編譯成Asm.js ,「讓應用程式不只可在瀏覽器運作,還能跑得很快。」

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

 

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

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

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

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

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

 

此外,他解釋,第二個原因是,WebAssembly檔案因為採用二進位格式,所以其運作跟底層CPU指令集更為貼近。大衛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的,卻又苦無沒有其他工具可用,由於既有應用程式是透過Ç語言開發,若利用JavaScript的就得要全部重新開發,「而透過WebAssembly,就可以使用原生的ç語言,編譯成WebAssembly檔案執行。」

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

 

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

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

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

就如電影“侏㑩紀公園”中的一句經典對白:「生命會找到自己的出路」,David Bryant表示,在Mozilla推出這些工具給開發者後,便放任開發者自行發揮創意





亦達網頁設計 BASIC INFO.
專人電話: 0935892259吳先生
屏東長治鄉德隆村煙墩巷28-1號
營業時間:早上10:00~晚上9:00
服務項目 SERVICE
網頁設計-RWD‧購物網站‧形象網站‧大型網站
網路行銷-關鍵字(SEO/GOOGLE廣告操作/YAHOO廣告操作)、EDM行銷
程式開發-專案程式開發、定位系統、訂房系統、庫存系統
APP開發-形象APP、購物APP
諮詢服務-不管網路大小事都歡迎您來電詢問

網站首頁 關於我們 作品展示 設計新聞 連絡我們
屏東網頁設計-屏東rwd響應式網頁設計-高雄網頁設計-高雄網站架設-台南網頁設計-台中網頁設計-桃園網頁設計-台北網頁設計Sitetag Whois check tool
google手機板網測試
亦達臉書logo 亦達google+ 亦達line 亦達twitter
亦達公司qr code-屏東網頁設計
網站首頁 作品展示 關於我們 專案流程 設計新聞 連絡我們
亦達網頁設計
網路行銷/關鍵字廣告/google排名
(port_bottom_1)