JS WebAssembly (Wasm) `SIMD` (Single Instruction Multiple Data) 优化：并行计算

各位听众，早上好！今天我们来聊聊一个让人兴奋的话题：WebAssembly (Wasm) 的 SIMD 优化，以及它如何让你的 Web 应用跑得更快，就像猎豹吃了兴奋剂一样！

开场白：为什么我们需要 SIMD？

想象一下，你要处理一大堆数字，比如说图像处理中的像素点，或者物理引擎中的粒子坐标。传统的做法，是一个一个地处理这些数字。就像你在厨房里，一个一个地切土豆丝，效率低下。

SIMD，全称 Single Instruction Multiple Data，简单来说，就是“一条指令，处理多个数据”。 这就像你突然拥有了一个多功能切菜机，一次可以切好几个土豆丝，效率瞬间提升！

在 WebAssembly 的世界里，SIMD 为我们提供了一种在浏览器中进行并行计算的能力，让我们可以更高效地处理这些密集型计算任务。

第一部分：WebAssembly SIMD 基础

首先，我们要了解一些 WebAssembly SIMD 的基本概念。

1. 向量类型（Vector Types）：

WebAssembly SIMD 引入了向量类型，它可以同时存储多个数值。常见的向量类型包括：

• v128: 128位的向量，可以存储 4个32位浮点数（f32x4），或者 4个32位整数（i32x4），或者 8个16位整数（i16x8），或者 16个8位整数（i8x16）。

2. SIMD 指令：

WebAssembly 提供了一系列 SIMD 指令，用于对向量进行操作。这些指令可以同时对向量中的所有元素执行相同的操作。例如：

• f32x4.add: 将两个 f32x4 向量相加。
• i32x4.mul: 将两个 i32x4 向量相乘。
• f32x4.neg: 对 f32x4 向量中的每个元素取负。
• f32x4.extract_lane: 从 f32x4 向量中提取指定位置的元素。
• f32x4.replace_lane: 替换 f32x4 向量中指定位置的元素。
• v128.load: 从内存加载一个 v128 向量。
• v128.store: 将一个 v128 向量存储到内存。
• v128.and: 对两个 v128 向量进行按位与操作。

3. 启用 SIMD 支持：

为了使用 WebAssembly SIMD，需要在编译 WebAssembly 模块时启用 SIMD 支持。不同的编译器可能有不同的选项。例如，在使用 Emscripten 时，可以添加 -msimd128 标志。

第二部分：SIMD 实战：图像处理

让我们通过一个简单的图像处理示例来演示 SIMD 的威力。 假设我们要将一张图片的每个像素点的红色通道值增加 10。

1. C 代码（不使用 SIMD）：

void add_red_channel(unsigned char *image, int width, int height) {
  for (int i = 0; i < width * height * 4; i += 4) {
    image[i] += 10; // 红色通道
  }
}

这段代码遍历图像的每个像素，并将红色通道的值增加 10。 这是一个很基础的实现方式，没有使用任何 SIMD 指令。

2. C 代码（使用 SIMD）：

#include <wasm_simd128.h>

void add_red_channel_simd(unsigned char *image, int width, int height) {
    int num_pixels = width * height;
    // 使用 v128 类型，每次处理 4 个像素
    for (int i = 0; i < num_pixels; i += 4) {
        // 加载 4 个像素的红色通道值到 v128 向量
        v128_t pixels = wasm_v128_load(&image[i * 4]);

        // 创建一个包含 4 个 10 的 v128 向量
        v128_t increment = wasm_i8x16_splat(10);

        // 将两个向量相加
        v128_t result = wasm_i8x16_add(pixels, increment);

        // 将结果存储回图像
        wasm_v128_store(&image[i * 4], result);
    }
}

这段代码使用 WebAssembly SIMD 指令来一次处理 4 个像素的红色通道。

