目标、关键概念和用例

您是否想知道 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 关键概念

在引擎盖内部,WebAssembly 遵循以下步骤:

  • 首先,您需要使用定义类型的静态类型语言编写代码。
  • 完成后,您将生成一个预编译的 WASM 模块并将代码提供给引擎编译器。
  • 上述步骤确保 WASM 跳过解析并使代码准备好在 Web 浏览器上呈现。
  修复错误 42127 Cab 存档已损坏

在 Web 浏览器中运行的 WebAssembly 背后的关键概念包括:

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

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 对象包含在模块实例化期间发生的错误。
  10 个适用于小型企业到企业的日志管理工具 [Splunk and ELK Stack Alternatives]

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 代码中的浏览器功能。
  9 种识别 Google 上“人们也问”问题的最佳工具

资料来源:菲格玛

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

最后的想法

WebAssembly 并不完全适合初学者。 但是,通过研究它的用例和关键概念,您可以清楚地了解它的能力。

随着市场上令人兴奋的项目的出现,现在是学习 WebAssembly 的最佳时机,尤其是当您从事 Web 开发时。 WASM 在浏览器之外工作的能力也使其成为面向性能的开发的绝佳选择。

喜欢阅读这篇文章吗? 与世界分享怎么样?