|
https://m.toutiao.com/is/iJNSf7U9/ 1 WebAssembly是什么？
W3C WebAssembly Community Group開發(fā)的一項網(wǎng)絡標準，對于瀏覽器而言，WebAssembly 提供了一條途徑，讓各種語言編寫的代碼以接近原生的速度在 Web 中運行。在這種情況下，以前無法以此方式運行的客戶端軟件等都將可以運行在 Web 中。 WebAssembly 設計之初就決定和 JavaScript 一起協(xié)同運行——通過JavaScript 中的 WebAssembly API，可以把 WebAssembly 模塊加載到一個 JavaScript 應用中并且在兩者之間互相調(diào)用。這樣可以在同一個應用中使用 WebAssembly 的高性能及 JavaScript 的高靈活性。 2 為什么需要WebAssembly？眾所周知JavaScript是解釋型語言，相比于編譯型語言需要在運行時轉(zhuǎn)換，所以解釋型語言的執(zhí)行速度要慢于編譯型語言。 編譯型語言和解釋型語言代碼執(zhí)行的具體流程如下：  因為解釋型語言每次執(zhí)行都需要把源碼轉(zhuǎn)換一次才能執(zhí)行，而轉(zhuǎn)換過程非常耗費時間和性能，也就導致在JavaScript背景下，web無法執(zhí)行一些高性能應用，如圖片剪輯、視頻剪輯、3D游戲等。 根據(jù)MDN的定義，WebAssembly是一種運行在現(xiàn)代網(wǎng)絡瀏覽器中的新型代碼，并且提供新的性能特性和效果。可以在現(xiàn)代的網(wǎng)絡瀏覽器中運行 － 它是一種低級的類匯編語言，具有緊湊的二進制格式，可以接近原生的性能運行，并為諸如C / C ++等語言提供一個編譯目標，以便它們可以在Web上運行。它也被設計為可以與JavaScript共存，允許兩者一起工作。 3 WebAssembly的工作原理WebAssembly不被解釋，而是由開發(fā)者提前編譯為WebAssembly二進制格式，如下圖所示。由于變量類型都是預知的，因此瀏覽器加載WebAssembly文件時，JavaScript引擎無須監(jiān)測代碼。它可以簡單地將這段代碼的二進制格式編譯為機器碼。  如果將每種編程語言都直接編譯為機器碼的各個版本，那么效率會很低。編譯器中稱為前端的部分會將所編寫的代碼編譯為一種中間表示(intermediate representation，IR)。創(chuàng)建好IR代碼后，編譯器的后端部分會接收IR代碼，對其進行優(yōu)化，然后將其轉(zhuǎn)換為所需要的機器碼。  如果將每種編程語言都直接編譯為機器碼的各個版本，那么效率會很低。編譯器中稱為前端的部分會將所編寫的代碼編譯為一種中間表示(intermediate representation，IR)。創(chuàng)建好IR代碼后，編譯器的后端部分會接收IR代碼，對其進行優(yōu)化，然后將其轉(zhuǎn)換為所需要的機器碼。  由于瀏覽器可以在若干不同的處理器(比如桌面計算機、智能手機和平板設備)上運行，因此為每個可能的處理器發(fā)布一個WebAssembly代碼的編譯后版本會非常繁復。替代方法即取得IR代碼，并通過一個專門的編譯器來運行，這個編譯器將IR代碼轉(zhuǎn)換為一種專用字節(jié)碼并放入后綴為.wasm的文件中。此時wasm文件中的字節(jié)碼還不是機器碼，它只是支持WebAssembly的瀏覽器能夠理解的一組虛擬指令。當加載到支持WebAssembly的瀏覽器中時，瀏覽器會驗證這個文件的合法性，然后這些字節(jié)碼會繼續(xù)編譯為瀏覽器所運行的設備上的機器碼。如下圖  
4 WebAssembly模塊內(nèi)部 模塊中不同段的含義說明：   編譯器負責生成WebAssembly模塊的段，并將它們按照適當順序放置。 所有的段都是可選的，因此可能存在空模塊。 如果指定了已知段，那么它們只能出現(xiàn)一次并且要按照特定順序出現(xiàn)。 自定義段可以放置在已知段之前、之間或之后，用于指定不適用已知段的數(shù)據(jù)。 5 哪些語言可用來創(chuàng)建WebAssembly模塊？現(xiàn)在WebAssembly的最小可行性版本（Minimum Viable Product，MVP）還沒有垃圾回收（garbage collection，GC），他限制了一些語言的使用。GC作為一種后MVP功能正在開發(fā)中，實現(xiàn)之前，有幾種語言正在試驗WebAssembly支持，方式是將自己的VM編譯到WebAssembly，或者在某些情況下將自己的垃圾回收器包含進去。 以下語言正在試驗或已經(jīng)完成WebAssembly支持：
更多列表關注github: WebAssembly支持列表 相關案例： TeaVM：它可以將 JVM 字節(jié)碼翻譯成 JavaScript 和 WebAssembly 我們有一段時間后端開始做一些前端開發(fā)，但是結(jié)果有時并不盡如人意，關鍵就在于我們的后端開發(fā)人員對前端無論是框架還是語法還是規(guī)范，都不是非常了解。這是在所難免的，但是因為業(yè)務需要又不得不做。 TeaVM就為我們這種情況提供了一種解決方案，我們的后端開發(fā)人員依然使用自己熟悉的語言（java）進行開發(fā)。功能開發(fā)完成后再將.class或.jar文件通過TeaVM編譯成wasm或JavaScript供瀏覽器加載調(diào)用。 git：https://github.com/konsoletyper/teavm 官網(wǎng)：https:/// 6 WebAssembly可以用在哪？目前大多數(shù)瀏覽器廠商都已經(jīng)支持WebAssembly，包括Chrome、Edge、Firefox和Safari。移動端Web瀏覽器也同樣支持。Node.js也從版本8開始支持。 WebAssembly不是JavaScript的替代品，而是它的一個補充，有些情況下WebAssembly是更好的選擇，有些情況下使用JavaScript會是一個更優(yōu)的方案。與JavaScript在同一個VM運行可讓兩種技術相輔相成。 WebAssembly為非JavaScript的開發(fā)者提供了一個新的道路，幫助他們在web中使用自己編寫的代碼。也讓不了解C或C++等語言的web開發(fā)者可與訪問更新、更快的庫。個人理解WebAssembly也可用來優(yōu)化某些庫的執(zhí)行速度。 6.1 一些使用webAssembly的案例Figma — 基于瀏覽器的多人實時協(xié)作 UI 設計工具：https://www./ Google Earth https://earth.google.com/ - 17年開始支持在FireFox打開，主要依賴webAssembly。之前使用Native Client導致只能在chrome中運行 Magnum — 跨平臺的 OpenGL 圖形引擎https://github.com/mosra/magnum Egret Engine - 一款HTML5游戲引擎https://github.com/egret-labs/egret-core/ Web-DSP — 使用瀏覽器就能即時制作多媒體影音特效https://github.com/shamadee/web-dsp 7 WebAssembly怎么用？7.1 得到wasm文件手動引入var importObject = { imports: { imported_func: function(arg) { console.log(arg); } } }; // 輸出 42 fetch('simple.wasm') .then(res => res.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes, importObject) ).then(results => { results.instance.exports.exported_func(); });  7.2 得到編譯好的npm包引入執(zhí)行以下為hello_wasm.js文件編譯前源碼 // rustextern crate wasm_bindgen;use wasm_bindgen::prelude::*;#[wasm_bindgen]extern { pub fn alert(s: &str);}#[wasm_bindgen]pub fn greet(name: &str) { alert(&format!('Hello, {}!', name));}本文從為什么需要WebAssembly、WebAssembly的工作原理、哪些語言可用來創(chuàng)建WebAssembly模塊、WebAssembly可以用在哪里 以及 怎么使用 幾方面簡要介紹了webAssembly。如果之前沒有了解過webAssembly，可以做一些簡要的了解。 參考文獻《WebAssembly 實戰(zhàn)》 —- C. 杰勒德·加倫特 編譯 Rust 為 WebAssembly - WebAssembly | MDN |
|
|
來自： 山峰云繞 > 《匯編語言微軟平臺》
