WebAssembly 初学者 – 第 2 部分：目标、关键概念和使用示例

您是否曾经想过 WASM 的关键概念和用例？如果没有，我们已经为您解答。

WebAssembly (WASM) 是一种新的低级语言，可让您在网络上实现类似本机的性能。

在 WebAssembly 初学者 – 第 1 部分中，我们从初学者的角度介绍了 WASM，涵盖了它的定义和局限性。我们还研究了 WebAssembly 功能、WASM 路线图，以及 JavaScript 如何与 WebAssembly 协同工作而不是与之对抗。

这篇文章通过解释 WASM 的目标、关键概念和用例来介绍 WebAssembly。我们还将了解一些令人兴奋的项目。

让我们开始吧。

WebAssembly 目标

要理解 WebAssembly 的关键概念，我们首先需要看看它的目标。这些目标包括：

• 能够通过使用加载时间和大小高效的二进制格式作为编译目标来利用可用的硬件。简而言之，WASM 使用二进制抽象语法树（AST）并支持以本机速度编译和执行。使用这种方法，WASM 可以在各种设备上运行，包括 IoT、Web 和移动设备。
• WASM 的目标不是修改或修改现有的 Web 平台。这种方法允许 WebAssembly 与当前和历史的 Web 很好地集成。 WebAssembly 还能够与 JavaScript 无缝协作，包括与 JavaScript 并行运行以及从 JavaScript 进行同步调用。
• 与权限安全策略和同源无缝协作。
• 使开发人员能够设计支持非浏览器嵌入的解决方案。
• 最后，它提供了一种人类可编辑的文本格式，为开发人员提供了有效使用 WebAssembly 源代码的工具。

WebAssembly 的关键概念

在底层，WebAssembly 遵循以下步骤：

• 首先，您需要使用已定义类型的静态类型语言编写代码。
• 完成后，生成预编译的 WASM 模块并将代码发送到引擎编译器。
• 上述步骤将允许 WASM 跳过解析并允许您在 Web 浏览器中查看代码。

在 Web 浏览器中运行的 WebAssembly 背后的关键概念是：

• 内存： WebAssembly 中的内存由低级内存访问指令管理和写入。从技术上讲，这是一个可调整大小的 ArrayBuffer，包含内存字节数组。
• 模块： WebAssembly 中的模块是编译后的可执行计算机代码。由于它是无状态格式，因此 Web 浏览器会编译该模块并在 Windows 和工作人员之间共享它。模块还存储和声明导入和导出，以及存储函数、表、类型、全局变量和内存。
• 表：表由使用可调整大小的类型数组的所有引用和函数组成。这消除了在内存中存储原始字节的需要。
• 实例：在 WASM 中，实例是一个运行时模块，所有状态都是配对的。这些状态包括表、内存和其他导入的值集。

Web开发人员可以使用JavaScript API来调用和定义模块、表、实例和表。此外，使用 JavaScript 在 JavaScript 函数中同步调用 WASM 导出。因此，JavaScript 可以很好地与 WebAssembly 配合使用，因为您可以使用 WASM 在 Web 浏览器中创建高性能应用程序。

WASM 对象

使用 WebAssembly 时，您需要跟踪八个 WASM 对象。这些对象包括：

• WebAssembly.Global – Global 对象是一个全局变量实例。可以从 WebAssembly.Module 和 JavaScript 访问。
• WebAssembly.Module – 这里的 Module 对象包含无状态 WASM 代码。代码是预编译的。
• WebAssembly.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项目）。
• 您的网络浏览器中的视频游戏，包括这些高性能游戏。
• 科学可视化和模拟
• 平台仿真/模拟，如DOSBox、MAME等。
• 加密
• 远程桌面
• 开发者工具

使用示例

从一般角度来看，WebAssembly 的一些有吸引力的用例包括：

• 您可以编写更快的代码并利用底层硬件。
• 此外，压缩可以在客户端完成，从而减少加载时间并节省带宽。因此，它使用客户端的CPU或底层硬件来进行压缩和解压缩，然后使用服务器的资源。
• 此外，除了使用 JavaScript 之外，您还可以使用多种编程语言为 Web 编写代码。例如，您可以使用 Rust、C 和 C++ 为 Web 应用程序的特定方面编写高性能代码。

项目

继续看一个实际的例子，下面的项目值得一提。

• Figma通过使用 WebAssembly 提高了其 Web 应用程序的性能。这些减少了初始化应用程序、渲染整个设计甚至下载设计文件时的加载时间。如前所述，WebAssembly 也非常适合压缩。 Figma 实施 WASM 来改善下载大小，显着减少下载大小。
• Pyodide ：另一个令人兴奋的 WASM 项目是 Mozilla 发布的 Pyodide 项目。这使得科学家能够将他们的 Python 科学堆栈（包括 NumPy、SciPy、Scikit-learn 等）编译到 WebAssembly 中并将其提供给浏览器。提供 Python 和 JavaScript 之间透明的对象转换。最后，它允许开发人员使用 Python 使用 Web API。
• Brazor WebAssembly ： Brazor WebAssembly 框架允许开发人员使用 .NET 构建单页、客户端、交互式 Web 应用程序。您可以使用基于 WebAssembly 的 .NET 运行时在浏览器中托管这些应用程序。在这里，开发人员可以利用 WebAssembly 的 JavaScript API 来访问其 .NET 代码中的浏览器功能。

许多其他知名且有价值的项目都使用 WebAssembly。这些是Binaryen 、 Cheerp 、 Forest 、 Grain等。

最后的想法

WebAssembly 并不完全适合初学者。但是，学习其用例和关键概念将使您清楚地了解其功能。

市场上有令人兴奋的项目，所以现在是学习 WebAssembly 的最佳时机，特别是如果您从事 Web 开发。 WASM 还能够在浏览器之外工作，这使其成为面向性能的开发的理想选择。