2018年1月25日 星期四

iThome 新聞 【專家手把手教學最新網頁檔案格式標準】瀏覽器專家教你怎麼用WebAssembly 皇璽會 http://www.iwin688.com

在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將C及C++轉換成LLVM Bitcode

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

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

而利用WebAssembly許多既有的程式碼可以再利用,例如CloudMosa自家開發的壓縮工具,讓使用者可以在網頁中製作Zip檔。當時進行開發時,CloudMosa得要把許多既有C、C++的程式碼,使用JavaScript重寫,「如果有WebAssembly就不用重新開發。」

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



from iThome 新聞 http://ift.tt/2neF5Lk










沒有留言:

張貼留言