一、WebAssembly 是什麼?
“WebAssembly(縮寫為 Wasm)是一種基於堆疊式虛擬機器的二進位制指令集。Wasm 被設計成為一種程式語言的可移植編譯目標,並且可以透過將其部署在 Web 平臺上,以便為客戶端及服務端應用程式提供服務”
以上是 wasm
官網給出的一段解釋。它執行在虛擬機器中,執行的指令是虛擬指令,與彙編程式碼十分相似。WebAssembly
的名字可能也是由此而來(組合語言的英文:Assembly)
通俗的講,WebAssembly
是除 JavaScript
之外另一門可以在瀏覽器上執行的語言,其他語言(如 C/C++/Rust)也可以被編譯成 WebAssembly
在瀏覽器上執行。WebAssembly
是靜態型別的語言,可以以“接近原生”的速度執行程式碼。
- 2015 年 Mozilla 釋出 WebAssembly 專案,隨後 Google、Microsoft、Apple 等各大主流的瀏覽器廠商均大力支援;
- 2018 年 WebAssembly 第一個規範草案誕生;
- 2019 年成為 W3C 國際標準,成為與 HTML、CSS 和 JavaScript 並列的唯四前端技術;
- 2022 年 Docker 對 WebAssembly 提供支援;
二、為什麼需要 WebAssembly?
WebAssembly
的出現,是為了解決 JavaScript
效能底下的問題!
隨著 JavaScript
被廣泛的應用,它也暴露了很多問題:
- 語法太靈活導致開發大型 Web 專案困難;
- 效能不能滿足一些場景的需要;
這兩大問題成為 JavaScript
頭頂上的達摩克利斯之劍,危及著 JavaScript 更廣泛的應用。
第一個問題,被微軟的 TypeScript
解決了!微軟利用 TypeScript
這把鋒利的武器打造了 VSCode
等史詩級專案。
第二個問題,2008 年 Google 推出 JavaScript
引擎 V8
,使用 JIT
技術,使得 Web 效能得到了數十倍的增長。但 Web 效能還是被挑戰!
- 由於 DOM 渲染和 JavaScript 執行相互獨立,單執行緒導致 DOM 渲染阻塞 JavaScript 執行;
- 由於 JavaScript 是動態弱型別語言,而不像 C/C++ 這類靜態強型別語言,JIT 最佳化效率有限;
為了進一步最佳化 JIT
效率,瀏覽器鼻祖 Mozilla 推出了 asm.js
,隨後 Google、Microsoft、Apple 都覺得 asm.js
的思路不錯,於是聯合起來,一同共建 WebAssembly
生態。
WebAssembly
最大的優點是,可以大幅度提升 Web 應用的效能,執行速度和 C/C++
原生應用在一個數量級,據稱最佳化後可以達到 C
語言程式 70% 的速度。
WebAssembly
的高效能、輕量和跨平臺,使得我們可以將 C/C++
等語言執行在 Web,也可以將桌面端應用跑在 Web 容器。
三、瀏覽器相容性
參見 https://developer.mozilla.org/zh-CN/docs/WebAssembly#瀏覽器相容性
- Firefox 52+;
- Chrome 57+;
- Edge 16+;
- Safari 11+;
- Node 8+;
另外,微信小程式基礎庫版本從 2.13.0 開始,透過 WXWebAssembly
物件對整合的 wasm
包進行支援。
四、應用場景有哪些?
初期,主要用於瀏覽器效能敏感模組的實現,如複雜的介面渲染、遊戲引擎、地圖渲染,數學計算等。
過去幾年發展很快,除了瀏覽器中可以跑,後端(Node.js
)也可以跑,在終端裝置、移動裝置、物聯網及雲原生上都有廣闊的應用場景。
-
Figma 檔案讀取;
-
Magnum 跨平臺的 OpenGL 圖形引擎;
-
Google 3D 地圖;
-
eBay 的條形碼掃描器;
-
AutoCAD 網頁版;
-
Photoshop 網頁版;
-
Web-DSP 在瀏覽器上執行的多媒體影音處理函式庫;
-
Unity 的 Web 遊戲引擎;
-
Egret Engine H5 遊戲引擎;
-
Disney+ 應用程式開發工具包;
-
微軟的飛行模擬器有一個基於 WebAssembly 的外掛系統;
-
網頁版 Windows 2000;
-
Blazor 讓 .NET 程式碼在瀏覽器執行;
-
Walt 用 JavaScript 語法快速開發原生應用;
-
還包括語言檢測、音訊混合、影片編解碼、數字訊號處理、醫學影像、物理模擬、加解密、壓縮、數學計算等領域;
18個 WebAssembly
相關的創業公司:
五、如何使用 WebAssembly 進行開發
目前較為常見的是將 C/C++
程式碼或者是 Rust
程式碼轉為 wasm
檔案,另外也支援 Go
等語言。
參見:WebAssembly 中文網
參考:
- WebAssembly 中文網
- 《8個WebAssembly 應用案例》
- 《為什麼說 WASM 是 Web 的未來》
- 《WebAssembly 用在了哪裡?18個激動人心的 Wasm 初創公司》
- 《恕我直言,90% 的應用場景都不需要用WebAssembly!》