WebAssembly介绍

当代社会， 万事万物总是在快速地变化着，，有一种新技术正在产生巨大的影响。 想象一下一个超快的网络，几乎可以像常规计算机程序一样完成任务。 这就是 WebAssembly（简称“wasm”）的用武之地。

Wasm发音：

那么，什么是WebAssembly 呢？

什么是 WebAssembly？

WebAssembly 本质上是一种二进制指令格式。 虽然这听起来可能很复杂，但它可以被定义为一种通用语言，浏览器可以理解并以接近本机的速度执行。

与主要是基于文本的脚本语言的 JavaScript 不同，WebAssembly 被设计为一种低级语言，允许您将 C、C++ 或 Rust 等高级语言编译为可以在浏览器中运行的二进制格式。

对速度的极致追求

为了真正理解 WebAssembly 的重要性，先来看一下设计这门语言的初衷。 传统 Web 应用程序的功能严重依赖 JavaScript。 虽然 在现在的互联网应用中，JavaScript 占据了重要地位，用途广泛而且易于访问，但是在某些任务中， JavaScript的表现也不尽人意，例如在执行 3D 渲染、视频编辑或科学模拟等高性能任务时，JavaScript表现出一定的局限性。

WebAssembly 提供了一种接近原生代码的速度运行来此类任务的方法，从而解决了这些限制。 WebAssembly通过更接近机器代码并且更加有效地利用硬件资源来实现这一点。

WebAssembly 的工作原理

为了更好地理解 WebAssembly，先简单地看一下它的工作原理：

编译：使用 C、C++、Rust 等高级语言编写代码。然后将此代码编译为 WebAssembly 二进制文件（扩展名为 .wasm）。 该二进制文件针对快速执行进行了高度优化。

但是注意， wasm代码并不是本地代码，不能直接运行。

加载：当您加载包含 WebAssembly 模块的网页时，浏览器会像任何其他资源一样获取 .wasm 文件。

执行：加载后，WebAssembly 代码将由浏览器的虚拟机执行。 它以接近本机的速度运行，因为它更接近计算机 CPU 可以理解的机器代码。

集成：WebAssembly 可以与 JavaScript 无缝交互。 开发者可以从 JavaScript 调用 WebAssembly 函数，反之亦然，从而实现与现有 Web 应用程序的顺利集成。

WebAssembly 的用例

WebAssembly 的潜力远远超出了在浏览器中运行传统桌面应用程序的范围。 以下是一些高级用例：

3D 图形和游戏

WebAssembly 支持开发沉浸式 3D 游戏，这些游戏可以直接在浏览器中运行，性能与本机应用程序类似。 WebGL 等库和 Unity 等游戏引擎正在利用 WebAssembly 来突破基于 Web 的游戏的界限。

推荐游戏1:

暗黑破坏神Web版：https://d07riv.github.io/diabloweb/

源代码：https://github.com/d07RiV/diabloweb

该项目使用 WebAssembly，因为它使用 Emscripten 移植了 Deviloution 的源代码。 这是非常值得注意的，因为它证明了 WebAssembly 可以使用 Emscripten 将这些大型 C/C++ 代码库带到网络上，以运行令人印象深刻的 3D 游戏。

如果您对移植 C/C++ 库或应用程序感兴趣，我强烈推荐 Ben Smith 的 (binji) SFHTML5 Talk，内容涉及将 C 项目移植到 Web。 本演讲与 D3Wasm 无关，但可以帮助推动移植这些类型的应用程序。

推荐游戏2:

源代码：https://github.com/rdeepak2002

Dream Engine 简介：一款突破性的实时 3D 引擎，将尖端游戏引擎的功能与 Google Docs 的协作能力无缝集成

实时音频和视频处理

需要实时音频和视频处理的应用程序（例如视频会议或音乐制作软件）可以受益于 WebAssembly 的低级功能来有效处理数据。

示例：

网址：https://petersalomonsen.com/webassemblymusic/livecodev2/0.0.41/?gitrepo=blablabla

Peter Salomonsen 的 WebAssembly Music Experiment 是一个网络音乐实时编码编辑器，其中的乐器是在 AssemblyScript 中实现的。

