在之前的文章中，我谈到了如何借助WebAssembly将C/C++库生态系统引入到Web中。squoosh是一个广泛使用了C/C++库的Web应用程序，使用各种从C++编译为WebAssembly的codec来压缩图像。

WebAssembly是一种低级虚拟机，可以保存在.wasm文件中的字节码。这种字节代码是强类型和结构化的，在宿主系统上经过编译很优化后可以运行得比JavaScript更快。

根据我的经验，Web的大多数性能问题都是由强制布局和过多的绘制引起的，偶尔也需要执行一些耗时的高计算成本任务，而WebAssembly在这个时候就可以派上用场。

热路径

在squoosh中，我们提供了一个JavaScript函数，用于将图像缓冲区旋转90度。虽然OffscreenCanvas也可以用来实现这个功能，但它并不支持我们的所有目标浏览器，而且在Chrome中还有一些小bug。

这个函数迭代输入图像的每个像素，并将它们复制到输出图像的不同位置，以此来实现旋转。对于一张4094×4096像素的图像（1600万像素），它需要进行1600万次内部代码块迭代，也就是我们所说的“热路径”。尽管迭代次数很多，但我们测试的三个浏览器中有两个可以在2秒或更短时间内完成迭代。对于这种迭代任务，这样的时间是可接受的。

for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
  for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
    const in_idx = ((d1 * d1Multiplier) + (d2 * d2Multiplier));
    outBuffer[i] = inBuffer[in_idx];
    i += 1;
  }
}

但是，其中有一个浏览器需要8秒钟。浏览器优化JavaScript的方式非常复杂，不同的引擎所优化的东西是不一样的。有一些针对原始执行进行了优化，有一些针对与DOM的交互进行了优化。因此，在一些浏览器中，我们遇到了未经优化的路径。

WebAssembly完全是围绕提升原始执行速度而构建的。因此，如果我们希望这些代码能够获得快速、可预测的跨浏览器性能，可以考虑使用WebAssembly。

WebAssembly实现可预测的性能

通常，JavaScript和WebAssembly可以达到相同的峰值性能。但是，对于JavaScript来说，这种性能只能在“快速路径”上实现，而且要保持在“快速路径”上并不容易。WebAssembly的一个主要优势是可预测的性能，即使是跨浏览器也是如此。严格的类型和低级架构可以让编译器做出更强的保证，只需要对WebAssembly代码优化一次，就可以始终使用“快速路径”。

之前我们使用了C/C++库，并将它们编译为WebAssembly，以便在Web上使用它们。但实际上，我们并没有真正触及库的代码，我们只是写了少量的C/C++代码作为浏览器和库之间的桥梁。但这次不一样：我们想要从头开始写一些东西，以便利用WebAssembly的优势。

WebAssembly架构

在开始写代码之前，有必要先了解一下WebAssembly。

引用WebAssembly.org的话：

WebAssembly（缩写为Wasm）是一种用于栈虚拟机的二进制指令格式。Wasm被设计为一个可移植的目标，用于编译C/C++/Rust等高级语言，支持在Web上部署客户端和服务器应用程序。

在将一段C语言或Rust代码编译为WebAssembly后，会得到一个包含模块声明的.wasm文件。声明中包含了一个导入列表、一个导出列表（函数、常量、内存块）和函数的二进制指令。

有一些需要注意的东西：WebAssembly虚拟机栈并没有保存在WebAssembly模块所使用的内存块中。虚拟机栈完全处在虚拟机内部，Web开发人员无法访问它（除了通过DevTools）。因此，我们可以编写完全不需要任何额外内存（只是有虚拟机内部栈）的WebAssembly模块。

在我们的例子中，我们需要使用一些额外的内存来访问图像的像素并生成图像的旋转版本。这个时候要用到WebAssembly.Memory。

内存管理

通常，一旦你使用了额外的内存，就需要以某种方式来管理内存。内存的哪些部分正在使用中？哪些部分是可用的？例如，C语言提供了malloc(n)函数，用来查找连续n个字节的内存空间。这种功能也被称为“分配器”。分配器需要被包含在WebAssembly模块中，这样会增加文件的大小。根据算法的不同，这些内存管理功能的体积和性能可能会有很大差异，这就是为什么很多语言提供了多种实现（“dmalloc”、“emmalloc”、“wee_alloc”……）。