• wasm_v128_load: 从内存加载 16 个字节的数据到 v128_t 类型的向量中。由于每个像素占用 4 个字节（RGBA），所以 16 个字节代表 4 个像素。
• wasm_i8x16_splat: 创建一个包含 16 个相同值的 v128_t 向量。这里我们创建一个包含 16 个 10 的向量，以便一次性将 4 个像素的红色通道值增加 10。
• wasm_i8x16_add: 将两个 v128_t 向量相加。
• wasm_v128_store: 将 v128_t 向量中的数据存储回内存。

3. 编译：

使用 Emscripten 编译这些代码：

emcc add_red_channel.c -o add_red_channel.js -s WASM=1 -s MODULARIZE=1 -s 'EXPORT_NAME="add_red_channel"'
emcc add_red_channel_simd.c -o add_red_channel_simd.js -s WASM=1 -s MODULARIZE=1 -s 'EXPORT_NAME="add_red_channel_simd"' -msimd128

注意：

• -msimd128 标志用于启用 SIMD 支持。

4. JavaScript 代码：

// 加载 wasm 模块
async function loadWasm(moduleName) {
  const response = await fetch(moduleName + ".wasm");
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);
  const instance = await WebAssembly.instantiate(module);
  return instance.exports;
}

async function main() {
  const nonSimdModule = await loadWasm("add_red_channel");
  const simdModule = await loadWasm("add_red_channel_simd");

  // 创建一个图像数据
  const width = 256;
  const height = 256;
  const imageData = new Uint8ClampedArray(width * height * 4);
  for (let i = 0; i < imageData.length; i++) {
    imageData[i] = Math.floor(Math.random() * 256); // 随机颜色
  }

  // 创建一个图像数据副本，用于对比
  const imageDataSimd = new Uint8ClampedArray(imageData);

  // 获取函数
  const add_red_channel = nonSimdModule.add_red_channel;
  const add_red_channel_simd = simdModule.add_red_channel_simd;

  // 获取 wasm 内存
  const memory = nonSimdModule.memory || simdModule.memory; // 获取哪个模块的内存都可以

  // 将图像数据复制到 wasm 内存
  const imagePtr = nonSimdModule._malloc(imageData.length) || simdModule._malloc(imageDataSimd.length);
  const imageArray = new Uint8ClampedArray(memory.buffer, imagePtr, imageData.length);
  imageArray.set(imageData);

  const imagePtrSimd = imagePtr; // 使用相同的内存地址

  // 运行不使用 SIMD 的函数
  console.time("Non-SIMD");
  add_red_channel(imagePtr, width, height);
  console.timeEnd("Non-SIMD");

  // 运行使用 SIMD 的函数
  console.time("SIMD");
  add_red_channel_simd(imagePtrSimd, width, height);
  console.timeEnd("SIMD");

  // 从 wasm 内存中读取修改后的图像数据
  const modifiedImageData = new Uint8ClampedArray(memory.buffer, imagePtr, imageData.length);
  const modifiedImageDataSimd = new Uint8ClampedArray(memory.buffer, imagePtrSimd, imageDataSimd.length);

  // 释放 wasm 内存
  nonSimdModule._free(imagePtr) || simdModule._free(imagePtrSimd);

  // 可视化结果 (可选)
  // 创建 canvas 元素并将图像数据绘制到 canvas 上
  // ...
}

main();

这段 JavaScript 代码加载编译后的 WebAssembly 模块，创建图像数据，并分别使用不使用 SIMD 和使用 SIMD 的函数来处理图像。最后，它测量并打印出两种方法的执行时间。

第三部分：SIMD 的优势与局限性

• 优势：

  • 性能提升： SIMD 可以显著提高并行计算的性能，特别是在处理大型数据集时。
  • 更高效的资源利用： SIMD 可以更有效地利用 CPU 的计算资源。

• 局限性：

  • 并非所有算法都适合 SIMD： SIMD 只能用于可以并行化的算法。
  • 需要特殊的编程技巧： 使用 SIMD 需要了解 SIMD 指令集，并进行相应的代码优化。
  • 数据对齐： SIMD 指令通常要求数据在内存中对齐。

