WebAssembly 该怎么学？
什么是 WebAssembly？
一种新型的代码，可以运行在 Web 浏览器，提供一些新特性并主要专注于高性能
主要不是用于写，而是 C/C++、C#、Rust 等语言编译的目标，所以你即使不知道如何编写 WebAssembly 代码也能利用它的优势
其他语言编写的代码也能以近似于原生速度运行，客户端 App 也能在 Web 上运行
在浏览器或 Node.js 中可以导入 WebAssembly 模块，JS 框架能够使用 WebAssembly 来获得巨大的性能优势和新的特性的同时在功能上易于使用
WebAssembly 的目标
快、高效、便利 -- 通过利用一些通用的硬件能力，能够跨平台以近乎于原生的速度执行
可读、可调试 -- WebAssembly 是一种低层次的汇编语言，但是它也有一种人类可读的文本格式，使得人们可编写代码、查看代码、可调试代码。
确保安全 -- WebAssembly 明确运行在安全、沙箱的执行环境，类似其他 Web 的代码，它会强制开启同源和一些权限策略。
不破坏现有的 Web -- WebAssembly 被设计与其他 Web 技术兼容运行，并且保持向后兼容性。
WebAssembly 如何与 Web 兼容的？
Web 平台可以看做有两个部分：
一个虚拟机（VM）用于运行 Web 应用代码，例如 JS 引擎运行 JS 代码
一系列 Web API，Web 应用可以调用这些 API 来控制 Web 浏览器/设备 的功能，来做某些事情（DOM、CSSOM、WebGL、IndexedDB、Web Audio API 等）
长期以来，VM 只能加载 JS 运行，JS 可能足够满足我们的需求，但如今我们却遇到了各种性能问题，如 3D 游戏、VR/AR、计算机视觉、图片/视频编辑、以及其他需要原生性能的领域。
同时，下载、解析和编译大体积的 JS 应用是很困难的，在一些资源更加受限的平台上，如移动设备等，则会更加放到这种性能瓶颈。
WebAssembly 是一种与 JavaScript 不同的语言，它不是为了替代 JS 而生的，而是被设计为与 JS 互为补充并能协作，使得 Web 开发者能够重复利用两种语言的优点：
JS 是高层次的语言，灵活且极具表现力，动态类型、不需要编译步骤，并且有强大的生态，非常易于编写 Web 应用。
WebAssembly 是一种低层次、类汇编的语言，使用一种紧凑的二级制格式，能够以近乎原生的性能运行，并提供了低层次的内存模型，是 C++、Rust 等语言的编译目标，使得这类语言编写的代码能够在 Web 上运行（需要注意的是，WebAssembly 将在未来提供垃圾回收的内存模型等高层次的目标）
随着 WebAssembly 的出现，上述提到的 VM 现在可以加载两种类型的代码执行：JavaScript 和 WebAssembly。
JavaScript 和 WebAssembly 可以互操作，实际上一份 WebAssembly 代码被称为一个模块，而 WebAssembly 的模块与 ES2015 的模块在具有很多共同的特性。
WebAssembly 的关键概念
为了理解 WebAssembly 是如何在 Web 运行的，需要了解几个关键概念：
Module：通过浏览器编译成为可执行机器码的 WebAssembly 二进制文件，Module 是无状态的，类似 Blob，能够在 Window 和 Worker 之间通过
postMessage共享，一个 Module 声明了类似 ES2015 模块类似的 import 和 export。Memory：一个可调整大小的 ArrayBuffer，其中包含由 WebAssembly 的低层次内存访问指令读取和写入的线性字节数组。
Table：一个可调整大小的类型化引用数组（如函数），然而处于安全和可移植性的原因，不能作为原始字节存储在内存中
Instance：一个包含它在运行时用到的所有状态，包含 Memory、Table、以及一系列导入值的 Module，一个 Instance 类似一个 ES2015 的模块，它被加载到具有特定导入集的特定全局变量中
WebAssembly 的 JavaScript API 提供给开发者创建 Module、Memory、Table 和 Instance 的能力，给定一个 WebAssembly 的 Instance，JS 代码可以同步的调用它的 exports -- 被作为普通的 JavaScript 函数导出。任意 JavaScript 函数可以被 WebAssembly 代码同步的调用，通过将 JavaScript 函数作为 imports 传给 WebAssembly Instance。
因为 JavaScript 能够完全控制 WebAssembly 代码的下载、编译和运行，所以 JavaScript 开发者可以认为 WebAssembly 只是 JavaScript 的一个新特性 -- 可以高效的生成高性能的函数。
在未来， WebAssembly 模块可以以 ES2015 的模块加载形式加载，如
保存上述内容，重新刷新浏览器可以看到如下结果：
当我们点击上图中的按钮时，可以获得如下结果：
首先会收到一个 alert 提示，然后在输出里面打印了 MyFunction Called 内容，表示 myFunction 调用了，打开控制台也可以看到如下打印结果：
上述例子展示了可以在 JavaScript 中通过 ccall 来调用 C 代码中导出的函数。
如何编译已经存在的 C 模块到 WebAssembly？
一个 WebAssembly 的核心使用场景就是将重复利用已经存在的 C 生态系统中的库，并将它们编译到 Web 平台上使用而不用重新实现一套代码。
这些 C 库通常依赖 C 的标准库，操作系统，文件系统或者其他依赖，Emscripten 提供绝大部分上述依赖的特性，尽管还是存在一些限制。
让我们将 C 库的 WebP 编码器编译到 wasm 来了解如何编译已经存在的 C 模块，WebP codec 的源码是用 C 实现的，能够在 Github[7] 上找到它，同时可以了解到它的一些 API 文档[8]。
首先 Clone WebP 编码器的源码到本地，和 emsdk 、WebAssembly 目录同级：
git clone https://github.com/webmproject/libwebp为了快速上手，我们可以先导出 encode.h 头文件里面的 WebPGetEncoderVersion 函数给到 JavaScript 使用，首先在 WebAssembly 文件夹下创建 webp.c 文件并加入如下：
#include "emscripten.h"
#include "src/webp/encode.h"
EMSCRIPTEN_KEEPALIVE
int version() {
return WebPGetEncoderVersion();
}上述的例子可以很快速的检验是否正确编译了 libwebp 的源码并能成功使用其函数，因为上述函数无需各种复杂的传参和数据结构即可成功执行。
为了编译上述函数，我们首先得告诉编译器如何找到 libwebp 库的头文件，通过在编译时加上标志 I ，然后指定 libwep 头文件的地址来告诉编译器地址，并将编译器所需要的所有 libwebp 里面的 C 文件都传给它。但有时候一个个列举 C 文件非常的繁琐，所以一种有效的策略就是将所有的 C 文件都传给编译器，然后依赖编译器自身去过滤掉那些不必要的文件，上述描述的操作可以通过在命令行编写如下命令实现：
emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \
-I libwebp \
WebAssembly/webp.c \
libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c注意：上述的传参策略并不对在所有 C 项目都生效，有很多项目在编译前依赖 autoconfig/automake 等库来生成系统特定的代码，而 Emscripten 提供了
emconfigure和emmake来封装这些命令，并注入合适的参数来抹平那些有前置依赖的项目。
运行上述命令之后，会产出一份 a.out.js 胶水代码，和 a.out.wasm 文件，然后你需要在 a.out.js 文件输出的目录下创建一份 HTML 文件，并在其中添加如下代码
上述代码中，我们首先导入编译器编译输出的 a.out.js 胶水代码，然后在 WebAssembly 的模块初始化好了之后，通过 cwrap 函数导出 C 函数 version 使用，通过运行和之前类似的 npx serve . 命令，然后打开浏览器可以看到如下效果：
libwebp 通过十六进制的
0xabc的 abc 来表示当前版本a.b.c，例如 v0.6.1，则会被编码成十六进制0x000601，对应的十进制为 1537。而这里为十进制 66049，转成 16 进制则为0x010201，表示当前版本为 v1.2.1。
在 JavaScript 中获取图片并放入 wasm 中运行
刚刚通过调用编码器的 WebPGetEncoderVersion 方法来获取版本号来证实了已经成功编译了 libwebp 库到 wasm，然后可以在 JavaScript 使用它，接下来我们将了解更加复杂的操作，如何使用 libwebp 的编码 API 来转换图片格式。
libwebp 的 encoding API 需要接收一个关于 RGB、RGBA、BGR 或 BGRA 的字节数组，所以首先要回答的问题是，如何将图片放入 wasm 运行？幸运的是，Canvas API 有一个 CanvasRenderingContext2D.getImageData 方法，能够返回一个 Uint8ClampedArray ，这个数组包含 RGBA 格式的图片数据。
首先我们需要在 JavaScript 中编写加载图片的函数，将其写到上一步创建的 HTML 文件里：
现在剩下的操作则是如何将图片数据从 JavaScript 复制到 wasm，为了达成这个目的，需要在先前的 webp.c 函数里面暴露额外的方法：
一个为 wasm 里面的图片分配内存的方法
一个释放内存的方法
修改 webp.c 如下：
#include // 此头文件导入用于分配内存的 malloc 方法和释放内存的 free 方法
EMSCRIPTEN_KEEPALIVE
uint8_t* create_buffer(int width, int height) {
return malloc(width * height * 4 * sizeof(uint8_t));
}
EMSCRIPTEN_KEEPALIVE
void destroy_buffer(uint8_t* p) {
free(p);
} create_buffer 为 RGBA 的图片分配内存，RGBA 图片一个像素包含 4 个字节，所以代码中需要添加 4 * sizeof(uint8_t) ，malloc 函数返回的指针指向所分配内存的第一块内存单元地址，当这个指针返回给 JavaScript 使用时，会被当做一个简单的数字处理。当通过 cwrap 函数获取暴露给 JavaScript 的对应 C 函数时，可以使用这个指针数字找到复制图片数据的内存开始位置。
我们在 HTML 文件中添加额外的代码如下：
可以看到上述代码除了导入之前添加的 create_buffer 和 destroy_buffer 外，还有很多用于编码文件等方面的函数，我们将在后续讲解，除此之外，代码首先加载了一份 image.jpg 的图片，然后调用 C 函数为此图片数据分配内存，并相应的拿到返回的指针传给 WebAssembly 的 Module.HEAP8 ，在内存开始位置 p，写入图片的数据，最后会释放分配的内存。
编码图片
现在图片数据已经加载进 wasm 的内存中，可以调用 libwebp 的 encoder 方法来完成编码过程了，通过查阅 WebP 的文档[9]，发现可以使用 WebPEncodeRGBA 函数来完成工作。这个函数接收一个指向图片数据的指针以及它的尺寸，以及一个区间在 0-100 的可选的质量参数。在编码的过程中，WebPEncodeRGBA 会分配一块用于输出数据的内存，我们需要在编码完成之后调用 WebPFree 来释放这块内存。
我们打开 webp.c 文件，添加如下处理编码的代码：
int result[2];
EMSCRIPTEN_KEEPALIVE
void encode(uint8_t* img_in, int width, int height, float quality) {
uint8_t* img_out;
size_t size;
size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &img_out);
result[0] = (int)img_out;
result[1] = size;
}
EMSCRIPTEN_KEEPALIVE
void free_result(uint8_t* result) {
WebPFree(result);
}
EMSCRIPTEN_KEEPALIVE
int get_result_pointer() {
return result[0];
}
EMSCRIPTEN_KEEPALIVE
int get_result_size() {
return result[1];
}上述 WebPEncodeRGBA 函数执行的结果为分配一块输出数据的内存以及返回内存的大小。因为 C 函数无法使用数组作为返回值（除非我们需要进行动态内存分配），所以我们使用一个全局静态数组来获取返回的结果，这可能不是很规范的 C 代码写法，同时它要求 wasm 指针为 32 比特长，但是为了简单起见我们可以暂时容忍这种做法。
现在 C 侧的相关逻辑已经编写完毕，可以在 JavaScript 侧调用编码函数，获取图片数据的指针和图片所占用的内存大小，将这份数据保存到 JavaScript 自己的内存中，然后释放 wasm 在处理图片时所分配的内存，让我们打开 HTML 文件完成上述描述的逻辑：
在上述代码中我们通过 loadImage 函数加载了一张本地的 image.jpg 图片，你需要事先准备一张图片放置在 emcc 编译器输出的目录下，也就是我们的 HTML 文件目录下使用。
注意：
new Uint8Array(someBuffer)将会在同样的内存块上创建一个新视图，而new Uint8Array(someTypedArray)只会复制someTypedArray的数据。
当你的图片比较大时，因为 wasm 不能扩充可以容纳 input 和 output 图片数据的内存，你可能会遇到如下报错：
但是我们例子中使用的图片比较小，所以只需要单纯的在编译时加上一个过滤参数 -s ALLOW_MEMORY_GROWTH=1 忽略这个报错信息即可：
emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \
-I libwebp \
test-dir/webp.c \
libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \
-s ALLOW_MEMORY_GROWTH=1再次运行上述命令，得到添加了编码函数的 wasm 代码和对应的 JavaScript 胶水代码，这样当我们打开 HTML 文件时，它已经能够将一份 JPG 文件编码成 WebP 的格式，为了近一步证实这个观点，我们可以将图片展示到 Web 界面上，通过修改 HTML 文件，添加如下代码：
然后刷新浏览器，应该可以看到WebP图片展示到 Web 端，通过将这个文件下载到本地，可以看到其格式转成了 WebP：
通过上述的流程我们成功编译了现有的 libwebp C 库到 wasm 使用，并将 JPG 图片转成了 WebP 格式并展示在 Web 界面上，通过 wasm 来处理计算密集型的转码操作可以大大提高网页的性能，这也是 WebAssembly 带来的主要优势之一。
本文为 WebAssembly 学习的第一篇文章，后续还会有一篇更加深入的文章，敬请期待！
参考资料
[1]
WasmFiddle: https://wasdk.github.io/WasmFiddle/
[2]WasmFiddle++: https://anonyco.github.io/WasmFiddlePlusPlus/
[3]WasmExplorer: https://mbebenita.github.io/WasmExplorer/
[4]直接调用 Web API: https://github.com/WebAssembly/gc/blob/master/README.md
[5]它的文档: https://www.assemblyscript.org/
[6]localhosthttp://localhost:5000/hello2.html: http://localhost:5000/hello2.html
[7]Github: https://github.com/webmproject/libwebp
[8]API 文档: https://developers.google.com/speed/webp/docs/api
[9]WebP 的文档: https://developers.google.com/speed/webp/docs/api#simple_encoding_api