在我们的例子中，在运行WebAssembly模块之前，我们知道输入图像的尺寸（以及输出图像的尺寸）。通常我们会将输入图像的RGBA缓冲区作为参数传给WebAssembly函数，并将旋转后的图像作为值返回。要生成这个返回值，我们需要使用分配器。但因为我们知道所需的内存总量（输入图像大小的两倍，一次用于输入，一次用于输出），所以可以使用JavaScript将输入图像放入WebAssembly内存，运行WebAssembly模块生成旋转图像，然后使用JavaScript回读结果。这样我们就可以不使用内存管理！

https://storage.googleapis.com/webfundamentals-assets/hotpath-with-wasm/animation_2_vp8.webm

如果你看一下原始的JavaScript函数，你会发现它其实是一些纯粹的计算代码，没有使用特定的JavaScript API，所以可以很容易地将这些代码移植到其他语言。我们评估了3种可编译为WebAssembly的语言：C/C++、Rust和AssemblyScript。我们唯一要解决的问题是：如何在不使用内存管理功能的情况下访问原始内存？

C语言和Emscripten

Emscripten是用于将C语言编译成WebAssembly的编译器。Emscripten的目标是成为GCC或clang等知名C语言编译器的直接替代品。这是Emscripten的核心任务，它旨在尽可能简单地将现有C语言和C++代码编译为WebAssembly。

访问原始内存是C语言的本质，指针的存在就是为了这个：

uint8_t* ptr = (uint8_t*)0x124;
ptr[0] = 0xFF;

我们将数字0x124转换为指向无符号8位整数（或字节）的指针，将ptr变量变成从内存地址0x124开始的数组，并且可以像使用其他数组一样使用它。在我们的例子中，我们想要重新排序图像的RGBA缓冲区，以便实现图像旋转。要移动一个像素，我们需要每次移动4个连续字节（每个通道一个字节：R、G、B和A）。为此，我们创建了一个无符号的32位整数数组。按照惯例，我们的输入图像将从地址4开始，输出图像从输入图像结束位置开始：

int bpp = 4;
int imageSize = inputWidth * inputHeight * bpp;
uint32_t* inBuffer = (uint32_t*) 4;
uint32_t* outBuffer = (uint32_t*) (inBuffer + imageSize);

for (int d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
  for (int d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
    int in_idx = ((d1 * d1Multiplier) + (d2 * d2Multiplier));
    outBuffer[i] = inBuffer[in_idx];
    i += 1;
  }
}

在将整个JavaScript函数移植到C语言后，可以使用emcc编译C文件：

$ emcc -O3 -s ALLOW_MEMORY_GROWTH=1 -o c.js rotate.c

与往常一样，Emscripten会生成一个叫作c.js的胶水代码文件和一个叫作c.wasm的wasm模块。请注意，wasm模块被压缩后只有260字节左右，而胶水代码在压缩大约是3.5KB。经过一些调整之后，我们可以去掉胶水代码，并使用普通API来实例化WebAssembly模块。

Rust

Rust是一门全新的现代编程语言，它提供了丰富的类型系统，没有运行时和所有权模型，可确保内存安全性和线程安全性。Rust还将WebAssembly视为一等公民，而且Rust团队还为WebAssembly生态系统贡献了很多优秀的工具。

其中一个工具是由rustwasm工作组开发的wasm-pack（https://rustwasm.github.io/wasm-pack/）。wasm-pack可以将你的代码转换为一个对Web友好的模块，支持webpack等捆绑器，但目前仅适用于Rust。这个工作小组正在考虑增加对其他语言的支持。

Rust中的切片相当于C语言中的数组。就像在C语言中一样，我们需要创建切片。这违反了Rust的内存安全模型，因此我们必须使用unsafe关键字来编写不遵循内存安全模型的代码。