Peter Salomonsen 的 WebAssembly Music Experiment 使用 AssemblyScript 开发实时编码编辑器中每个可用乐器的逻辑和示例输出。 “WebAssembly 使实时合成音频成为可能，并具有一致/可预测的性能。” 这意味着，由于合成音频的计算量很大，JavaScript 很难完成这项任务，但这使其非常适合 WebAssembly。 因此，为浏览器解锁新的高性能功能！

加密货币和区块链

许多区块链技术，包括以太坊，都采用 WebAssembly 作为智能合约的执行环境。 这确保了区块链操作的安全高效执行。

NEAR协议

网站源代码：https://github.com/near/near-sdk-as

Near Protocol 是用于使用 WebAssembly (AssemblyScript) 构建去中心化应用程序的公共区块链用于在 AssemblyScript 中开发 NEAR 智能合约的软件包集合，包括：

• 运行时库 - 运行时库附近的 AssemblyScript
• bindgen - 添加（反）序列化输入和输出所需的绑定的 AssemblyScript 转换器。
• 近模拟虚拟机 - NEAR VM 的核心编译为用于运行单元测试的 WebAssembly。
• @as-pect/cli - 类似于 jest 的 AssemblyScript 测试框架。

科学和计算任务

科学模拟和数据分析工具可以在浏览器中运行，使研究人员能够利用 WebAssembly 的强大功能进行复杂的计算。

示例：

Project Cthulhu 是一个基于网络的船舶模拟器，允许您在浏览器上计算、运行和可视化船舶模拟。 对于前端，它使用 React 和 Tailwind CSS。 对于该项目的 3D 部分，它使用 Three.js 和 React Three Fiber。

Project Cthulhu 是一个基于网络的船舶模拟器，允许您在浏览器上计算、运行和可视化船舶模拟。 对于前端，它使用 React 和 Tailwind CSS。 对于该项目的 3D 部分，它使用 Three.js 和 React Three Fiber。

我们想要尝试 WASM 并重用我们已经在代码中编写的 Python 代码。 因此我们最终使用了 Pyodide。

Github：https://lnkd.in/dzWYwir2

项目网站：https://lnkd.in/d4t8cU3z

个人网站：https://piperunner.in/

跨平台桌面应用程序

使用 Electron 和 WebAssembly 等工具，您可以创建跨平台桌面应用程序，这些应用程序与 Web 应用程序共享大部分代码库。

开始使用WebAssembly 需要注意什么

如果对 WebAssembly 的功能感到兴奋，那么开始编写之前，需要注意下面几点：

选择高级语言

您需要 C、C++ 或 Rust 等高级语言。 Rust 因其安全功能和 WebAssembly 支持而特别受欢迎。

设置开发环境

为您选择的语言安装必要的工具。 对于 Rust，您可以使用 Rust 的 WebAssembly 工具链，可以使用“rustup”安装该工具链。

编写并编译您的代码

使用您选择的语言编写代码，并使用适当的编译器将其编译为 WebAssembly。 对于 Rust，请使用“wasm-pack”工具。

与 JavaScript 集成

要从 JavaScript 与 WebAssembly 代码进行交互，您需要导入 WebAssembly 模块并调用其函数。 您可以使用 WebAssembly JavaScript API 来实现此目的。

框架和库

WebAssembly有着丰富的框架和库等待着开发人员。 这些工具不仅简化了 WebAssembly 编程的艺术，还提升了它的艺术水平，满足了开发人员不同的背景和偏好。

• AssemblyScript 作为一种专为 WebAssembly 设计的类 TypeScript 语言脱颖而出，为想要利用 WebAssembly 性能优势的 JavaScript 开发人员简化了过渡过程。

• Microsoft 的 Blazor 引入了一种不同的方法，支持使用 C# 和 .NET 进行客户端开发，为熟悉这些生态系统的开发人员开辟了新的可能性。
  
  
• 此外，Emscripten 的功能是将 C 和 C++ 代码作为输入，并使用一系列工具将其转换为 WebAssembly 字节码。 随后可以在 Web 浏览器中加载并运行生成的字节码，从而使开发人员能够利用 C 和 C++ 代码构建 Web 应用程序。

这些框架和库扩展了 WebAssembly 应用程序的视野，为具有不同背景和偏好的开发人员提供了灵活性和选择。

结论

WebAssembly 使开发人员能够创建曾经只能通过本机代码才能实现的高性能 Web 应用程序。 无论您是构建沉浸式游戏、实时多媒体应用程序还是复杂的科学模拟，WebAssembly 都开辟了新的可能性。