如何在瀏覽器中執行原生程式碼,為什麼要這樣做,這樣做對Javascript和Web開發的未來有何意義
在所有瀏覽器裡面,都執行著js程式碼,它們被js引擎解析和執行。然而,js並無法最理想地處理所有任務。這就是WebAssembly介入的地方。
WebAssembly是一種新的能在現代瀏覽器中執行的程式碼。為了更高的效能而被設計出來,它是一種低階二進位制格式,所以檔案不大能夠很快地被下載和執行。你不會直接去寫WebAssembly,而是把其他高階語言編譯為它。
Assembly通常是指與機器碼類似的人類可讀語言。機器碼是你的處理器才能理解的一堆數字。
所有的高階程式語言都需要編譯為能在處理器上執行的機器碼。不同的處理器架構需要不同的機器碼和對應不同的Assembly。
不像它的名字那樣,WebAssembly不代表某種特定的Assembly語言,他不針對特定的機器。他是面向瀏覽器的,當你提供要在瀏覽器中執行的程式碼時,你不需要考慮它會執行在什麼樣的機器上。
當瀏覽器下載了WebAssembly程式碼後會快速將它轉換成某臺機器的assembly。
WebAssembly擁有可讀的文字格式(.wat),但是二進位制格式是你真正交付給瀏覽器的(.wasm)。
WebAssembly能讓你做的是將C,C++或者Rust的程式碼編譯為叫做WebAssembly模組的東西。你可以在你的web應用中載入它並通過Javascript呼叫。
它並非Javascript的替代品,它和js一同工作的。
為什麼需要WebAssembly
想想你不得不在瀏覽器外使用軟體的場景:視訊遊戲、視訊編輯,3D渲染,或音樂製作。這些應用都要進行大量的運算並需要很高的效能。Javascript並不能提供如此的效能。
Javascript最初被設計來給Web提供一些輕量級的互動。就是為了讓人易學和好寫,但是並沒有從高效能角度去設計。近年來,瀏覽器們在解析Javascript上做了很多優化,有了很大的效能提升。
隨著效能的提升,能在瀏覽器做的事慢慢擴充套件。新的API帶來了可互動的影象,視訊流,離線瀏覽等等。所以一些從前只作為原生App的應用也出現在了Web上。現在你可以在瀏覽器上編輯文件,傳送郵件。但是某些場景對Javascript來說還是很吃力。
視訊遊戲是個巨大的挑戰,因為它們不僅需要協調音訊和視訊,還需要協調物理和人工智慧。如果能在Web上高效地執行遊戲的話,那麼我們就能夠將很多應用帶到Web上來。這就是WebAssembly要做的事。
為什麼Web如此吸引人
Web的美麗之處在於它就像魔法一樣能在任何地方執行。沒有下載和安裝。只需要點點滑鼠Web應用就能馬上出現。它比直接在計算機上下載和執行二進位制檔案更安全,因為瀏覽器提供了程式碼執行的安全環境。而且通過Web分享是一件很容易的事,你可以把連結複製到任何地方。
WebAssembly能帶來什麼
- 速度
- 可移植性
- 靈活性
WebAssembly就是為了速度而設計的。它的二進位制格式比Javascript的文字格式小巧很多。因此可以很快地下載,在網路較慢的情況下尤為明顯。
並且也能很快地解碼和執行。Javascript是一種動態型別的語言,變數型別不需要事先定義,也不需要提前編譯。這使得js寫起來十分容易,不過這也意味著js引擎需要額外地做很多事。它需要在頁面執行的同時去解析、編譯然後優化程式碼。
解析js程式碼包括把純文字程式碼轉換成抽象語法樹(AST),然後轉成二進位制格式。WebAssembly直接以二進位制形式提供,解碼速度更快。不像Javascript,它是靜態型別的,引擎在編譯期間不需要推測將使用哪種型別。大多數優化都是在編譯原始碼期間,甚至在進入瀏覽器之前發生的。記憶體是手動管理的,就像C和C ++這樣的語言一樣,所以也沒有垃圾收集。WASM二進位制程式碼的執行時間僅僅只比原生程式碼慢20%。
設計WebAssembly的主要目標之一是可移植性。要在裝置上執行應用程式,它必須與裝置的處理器體系結構和作業系統相容。這意味著要為所有需要支援的作業系統和CPU的組合編譯原始碼。使用WebAssembly,只有一個編譯步驟,你的應用程式將在每個現代瀏覽器中執行。
WebAssembly最令人興奮的是它為Web編寫帶來了更大的靈活性。到目前為止,JavaScript一直是Web瀏覽器中唯一完全支援的語言。使用WebAssembly,Web開發人員將能夠選擇其他語言,更多的開發人員將能夠為Web編寫程式碼。JavaScript仍然是大多數情況下的最佳選擇,但現在有一個在你需要更高效能時能夠選擇的方案。
目前完全支援的語言是C,C++和Rust,但還有很多其他語言正在開發中,包括Kotlin和.NET,兩者都已經提供了實驗支援。
它如何運作的
你需要一個將原始碼編譯為WebAssembly的工具。如C何C++你可以使用Emscripten。如果你有一個C語言寫的"Hello word",Emscripten會生成必要的檔案,你會得到一個WebAssembly模組和HTML以及JS檔案。
emcc hello.c -s WASM=1 -o hello.html
複製程式碼
你需要HTML和JS檔案,因為WebAssembly無法直接訪問任何平臺的API - DOM,WebGL,WebAudio等。要使用其中任何一個,即使要在頁面上顯示WebAssembly程式碼的輸出,您也必須通過JavaScript。
您可以將WebAssembly二進位制檔案視為普通的應用程式模組:瀏覽器可以獲取,載入和執行它們。您可以在JavaScript程式碼中呼叫WebAssembly函式,也可以在WebAssembly模組中呼叫JavaScript函式。
如果你現在想試試,無需安裝,你可以訪問webassembly.studio或WebAssembly Explorer
現在能使用它嗎?
YES!
WebAssembly幾乎在所有主流瀏覽器中得到了支援。它目前在全球支援74.93%的使用者,82.92%的桌面使用者。我們可以使用Emscripten編譯為asm.js(JavaScript的一個子集,只使用數字(沒有字串,物件等))作為老版本瀏覽器的相容方案。
目前已經有很多很棒的WebAssembly例子。如上文提到的難點:視訊遊戲,Unity和虛幻4都有可執行的demo。比如這個在Unity引擎執行的坦克遊戲和Epic的一個Demo。