WebAssembly照亮了 Web端软件的未来

本文主要是介绍WebAssembly照亮了 Web端软件的未来，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

WebAssembly的发展历程相对较短，但影响深远。WebAssembly 于 2015 年首次发布，先驱技术是来自Mozilla的asm.js和Google Native Client，最初的实现是基于asm.js的功能集。自2017年3月由WebAssembly创造的MVP的预览版发布以来，WebAssembly发展迅速，目前已经部署到了所有主流浏览器。到了2019年，WebAssembly 1.0成为了W3C推荐的标准，这打破了之前仅用JavaScript来进行Web开发的局面。那么什么是WebAssembly? 这篇文章让你从多方面了解WebAssembly这一技术。

WebAssembly是什么？

WebAssembly（简称Wasm）是一种新型的、可以在现代Web浏览器中运行的代码。这是一种低级类汇编语言，其二进制格式紧凑，为诸如 C、C++和 Rust 等低级源语言提供一个高效的编译目标，以便它们可以在Web上运行。开发者通过自选语言编写代码，然后将其编译为WebAssembly字节码进行运行。字节码在客户端（通常是Web浏览器）上运行，在那里它被编译为可执行机器码并以接近原生的速度执行。

由于Wasm提供给浏览器的是以二进制格式编译的代码，节省了下载和解析JavaScript代码时间，使代码执行效率更高。此外，WASM提供了开发者手动管理内存的选项，以及可以直接访问内存的特性，从而提升了运行效率。WebAssembly不仅具有高效的解析和执行能力，还有着硬件和操作系统无关的低级虚拟机模型，提供了安全的运行环境。当前，WASM可以兼容主流的Web浏览器，例如Chrome、Edge、Firefox、Opera和Safari。

WASM被设计为与JavaScript协同工作，以此实现Web平台上的高性能应用。综合来看，WASM在Web平台上表现出近乎原生的开发速度，充分凸显了WebAssembly的性能与功能，以及JavaScript的表现力与灵活性，使得客户端应用可以轻松地在Web上运行。

WebAssembly的关键原理

在了解如何编译C语言为WASM的步骤之前，你需要先了解几个关键原理。

模块（Module）： 表示一个已经被浏览器编译为可执行机器码的 WebAssembly 二进制代码。模块中包含一系列的函数和数据（例如，全局变量和初始化的内存）。模块是无状态的，能够像ES2015 的模块一样声明导入和导出。

内存（Memory）： WebAssembly使用一种名为线性内存的数据结构来表示内存。线性内存是一个连续的字节块，其大小总是一页（64 KiB）的倍数。WebAssembly代码可以直接读取和写入这些字节。

表格（Table）： 可调整大小的类似于数组的结构，包含引用（例如函数），出于安全和可移植性考虑，这些引用不能以原始字节形式存储在内存中。

实例（Instance）： 一个已经与运行时使用的所有状态配对的模块，包括内存、表和导入值集。一个实例就像一个 ES 模块，它被加载到一个特定的整体中，并带有一组特定的导入值。

一个WebAssembly模块定义了一系列的函数、全局变量、内存和表格，它们通过与特定的导入和导出的值结合，可以被实例化为一个运行的应用。而内存和表格也可以被实例化为运行的应用，它们的值随着应用的执行而改变。

编译C/C++为Wasm的操作步骤

在示例如何用C语言编译为 Wasm之前，你需要满足一个前提条件 —— 获取 Emscripten SDK来配置安装环境。使用 Emscripten 编译主要适用于两个场景，下面分别来了解一下具体的操作步骤。

创建 HTML 和 JavaScript

你可以用 C 语言编写一个程序，使用 Emscripten SDK 将该程序编译成 WebAssembly，然后创建一个 HTML 文件，在网络服务器上加载并运行 WebAssembly 代码。

首先我们需要一个例子来编译。复制以下简单的 C 示例，并将其保存在本地目录并命名为 hello.c 的文件中：

#include <stdio.h>int main() {printf("Hello World\n");return 0;
}

现在，使用进入 Emscripten 编译器环境时使用的终端窗口，导航到与 hello.c 文件相同的目录，然后运行以下命令：

emcc hello.c -o hello.html

我们通过命令传递的选项如下：