let imageSize = (inputWidth * inputHeight) as usize;
let inBuffer: &mut [u32];
let outBuffer: &mut [u32];
unsafe {
  inBuffer = slice::from_raw_parts_mut::<u32>(4 as *mut u32, imageSize);
  outBuffer = slice::from_raw_parts_mut::<u32>((imageSize * 4 + 4) as *mut u32, imageSize);
}

for d2 in 0..d2Limit {
  for d1 in 0..d1Limit {
    let in_idx = (d1Start + d1 * d1Advance) * d1Multiplier + (d2Start + d2 * d2Advance) * d2Multiplier;
    outBuffer[i as usize] = inBuffer[in_idx as usize];
    i += 1;
  }
}

编译Rust文件：

$ wasm-pack build

这个命令将产生一个7.6KB的wasm模块，以及大约100个字节的胶水代码（压缩之后）。

AssemblyScript

AssemblyScript是一个相当年轻的项目，用于将TypeScript编译成WebAssembly。AssemblyScript使用与TypeScript相同的语法，但使用了自己的标准库。它们的标准库模拟了WebAssembly的功能。这意味你无法将任意TypeScript代码编译成WebAssembly，但确实意味着你不必为了编写WebAssembly而去学习新的编程语言！

for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
  for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
    let in_idx = ((d1 * d1Multiplier) + (d2 * d2Multiplier));
    store<u32>(offset + i * 4 + 4, load<u32>(in_idx * 4 + 4));
    i += 1;
  }
}

因为rotate()函数具有较小的类型表面，可以很容易将其移植到AssemblyScript。AssemblyScript提供了用于访问原始内存的函数load<T>(ptr: usize)和store<T>(ptr: usize, value: T)。要编译我们的AssemblyScript文件，只需要安装AssemblyScript/assemblyscript包，并运行：

$ asc rotate.ts -b assemblyscript.wasm --validate -O3

AssemblyScript将生成约300字节的wasm模块，并且没有胶水代码。这个模块可以与WebAssembly API一起使用。

瘦身

与其他两种语言相比，Rust的7.6KB显得非常大。WebAssembly生态系统中有一些工具可以用来分析WebAssembly文件，可以告诉你发生了什么，并帮你改善这种情况。

twiggy

twiggy是Rust团队开发的另一个工具，可以从WebAssembly模块中提取大量有用的信息。这个工具并不是特定于Rust的，可用来检查模块调用图、找出未使用或多余的部分，以及哪些部分占用了模块的文件大小。可以使用twiggy的top命令来查看模块文件的组成：

$ twiggy top rotate_bg.wasm

我们可以看到，大部分文件大小来自分配器。这个有点让我们感到惊讶，因为我们的代码没有使用动态分配功能。另一个占用较大体积的是“函数名”。

wasm-strip

wasm-strip是来自WebAssembly Binary Toolkit，简称为wabt的一个工具。它提供了一些工具，可用于检查和操作WebAssembly模块。wasm2wat是一个反汇编程序，可以将二进制wasm模块转换为人类可读的格式。wabt还包含了wat2wasm，可以将人类可读的格式转换回二进制wasm模块。我们确实有使用这两个工具来检查WebAssembly文件，不过我们发现wasm-strip是最有用的。wasm-strip从WebAssembly模块中移除了不必要的部分和元数据：

$ wasm-strip rotate_bg.wasm

这样就可以将Rust模块文件大小从7.5KB减小到6.6KB（在压缩之后）。

wasm-opt

wasm-opt是来自Binaryen的一个工具。它尝试基于字节码对WebAssembly模块进行大小和性能方面的优化。Emscripten已经在使用这个工具，有些编译器则没有。使用这些工具来节省一些额外的字节是个好主意。

wasm-opt -O3 -o rotate_bg_opt.wasm rotate_bg.wasm

通过使用wasm-opt，我们可以减少另外一些字节，在压缩之后只有6.2KB。

#![no_std]

经过一些咨询和研究，我们使用#![no_std]来重新编写Rust代码，这样就可以不使用Rust的标准库。这样就可以完全禁用动态内存分配，从而从模块中删除了分配器代码。使用以下命令编译Rust文件：

