帶你瞭解 WebAssembly 的發展、應用與開發

Atypiape2發表於2024-08-26
Web

一、WebAssembly 是什麼？

“WebAssembly（縮寫為 Wasm）是一種基於堆疊式虛擬機器的二進位制指令集。Wasm 被設計成為一種程式語言的可移植編譯目標，並且可以透過將其部署在 Web 平臺上，以便為客戶端及服務端應用程式提供服務”

以上是 wasm 官網給出的一段解釋。它執行在虛擬機器中，執行的指令是虛擬指令，與彙編程式碼十分相似。WebAssembly 的名字可能也是由此而來（組合語言的英文：Assembly）

image

通俗的講，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 等史詩級專案。

image

第二個問題，2008 年 Google 推出 JavaScript 引擎 V8，使用 JIT 技術，使得 Web 效能得到了數十倍的增長。但 Web 效能還是被挑戰！

  1. 由於 DOM 渲染和 JavaScript 執行相互獨立，單執行緒導致 DOM 渲染阻塞 JavaScript 執行；
  2. 由於 JavaScript 是動態弱型別語言，而不像 C/C++ 這類靜態強型別語言，JIT 最佳化效率有限；

為了進一步最佳化 JIT 效率，瀏覽器鼻祖 Mozilla 推出了 asm.js，隨後 Google、Microsoft、Apple 都覺得 asm.js 的思路不錯，於是聯合起來，一同共建 WebAssembly 生態。

image

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 包進行支援。

image

四、應用場景有哪些？

初期，主要用於瀏覽器效能敏感模組的實現，如複雜的介面渲染、遊戲引擎、地圖渲染，數學計算等。

過去幾年發展很快，除了瀏覽器中可以跑，後端（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 相關的創業公司：

image

image

五、如何使用 WebAssembly 進行開發

目前較為常見的是將 C/C++ 程式碼或者是 Rust 程式碼轉為 wasm 檔案，另外也支援 Go 等語言。

image

image

參見：WebAssembly 中文網

image

參考：
  • WebAssembly 中文網
  • 《8個WebAssembly 應用案例》
  • 《為什麼說 WASM 是 Web 的未來》
  • 《WebAssembly 用在了哪裡？18個激動人心的 Wasm 初創公司》
  • 《恕我直言，90% 的應用場景都不需要用WebAssembly！》

相關文章