JS `WebAssembly` `SIMD` `Intrinsics`：手动优化 Wasm 代码的并行计算

各位朋友，大家好！今天咱们来聊点刺激的：WebAssembly、SIMD，还有Intrinsics，这三个家伙凑一块儿，能让你手搓Wasm代码，玩转并行计算，把性能榨干到最后一滴！

Wasm：编译的乐高积木

首先，简单回顾一下WebAssembly。你可以把它想象成一套二进制格式的乐高积木，各种编程语言（C/C++、Rust、甚至TypeScript）都能把自己的代码编译成这种积木。浏览器或者Node.js这样的环境，可以直接读取这些积木，然后咔咔咔拼起来运行，速度比JavaScript快得多。

Wasm最大的好处在于它的可移植性和性能。一套Wasm代码，几乎可以在任何支持Wasm的平台上跑起来，而且运行速度接近原生代码。

SIMD：数据并行的大杀器

接下来，重头戏来了：SIMD，全称Single Instruction, Multiple Data（单指令多数据）。这玩意儿是并行计算的利器。

想象一下，你要把一个数组里的每个数字都加上5。如果不用SIMD，你得一个一个地加，就像这样：

// JavaScript (串行)
function addFive(arr) {
  for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i] + 5;
  }
  return arr;
}

如果用了SIMD，你就可以一次性把好几个数字一起加5，就像一辆装载了多个数据的卡车，一次运输多个包裹。

// C++ (使用SIMD)
#include <iostream>
#include <vector>
#include <immintrin.h> // AVX intrinsics

void addFiveSIMD(std::vector<float>& arr) {
    int size = arr.size();
    int i = 0;

    // 处理能够被 8 整除的部分（AVX，一次处理 8 个 float）
    for (; i + 7 < size; i += 8) {
        __m256 vec = _mm256_loadu_ps(&arr[i]); // 加载 8 个 float 到 AVX 寄存器
        __m256 fiveVec = _mm256_set1_ps(5.0f);   // 创建一个包含 8 个 5.0f 的向量
        vec = _mm256_add_ps(vec, fiveVec);     // 将两个向量相加
        _mm256_storeu_ps(&arr[i], vec);         // 将结果存储回数组
    }

    // 处理剩余的部分（串行）
    for (; i < size; ++i) {
        arr[i] += 5.0f;
    }
}

int main() {
    std::vector<float> data = {1.0f, 2.0f, 3.0f, 4.0f, 5.0f, 6.0f, 7.0f, 8.0f, 9.0f, 10.0f};
    addFiveSIMD(data);

    std::cout << "Result: ";
    for (float val : data) {
        std::cout << val << " ";
    }
    std::cout << std::endl;

    return 0;
}

上面的C++代码使用了AVX指令集，一次性处理8个浮点数。 Wasm SIMD就是借鉴了这个思路。

Intrinsics：与硬件对话的秘语

Intrinsics，翻译过来就是“内在函数”，或者“内置函数”。它们是编译器提供的一组特殊的函数，可以直接映射到特定的硬件指令上。你可以把它们想象成一种与硬件对话的“秘语”。

使用Intrinsics，你可以直接控制CPU的各种功能，比如SIMD指令。这样，你就可以写出高度优化的代码，充分利用硬件的并行计算能力。

Wasm SIMD：三剑合璧

现在，把这三个家伙放在一起：Wasm SIMD是指在Wasm中使用SIMD指令来加速计算。你可以通过Intrinsics或者高级语言的SIMD库来使用Wasm SIMD。

Wasm SIMD 的优势：

性能提升： 并行处理数据，显著提高计算密集型任务的速度。
跨平台： Wasm 的跨平台特性意味着你的 SIMD 代码可以在各种支持 Wasm 的平台上运行。
Web 应用加速： 特别适合在 Web 浏览器中运行的图形处理、物理模拟、音频/视频处理等应用。

实战演练：手搓 Wasm SIMD 代码

接下来，我们来写一些实际的Wasm SIMD代码。我们以C++ 为例，先来一个简单的向量加法。

1. 准备工作：

确保你的编译器支持 Wasm 和 SIMD。 Emscripten 是一个不错的选择。
安装 Emscripten: 参考 Emscripten 官网 (emscripten.org) 的安装指南。

2. C++ 代码 (vector_add.cpp):

#include <stdio.h>
#include <wasm_simd128.h> // Wasm SIMD header

extern "C" {

// 向量加法函数
void vector_add(float *a, float *b, float *result, int size) {
  int i = 0;

  // 使用 SIMD 处理 128 位 (4 个 float) 的倍数
  for (; i + 3 < size; i += 4) {
    v128_t va = wasm_v128_load(&a[i]);   // 从 a 加载 4 个 float
    v128_t vb = wasm_v128_load(&b[i]);   // 从 b 加载 4 个 float
    v128_t vresult = wasm_f32x4_add(va, vb); // SIMD 加法
    wasm_v128_store(&result[i], vresult); // 存储结果
  }

  // 处理剩余的元素 (如果 size 不是 4 的倍数)
  for (; i < size; ++i) {
    result[i] = a[i] + b[i];
  }
}

}