第四部分：其他应用场景

除了图像处理，SIMD 还可以应用于许多其他领域，例如：

• 音频处理： 音频编解码、音频特效等。
• 视频处理： 视频编解码、视频滤镜等。
• 物理引擎： 碰撞检测、粒子模拟等。
• 机器学习： 向量运算、矩阵运算等。
• 密码学： 加密解密算法等。

应用领域	示例	SIMD 优势
图像处理	图像滤镜、颜色空间转换、图像缩放等	并行处理像素数据，提高处理速度
音频处理	音频编解码、音频特效、音频分析等	并行处理音频样本数据，提高处理速度
视频处理	视频编解码、视频滤镜、视频分析等	并行处理视频帧数据，提高处理速度
物理引擎	碰撞检测、粒子模拟、刚体动力学等	并行处理物理实体的数据，提高模拟速度
机器学习	向量运算、矩阵运算、神经网络计算等	并行处理数据，加速训练和推理过程
密码学	加密解密算法、哈希函数等	并行处理数据，提高加密解密速度

第五部分：优化技巧

1. 数据对齐： 确保数据在内存中对齐，以便 SIMD 指令可以高效地访问数据。 许多编译器提供数据对齐的指令，例如 alignas。

2. 循环展开： 展开循环可以减少循环开销，并提高 SIMD 指令的利用率。

3. 避免分支： 分支语句会降低 SIMD 的效率，因为 SIMD 指令通常需要对所有元素执行相同的操作。 尽量使用向量化的条件操作来避免分支。

4. 使用编译器优化： 启用编译器的 SIMD 优化选项，例如 -ftree-vectorize。

第六部分：未来展望

WebAssembly SIMD 还在不断发展中。 随着浏览器的不断更新和 WebAssembly 标准的不断完善，我们可以期待 SIMD 在 Web 应用程序中发挥更大的作用。 未来，我们可以期待更多的 SIMD 指令、更强大的优化工具，以及更广泛的应用场景。

总结：

WebAssembly SIMD 是一项强大的技术，可以显著提高 Web 应用程序的性能。虽然使用 SIMD 需要一定的编程技巧，但它带来的性能提升是值得的。 掌握 SIMD 技术，可以让你在 Web 开发领域更具竞争力。

结束语：

希望今天的讲座能帮助大家了解 WebAssembly SIMD，并在实际项目中应用它。 记住，大胆尝试，勇于探索，你也可以成为 WebAssembly SIMD 的专家！

感谢大家的收听！有什么问题吗？

---

附录：示例代码（向量加法）

为了更深入地理解 SIMD，我们来看一个简单的向量加法的例子。

C 代码 (SIMD):

#include <stdio.h>
#include <wasm_simd128.h>

void vector_add(float *a, float *b, float *result, int size) {
  for (int i = 0; i < size; i += 4) {
    // 加载 4 个 float 到 v128
    v128_t va = wasm_v128_load(&a[i]);
    v128_t vb = wasm_v128_load(&b[i]);

    // 向量加法
    v128_t vresult = wasm_f32x4_add(va, vb);

    // 存储结果
    wasm_v128_store(&result[i], vresult);
  }
}

int main() {
  float a[8] = {1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0};
  float b[8] = {9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0};
  float result[8];

  vector_add(a, b, result, 8);

  for (int i = 0; i < 8; i++) {
    printf("result[%d] = %fn", i, result[i]);
  }

  return 0;
}

这段代码演示了如何使用 SIMD 指令进行向量加法。 它一次处理 4 个浮点数，从而提高了计算效率。

编译：

emcc vector_add.c -o vector_add.js -s WASM=1 -s MODULARIZE=1 -s 'EXPORT_NAME="vector_add"' -msimd128

这个例子可以帮助你更好地理解 SIMD 指令的使用方法，并为你在实际项目中应用 SIMD 打下基础。