$ rustc --target=wasm32-unknown-unknown -C opt-level=3 -o rust.wasm rotate.rs

在使用了wasm-opt和wasm-strip之后，压缩的wasm模块只剩下1.6KB。虽然它仍然比C语言编译器和AssemblyScript生成的模块大，但也足以称得上是一个轻量级的模块。

性能

除了文件大小，我们还需要优化性能。那么我们应该如何衡量性能？它们的结果又是怎样的呢？

如何进行基准测试

尽管WebAssembly是一种低级的字节码格式，但仍需要通过编译器生成特定于主机的机器码。就像JavaScript一样，编译器包含了多个阶段的工作。简单地说：第一阶段编译速度较快，但生成的代码运行速度较慢。在模块开始运行后，浏览器就会观察哪些部分是经常使用的，并通过一个更优化但速度更慢的编译器发送这些部分。

我们的用例很有趣，旋转图像的代码可能会被使用一次，或者两次。因此，在绝大多数情况下，我们无法从优化编译器中获得好处。在进行基准测试时要记住这一点。循环运行WebAssembly模块10,000次会产生不真实的结果。为了获得更真实的数字，我们应该只运行一次模块，并根据单次运行的结果做出判断。

性能比较

这两张图是相同数据的不同视图。在第一张图中，我们根据浏览器来比较，在第二张图中，我们根据使用的语言来比较。请注意，我使用了对数时间尺度，而且所有基准测试使用了相同的1600万像素的测试图像和相同的主机。

从图中可以看出，我们解决了原始性能问题：所有WebAssembly模块的运行时间都在大约500毫秒或更短的时间内。这证实了我们在开始时的假设：WebAssembly为我们提供了可预测的性能。无论我们选择哪种语言，浏览器和语言之间的差异都很小。确切地说：JavaScript的跨浏览器标准偏差约为400毫秒，而WebAssembly模块的跨浏览器标准偏差约为80毫秒。

工作量

另一个度量指标是创建WebAssembly模块并将其集成到squoosh的工作量。我们很难使用准确的数值来表示工作量，所以我不会创建任何图表，不过我想指出一些东西：

AssemblyScript不仅让我们可以使用TypeScript来编写WebAssembly，进行代码评审也非常容易，而且还可以生成非常小且具有良好性能的无胶水WebAssembly模块。

Rust与wasm-pack结合使用也非常方便，但在大型的WebAssembly项目（需要用到绑定和内存管理）中表现更好。我们必须付出额外的工作量才能获得有竞争力的文件大小。

C语言和Emscripten可以生成非常小巧且高性能的WebAssembly模块，但是如果没有勇气直接使用胶水代码并将其缩减到最基本的需求，那么总体大小（WebAssembly模块+胶水代码）就会变得非常大。

结论

那么，如果你有一个JS热路径并希望让它运行得更快或更者像WebAssembly那样保持稳定的性能，你应该使用什么语言？答案是：取决于具体情况。那么我们发布的是哪个？

在比较了不同语言的模块大小/性能权衡之后，我们发现最好的选择似乎是C语言或AssemblyScript。但我们最后决定发布Rust版本。我们做出这个决定基于多个原因：到目前为止，squoosh的所有codec都是使用Emscripten编译的。我们希望能够扩展我们对WebAssembly生态系统的了解，并在生产环境中使用不同的语言。AssemblyScript是一个很好的选择，但它相对年轻，编译器不像Rust编译器那样成熟。

虽然Rust和其他语言大小之间的文件大小差异在散点图中看起来非常明显，但在现实中的差异并没有那么大：即使是在2G网络上加载500B或1.6KB也只需要不到1/10秒。而且Rust很快就会在模块尺寸方面缩小差距。

在运行时性能方面，Rust在浏览器中的平均速度比AssemblyScript快。特别是在大型项目中，Rust更有可能在无需手动优化的情况下生成更快的代码。

AssemblyScript允许Web开发人员在无需学习新语言的情况下生成WebAssembly模块。AssemblyScript团队在非常积极地改进他们的工具链。我们会持续关注AssemblyScript。

英文原文：https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

创作场景

如何使用 WebAssembly 提升性能