代码解释：

#include <wasm_simd128.h>: 引入 Wasm SIMD 头文件，提供了 SIMD Intrinsics。
wasm_v128_load(): 从内存中加载 128 位数据到 SIMD 向量。
wasm_f32x4_add(): 执行 4 个浮点数的 SIMD 加法。
wasm_v128_store(): 将 SIMD 向量存储到内存中。

3. 编译成 Wasm:

使用 Emscripten 编译 C++ 代码：

emcc vector_add.cpp -o vector_add.js -s WASM=1 -s "EXPORTED_FUNCTIONS=['_vector_add']" -s "EXPORTED_RUNTIME_METHODS=['ccall']" -O3 -msimd128

编译选项解释：

-o vector_add.js: 指定输出文件名为 vector_add.js 和 vector_add.wasm。
-s WASM=1: 告诉 Emscripten 生成 Wasm 代码。
-s "EXPORTED_FUNCTIONS=['_vector_add']": 导出 vector_add 函数，使其可以在 JavaScript 中调用。注意：C++函数名会被加一个下划线前缀。
-s "EXPORTED_RUNTIME_METHODS=['ccall']": 导出 ccall 函数，方便从 JavaScript 调用 C++ 函数。
-O3: 启用最高级别的优化。
-msimd128: 启用 SIMD128 指令集。

