WebAssembly 初學者——第 2 部分：目標、關鍵概念和用例

已發表: 2022-12-07

您是否想知道 WASM 的關鍵概念和用例？ 如果沒有，我們為您提供保障。

WebAssembly (WASM) 是一種新的低級語言，可讓您在 Web 上解鎖類似本機的性能。

在 WebAssembly for Beginners – Part 1 中，我們從初學者的角度介紹了 WASM，涵蓋了它的定義和局限性。 此外，我們還了解了 WebAssembly 的特性、WASM 路線圖，以及 JavaScript 如何與 WebAssembly 協同工作，而不是反對它。

這篇文章將通過討論 WASM 目標、關鍵概念和用例來探索 WebAssembly。 我們還將了解它的一些激動人心的項目。

讓我們開始吧。

WebAssembly 目標

要了解 WebAssembly 的關鍵概念，我們首先需要了解它的目標。 這些目標包括：

  • 通過使用加載時間和大小高效的二進制格式作為編譯目標來利用可用硬件的能力。 簡而言之，WASM 使用二進制格式的抽象語法樹 (AST)，支持以本機速​​度編譯和執行。 通過使用該方法，WASM 可以在各種設備上運行，包括物聯網、Web 和移動設備。
  • WASM 的目標不是改變或改變現有的 Web 平台。 通過這種方法，WebAssembly 可以與當前和過去的 Web 很好地集成。 它還使 WebAssembly 能夠與 JavaScript 無縫協作，包括與 JavaScript 一起執行或從 JavaScript 進行同步調用。
  • 無縫地使用權限安全策略和同源。
  • 確保開發人員可以設計他們的解決方案來支持非瀏覽器嵌入。
  • 最後，通過提供可人工編輯的文本格式，為開發人員提供有效使用 WebAssembly 源代碼的工具。
Webassembly-目標-1

WebAssembly 關鍵概念

在引擎蓋內部，WebAssembly 遵循以下步驟：

  • 首先，您需要使用定義類型的靜態類型語言編寫代碼。
  • 完成後，您將生成一個預編譯的 WASM 模塊並將代碼提供給引擎編譯器。
  • 上述步驟確保 WASM 跳過解析並使代碼準備好在 Web 瀏覽器上呈現。

在 Web 瀏覽器中運行的 WebAssembly 背後的關鍵概念包括：

  • 內存： WebAssembly 中的內存由其低級內存訪問指令管理和編寫。 從技術上講，它是一個可調整大小的 ArrayBuffer 並且包含一個內存字節數組。
  • 模塊： WebAssembly 中的模塊是經過編譯的可執行計算機代碼。 由於其無狀態形式，Web 瀏覽器編譯模塊並在 Windows 和 Workers 之間共享。 此外，模塊存儲和聲明導入和導出，除了容納函數、表、類型、全局變量和內存。
  • 表：表由使用可調整大小的類型數組的所有引用和函數組成。 這消除了在內存中存儲原始字節的需要。
  • 實例：在 WASM 中，實例是運行時的一個模塊，所有狀態都是成對的。 這些狀態包括表、內存和其他導入的值集。
wasm-key-concepts-1
WASM 關鍵概念

作為 Web 開發人員，您可以使用 JavaScript API 調用和定義 Modules、Tables、Instances 和 Tables。 此外，您還可以使用 JavaScript 在 JavaScript 函數中同步調用 WASM 導出。 因此，JavaScript 與 WebAssembly 配合得很好，因為您可以使用 WASM 在 Web 瀏覽器中編寫高性能應用程序。

WASM 對象

使用 WebAssembly 時，您必須跟踪八個 WASM 對象。 這些對象包括：

  • WebAssembly.Global – Global 對像是一個全局變量實例。 WebAssembly.Module 和 JavaScript 都可以訪問它。
  • WebAssembly.Module——在這裡，Module 對象包含無狀態 WASM 代碼。 代碼是預編譯的。
  • WebAssemly.Instance – WebAssembly.Instance 是 WebAssembly.Module 的可執行的、有狀態的實例。
  • WebAssembly.Table – Table 對象包含函數引用並充當 JavaScript 包裝器。
  • WebAssembly.CompileError – CompileError 對象包含驗證和解碼期間的所有錯誤。
  • WebAssembly.RuntimeError——在這裡，RuntimeError 對象列出了所有運行時錯誤。
  • WebAssembly.LinkError – LinkError 對象包含在模塊實例化期間發生的錯誤。

WASM 用例和項目

我們已經知道 WebAssembly 在 Web 瀏覽器中提供了類似原生的性能。 然而，要真正了解您可以在哪裡使用它，您必須查看它的用例。 讓我們在下面列出一些 WASM 用例。

WebAssembly 用例跨越瀏覽器內部和外部。 例如，如果你想在瀏覽器中使用 WASM，你可以做很多事情，包括：

  • 視頻或音頻編輯，例如 ffmpegwasm 項目。
  • Web 瀏覽器中的視頻遊戲，例如這些高性能遊戲。
  • 科學可視化與模擬
  • 平台仿真/模擬，如 DOSBox、MAME 等。
  • 加密
  • 遠程桌面
  • 開發工具

用例

從一般的角度來看，WebAssembly 引人注目的用例包括

  • 編寫更快代碼的能力可以利用底層硬件。
  • 此外，您還可以進行客戶端壓縮，從而縮短加載時間並節省帶寬。 因此，您使用客戶端的 CPU 或底層硬件進行壓縮和解壓縮，然後使用服務器的資源。
  • 此外，除了使用 JavaScript，您還可以使用不同的編程語言為 Web 編寫代碼。 例如，您可以使用 Rust、C 和 C++ 為 Web 應用程序的某些方面編寫高性能代碼。

項目

如果我們轉向現實世界的例子，以下項目值得一提。

  • Figma通過使用 WebAssembly 提高了其網絡應用程序的性能。 他們減少了應用程序初始化、整個設計渲染甚至下載設計文件的加載時間。 正如我們之前討論的，WebAssembly 也非常適合壓縮。 Figma 實施了 WASM 來改善下載大小，顯著縮小它們。
  • Pyodide ：另一個令人興奮的 WASM 項目是 Pyodide 項目，它是由 Mozilla 發布的。 它使科學家能夠將 Python 科學堆棧編譯為 WebAssembly，包括 NumPy、SciPy、Scikit-learn 等，並提供給瀏覽器。 它提供了 Python 和 JavaScript 之間透明的對象轉換。 最後，它還允許開發人員使用 Python 使用 Web API。
  • Brazor WebAssembly ： Brazor WebAssembly 框架允許開發人員使用 .NET 構建單頁、客戶端和交互式 Web 應用程序。 您可以使用基於 WebAssembly 的 .NET 運行時將這些應用程序託管到瀏覽器。 在這裡，作為開發人員，您可以在 WebAssembly 的 JavaScript API 的幫助下訪問 .NET 代碼中的瀏覽器功能。
figma-webassembly
資料來源：菲格瑪

其他許多知名且有價值的項目都在使用 WebAssembly。 這些是 Binaryen、Cheerp、Forest、Grain 等。

最後的想法

WebAssembly 並不完全適合初學者。 但是，通過研究它的用例和關鍵概念，您可以清楚地了解它的能力。

隨著市場上令人興奮的項目的出現，現在是學習 WebAssembly 的最佳時機，尤其是當您從事 Web 開發時。 WASM 在瀏覽器之外工作的能力也使其成為面向性能的開發的絕佳選擇。