-o hello.html —— 这指定我们希望Emscripten生成一个HTML页面来运行我们的代码（以及要使用的文件名），以及Wasm模块和JavaScript粘合代码来编译和实例化Wasm，使其可以在Web环境中使用。

二进制的Wasm模块代码（hello.wasm）
一个包含粘合代码的JavaScript文件，用于在原生C函数和JavaScript/Wasm之间进行转换（hello.js）
一个HTML文件，用于加载、编译和实例化你的Wasm代码，并在浏览器中显示其输出（hello.html）

现在，在支持 WebAssembly 的浏览器中加载生成的hello.html来运行示例。Firefox 52、Chrome 57、Edge 57 和 Opera 44 默认启用了 WebAssembly。
如果运行顺利，您应该会在网页上以及浏览器的 JavaScript 控制台上看到 Emscripten 控制台中的"Hello world"输出。

使用自定义 HTML 模板

首先，在新目录中，将以下 C 代码保存在名为hello2.c的文件中：

#include <stdio.h>int main() {printf("Hello World\n");return 0;
}

在 emsdk 存储库中搜索文档shell_minimal.html。将其复制到之前新目录中名为html_template的子目录中。
现在导航到您的新目录（同样，在您的 Emscripten 编译器环境终端窗口中），并运行以下命令：

emcc -o hello2.html hello2.c -O3 --shell-file html_template/shell_minimal.html

这次我们传递的选项略有不同：

我们已经指定了-o hello2.html，这意味着编译器仍将输出 JavaScript 粘合代码和.html。
我们指定了-O3，用于优化代码。Emcc 与任何其他 C 编译器一样具有优化级别，包括：（-O0无优化）、-O1、-O2、-Os、-Oz、-Og和-O3。-O3是发布版本的良好设置。
我们还指定了--shell-file html_template/shell_minimal.html —— 这提供了您要用来创建将运行示例的 HTML 的 HTML 模板的路径。

现在让我们运行这个例子。上面的命令将生成hello2.html，其内容与模板大致相同，并添加了一些粘合代码来加载生成的 Wasm、运行它等。在浏览器中打开它，您将看到与上一个示例大致相同的输出。

调用 C 语言定义的自定义函数

如果你在 C 代码中定义了一个函数，而又想根据需要从 JavaScript 中调用该函数，那么您可以使用Emscripten ccall()函数和EMSCRIPTEN_KEEPALIVE声明（该声明会将您的函数添加到导出函数列表中）来实现这一目的。

首先，在新目录中将以下代码保存为hello3.c.默认情况下，Emscripten 生成的代码只会调用 main() 函数，其他的函数将被视为无用代码。在一个函数名之前添加 EMSCRIPTEN_KEEPALIVE 能够防止这样的事情发生。你需要导入 emscripten.h 库来使用 EMSCRIPTEN_KEEPALIVE。

#include <stdio.h>
#include <emscripten/emscripten.h>int main() {printf("Hello World\n");return 0;
}#ifdef __cplusplus
#define EXTERN extern "C"
#else
#define EXTERN
#endifEXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char ** argv) {printf("MyFunction Called\n");
}

现在，为了方便起见，将包含 {{{ SCRIPT }}} 内容的 html_template/shell_minimal.html 也添加到这个新目录中（在实际开发环境中，显然应将其放在中心位置）。
现在让我们再次运行编译步骤。在最新目录下（在 Emscripten 编译器环境的终端窗口中），用以下命令编译 C 代码。请注意，我们需要使用 NO_EXIT_RUNTIME 进行编译：否则，当 main() 退出时，运行时将被关闭，并且调用编译后的代码将无效。这对于正确的 C 语言模拟来说非常必要：例如，确保调用 atexit() 函数。

emcc -o hello3.html hello3.c --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"

如果你在浏览器中在此加载实例，你将看到和之前相同的结果。
现在我们需要运行新的 myFunction() JavaScript 函数。首先，在文本编辑器中打开hello3.html文档。
添加一个<button>元素，如下所示，就在第一个 <script type='text/javascript'> 开始标签的上方。

<button id="mybutton">Run myFunction</button>

现在在第一个 <script> 元素末尾添加以下代码：

document.getElementById("mybutton").addEventListener("click", () => {alert("check console");const result = Module.ccall("myFunction", // name of C functionnull, // return typenull, // argument typesnull, // arguments);
});