4. JavaScript 代码 (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Wasm SIMD Vector Add</title>
</head>
<body>
  <script>
    // 加载 Wasm 模块
    Module.onRuntimeInitialized = () => {
      const vector_add = Module.cwrap('vector_add', null, ['number', 'number', 'number', 'number']);

      // 创建输入和输出数组
      const size = 1024;
      const a = new Float32Array(size);
      const b = new Float32Array(size);
      const result = new Float32Array(size);

      // 初始化数组 (可以填充随机数据)
      for (let i = 0; i < size; ++i) {
        a[i] = i;
        b[i] = i * 2;
      }

      // 获取数组的指针
      const aPtr = Module._malloc(a.byteLength);
      const bPtr = Module._malloc(b.byteLength);
      const resultPtr = Module._malloc(result.byteLength);

      // 将数组复制到 Wasm 内存
      Module.HEAPF32.set(a, aPtr / Float32Array.BYTES_PER_ELEMENT);
      Module.HEAPF32.set(b, bPtr / Float32Array.BYTES_PER_ELEMENT);

      // 调用 Wasm 函数
      const startTime = performance.now();
      vector_add(aPtr, bPtr, resultPtr, size);
      const endTime = performance.now();

      // 从 Wasm 内存复制结果
      const resultView = new Float32Array(Module.HEAPF32.buffer, resultPtr, size);
      result.set(resultView);

      // 打印结果 (可以选择只打印一部分)
      console.log("Result:", result.slice(0, 10));
      console.log("Time taken:", endTime - startTime, "ms");

      // 释放内存
      Module._free(aPtr);
      Module._free(bPtr);
      Module._free(resultPtr);
    };
  </script>
  <script src="vector_add.js"></script>
</body>
</html>

JavaScript 代码解释：

Module.onRuntimeInitialized: 确保 Wasm 模块加载完成后再执行代码。
Module.cwrap: 创建一个 JavaScript 函数，用于调用 Wasm 函数。
Module._malloc: 在 Wasm 内存中分配空间。
Module.HEAPF32: 访问 Wasm 内存的 Float32Array 视图。
Module._free: 释放 Wasm 内存。

5. 运行：

在浏览器中打开 index.html。你应该能在控制台中看到结果和运行时间。

性能对比：SIMD vs. Non-SIMD

为了更直观地看到SIMD带来的性能提升，我们可以编写一个不使用SIMD的C++版本，然后在JavaScript中进行对比。

Non-SIMD C++ 代码 (vector_add_non_simd.cpp):

#include <stdio.h>

extern "C" {

void vector_add_non_simd(float *a, float *b, float *result, int size) {
  for (int i = 0; i < size; ++i) {
    result[i] = a[i] + b[i];
  }
}

}

编译成 Wasm (不带 SIMD 标志):

emcc vector_add_non_simd.cpp -o vector_add_non_simd.js -s WASM=1 -s "EXPORTED_FUNCTIONS=['_vector_add_non_simd']" -s "EXPORTED_RUNTIME_METHODS=['ccall']" -O3

修改 JavaScript 代码 (index.html) 进行对比：

<!DOCTYPE html>
<html>
<head>
  <title>Wasm SIMD vs Non-SIMD</title>
</head>
<body>
  <script>
    Module.onRuntimeInitialized = () => {
      const vector_add = Module.cwrap('vector_add', null, ['number', 'number', 'number', 'number']);
      const vector_add_non_simd = Module.cwrap('vector_add_non_simd', null, ['number', 'number', 'number', 'number']);

      const size = 1024*1024; // 增加数据量，让性能差异更明显
      const a = new Float32Array(size);
      const b = new Float32Array(size);
      const resultSimd = new Float32Array(size);
      const resultNonSimd = new Float32Array(size);

      for (let i = 0; i < size; ++i) {
        a[i] = i;
        b[i] = i * 2;
      }

      const aPtr = Module._malloc(a.byteLength);
      const bPtr = Module._malloc(b.byteLength);
      const resultSimdPtr = Module._malloc(resultSimd.byteLength);
      const resultNonSimdPtr = Module._malloc(resultNonSimd.byteLength);

      Module.HEAPF32.set(a, aPtr / Float32Array.BYTES_PER_ELEMENT);
      Module.HEAPF32.set(b, bPtr / Float32Array.BYTES_PER_ELEMENT);

      // SIMD 版本
      let startTime = performance.now();
      vector_add(aPtr, bPtr, resultSimdPtr, size);
      let endTime = performance.now();
      const simdTime = endTime - startTime;

      const resultSimdView = new Float32Array(Module.HEAPF32.buffer, resultSimdPtr, size);
      resultSimd.set(resultSimdView);

      // Non-SIMD 版本
      startTime = performance.now();
      vector_add_non_simd(aPtr, bPtr, resultNonSimdPtr, size);
      endTime = performance.now();
      const nonSimdTime = endTime - startTime;

      const resultNonSimdView = new Float32Array(Module.HEAPF32.buffer, resultNonSimdPtr, size);
      resultNonSimd.set(resultNonSimdView);

      console.log("SIMD Result (first 10):", resultSimd.slice(0, 10));
      console.log("SIMD Time:", simdTime, "ms");
      console.log("Non-SIMD Result (first 10):", resultNonSimd.slice(0, 10));
      console.log("Non-SIMD Time:", nonSimdTime, "ms");

      Module._free(aPtr);
      Module._free(bPtr);
      Module._free(resultSimdPtr);
      Module._free(resultNonSimdPtr);

       // 验证结果是否一致
       for(let i = 0; i < 10; i++) {
           if (Math.abs(resultSimd[i] - resultNonSimd[i]) > 0.0001) {
              console.error("Results differ at index ", i);
           }
       }
    };
  </script>
  <script src="vector_add.js"></script>
  <script src="vector_add_non_simd.js"></script>
</body>
</html>

运行这个修改后的 index.html，你将会看到SIMD版本和Non-SIMD版本的运行时间对比。一般来说，SIMD版本会快很多。

Wasm SIMD 进阶：更复杂的操作

除了简单的向量加法，Wasm SIMD 还可以用于实现更复杂的操作，比如：

矩阵乘法： 图形渲染、物理模拟中常见的操作。
图像处理： 图像滤波、颜色空间转换等。
音频处理： 音频编解码、音频特效等。

Wasm SIMD 的注意事项：

并非所有操作都适合 SIMD： SIMD 最适合处理大量同类型的数据，并且操作是相同的。
数据对齐： 为了获得最佳性能，SIMD 操作通常需要数据对齐。
代码可读性： SIMD 代码通常比非 SIMD 代码更复杂，需要仔细编写和测试。
浏览器支持： 并非所有浏览器都完全支持 Wasm SIMD。在部署前需要进行测试。

Wasm SIMD 的未来

Wasm SIMD 还在不断发展中。随着浏览器的支持越来越完善，以及更多高级语言提供更好的SIMD支持，Wasm SIMD 将会在Web开发中扮演越来越重要的角色。

表格总结：Wasm SIMD 相关概念

概念	解释	示例
WebAssembly	一种二进制指令集，用于高性能的 Web 应用。	使用 C/C++ 或 Rust 编写代码，编译成 Wasm。
SIMD	单指令多数据，一种并行计算技术，一次性处理多个数据。	对一个数组的多个元素同时进行加法运算。
Intrinsics	编译器提供的特殊函数，可以直接映射到硬件指令。	`wasm_f32x4_add` (Wasm SIMD Intrinsics)
Emscripten	一个工具链，可以将 C/C++ 代码编译成 WebAssembly。	`emcc vector_add.cpp -o vector_add.js -s WASM=1 -msimd128`
`v128_t`	Wasm SIMD 中表示 128 位向量的数据类型。	`v128_t va = wasm_v128_load(&a[i]);`

最后的话

Wasm SIMD 是一项强大的技术，可以显著提高 Web 应用的性能。虽然学习曲线可能有点陡峭，但掌握它绝对能让你在性能优化方面更上一层楼。希望今天的讲解能帮助你打开 Wasm SIMD 的大门，开始你的并行计算之旅！记住，实践是检验真理的唯一标准，动手写代码才是王道！

大家有什么问题，欢迎提问！

发表回复 取消回复

发表回复取消回复