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

各位观众，欢迎来到今天的“WebAssembly SIMD并行计算优化”讲座！我是你们的老朋友，今天咱们一起聊聊怎么用WebAssembly的SIMD指令集，让网页上的计算跑得飞起来。

开场白：从单车道到高速公路

想象一下，咱们要搬一堆砖头。传统的搬法，一次只能搬一块，搬100块砖就要搬100次。这就是传统的标量计算，一次处理一个数据。现在，有了SIMD，咱们直接开来一辆卡车，一次能拉几十块砖，效率瞬间提升几个档次！

SIMD，全称Single Instruction Multiple Data，翻译过来就是“单指令多数据”。简单来说，就是一条指令可以同时处理多个数据，让我们的CPU不再“单线程工作”，而是“多线程并行”。

第一部分：WebAssembly与SIMD的基情碰撞

WebAssembly（简称Wasm），是一种可以在现代Web浏览器中运行的新型代码。它具有高性能、高安全性、体积小等优点，已经成为Web应用优化的利器。

SIMD指令集，是CPU提供的一种并行计算能力。它允许我们同时对多个数据执行相同的操作，从而提高计算效率。

WebAssembly和SIMD的结合，就像是给Web应用装上了涡轮增压发动机，让它们在浏览器中也能跑出媲美原生应用的速度。

1.1 WebAssembly的优势

• 高性能: Wasm是一种编译型语言，代码在浏览器中直接运行，避免了JavaScript解释执行的开销。
• 安全性: Wasm运行在沙箱环境中，无法直接访问宿主系统资源，保证了Web应用的安全性。
• 可移植性: Wasm可以在不同的硬件平台和操作系统上运行，具有良好的可移植性。
• 体积小: Wasm代码通常比JavaScript代码更小，可以减少Web应用的加载时间。

1.2 SIMD指令集简介

SIMD指令集，允许CPU同时对多个数据执行相同的操作。不同的CPU架构提供了不同的SIMD指令集，例如：

• x86: SSE、AVX、AVX2、AVX-512
• ARM: NEON

WebAssembly SIMD提供了一组通用的SIMD指令，可以在不同的CPU架构上运行。

1.3 WebAssembly SIMD的类型

WebAssembly SIMD支持以下几种数据类型：

类型	描述
v128	128位向量，可以存储多种数据
i8x16	16个8位整数
i16x8	8个16位整数
i32x4	4个32位整数
i64x2	2个64位整数
f32x4	4个32位浮点数
f64x2	2个64位浮点数

第二部分：SIMD实战：代码说话

光说不练假把式，接下来我们通过一些实际的代码示例，来演示如何使用WebAssembly SIMD进行并行计算优化。

2.1 向量加法

假设我们要对两个数组进行向量加法：

function vectorAdd(a, b, result) {
  for (let i = 0; i < a.length; i++) {
    result[i] = a[i] + b[i];
  }
}

使用WebAssembly SIMD，我们可以将这个操作并行化。下面是一个使用C++编写的Wasm模块，实现了向量加法：

#include <wasm_simd128.h>

extern "C" {

void vector_add(float *a, float *b, float *result, int len) {
  for (int i = 0; i < len; i += 4) {
    v128_t va = wasm_v128_load(&a[i]);
    v128_t vb = wasm_v128_load(&b[i]);
    v128_t vr = wasm_f32x4_add(va, vb);
    wasm_v128_store(&result[i], vr);
  }
}

}

这段代码的关键在于wasm_v128_load、wasm_f32x4_add和wasm_v128_store这几个SIMD指令。

• wasm_v128_load：将4个32位浮点数加载到v128向量中。
• wasm_f32x4_add：对两个v128向量进行加法运算。
• wasm_v128_store：将v128向量存储到内存中。

使用Emscripten将这段C++代码编译成WebAssembly模块：

emcc vector_add.cpp -o vector_add.wasm -s WASM=1 -s SIMD=1 -s "EXPORTED_FUNCTIONS=['_vector_add']"

然后在JavaScript中加载并调用这个Wasm模块：

async function loadWasm() {
  const response = await fetch('vector_add.wasm');
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);
  const instance = await WebAssembly.instantiate(module, {});

  const { _vector_add } = instance.exports;

  return _vector_add;
}

async function runVectorAdd() {
  const vectorAddWasm = await loadWasm();

  const a = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]);
  const b = new Float32Array([9, 10, 11, 12, 13, 14, 15, 16]);
  const result = new Float32Array(a.length);

  // Allocate memory for the arrays in the WASM heap
  const aPtr = Module._malloc(a.byteLength);
  const bPtr = Module._malloc(b.byteLength);
  const resultPtr = Module._malloc(result.byteLength);

  // Copy the data to the WASM heap
  Module.HEAPF32.set(a, aPtr / Float32Array.BYTES_PER_ELEMENT);
  Module.HEAPF32.set(b, bPtr / Float32Array.BYTES_PER_ELEMENT);

  vectorAddWasm(aPtr, bPtr, resultPtr, a.length);

  // Copy the result from the WASM heap
  result.set(Module.HEAPF32.subarray(resultPtr / Float32Array.BYTES_PER_ELEMENT, (resultPtr / Float32Array.BYTES_PER_ELEMENT) + result.length));

  // Free the allocated memory
  Module._free(aPtr);
  Module._free(bPtr);
  Module._free(resultPtr);

  console.log('Result:', result);
}

runVectorAdd();

重要提示： Module 是 Emscripten 自动生成的 JavaScript 对象，它提供了访问 Wasm 模块的接口。我们需要确保在编译时包含了 Emscripten 的 JavaScript glue 代码。

2.2 图像处理：灰度转换

图像处理是SIMD的另一个典型应用场景。下面我们来看一个使用WebAssembly SIMD进行灰度转换的例子。

#include <wasm_simd128.h>

extern "C" {

void grayscale(unsigned char *pixels, int width, int height) {
  for (int i = 0; i < width * height * 4; i += 16) {
    // Load 4 pixels (RGBA) into a v128 vector
    v128_t rgba0 = wasm_v128_load(&pixels[i]);
    v128_t rgba1 = wasm_v128_load(&pixels[i + 4]);
    v128_t rgba2 = wasm_v128_load(&pixels[i + 8]);
    v128_t rgba3 = wasm_v128_load(&pixels[i + 12]);

    // Extract R, G, B components
    v128_t r0 = wasm_u8x16_extract_lane(rgba0, 0);
    v128_t g0 = wasm_u8x16_extract_lane(rgba0, 1);
    v128_t b0 = wasm_u8x16_extract_lane(rgba0, 2);

    v128_t r1 = wasm_u8x16_extract_lane(rgba1, 0);
    v128_t g1 = wasm_u8x16_extract_lane(rgba1, 1);
    v128_t b1 = wasm_u8x16_extract_lane(rgba1, 2);

    v128_t r2 = wasm_u8x16_extract_lane(rgba2, 0);
    v128_t g2 = wasm_u8x16_extract_lane(rgba2, 1);
    v128_t b2 = wasm_u8x16_extract_lane(rgba2, 2);

    v128_t r3 = wasm_u8x16_extract_lane(rgba3, 0);
    v128_t g3 = wasm_u8x16_extract_lane(rgba3, 1);
    v128_t b3 = wasm_u8x16_extract_lane(rgba3, 2);

    // Calculate grayscale value: 0.299 * R + 0.587 * G + 0.114 * B
    v128_t gray0 = wasm_i32x4_trunc_sat_f32x4(wasm_f32x4_add(wasm_f32x4_add(wasm_f32x4_mul(wasm_f32x4_convert_i32x4(r0), wasm_f32x4_splat(0.299)), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(g0), wasm_f32x4_splat(0.587))), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(b0), wasm_f32x4_splat(0.114))));
    v128_t gray1 = wasm_i32x4_trunc_sat_f32x4(wasm_f32x4_add(wasm_f32x4_add(wasm_f32x4_mul(wasm_f32x4_convert_i32x4(r1), wasm_f32x4_splat(0.299)), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(g1), wasm_f32x4_splat(0.587))), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(b1), wasm_f32x4_splat(0.114))));
    v128_t gray2 = wasm_i32x4_trunc_sat_f32x4(wasm_f32x4_add(wasm_f32x4_add(wasm_f32x4_mul(wasm_f32x4_convert_i32x4(r2), wasm_f32x4_splat(0.299)), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(g2), wasm_f32x4_splat(0.587))), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(b2), wasm_f32x4_splat(0.114))));
    v128_t gray3 = wasm_i32x4_trunc_sat_f32x4(wasm_f32x4_add(wasm_f32x4_add(wasm_f32x4_mul(wasm_f32x4_convert_i32x4(r3), wasm_f32x4_splat(0.299)), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(g3), wasm_f32x4_splat(0.587))), wasm_f32x4_mul(wasm_f32x4_convert_i32x4(b3), wasm_f32x4_splat(0.114))));

    // Convert back to u8
    v128_t gray_u8_0 = wasm_i8x16_splat(wasm_i32x4_extract_lane(gray0,0));
    v128_t gray_u8_1 = wasm_i8x16_splat(wasm_i32x4_extract_lane(gray1,0));
    v128_t gray_u8_2 = wasm_i8x16_splat(wasm_i32x4_extract_lane(gray2,0));
    v128_t gray_u8_3 = wasm_i8x16_splat(wasm_i32x4_extract_lane(gray3,0));

    // Store the grayscale values back to the pixel array
    pixels[i] = wasm_i8x16_extract_lane(gray_u8_0,0);
    pixels[i+1] = wasm_i8x16_extract_lane(gray_u8_0,0);
    pixels[i+2] = wasm_i8x16_extract_lane(gray_u8_0,0);
    pixels[i+4] = wasm_i8x16_extract_lane(gray_u8_1,0);
    pixels[i+5] = wasm_i8x16_extract_lane(gray_u8_1,0);
    pixels[i+6] = wasm_i8x16_extract_lane(gray_u8_1,0);
    pixels[i+8] = wasm_i8x16_extract_lane(gray_u8_2,0);
    pixels[i+9] = wasm_i8x16_extract_lane(gray_u8_2,0);
    pixels[i+10] = wasm_i8x16_extract_lane(gray_u8_2,0);
    pixels[i+12] = wasm_i8x16_extract_lane(gray_u8_3,0);
    pixels[i+13] = wasm_i8x16_extract_lane(gray_u8_3,0);
    pixels[i+14] = wasm_i8x16_extract_lane(gray_u8_3,0);
  }
}

}

编译：

emcc grayscale.cpp -o grayscale.wasm -s WASM=1 -s SIMD=1 -s "EXPORTED_FUNCTIONS=['_grayscale']"

JavaScript代码：

async function loadWasm() {
    const response = await fetch('grayscale.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.compile(buffer);
    const instance = await WebAssembly.instantiate(module, {});

    const { _grayscale } = instance.exports;

    return _grayscale;
}

async function runGrayscale() {
    const grayscaleWasm = await loadWasm();

    const img = new Image();
    img.src = 'your_image.jpg'; // 替换为你的图片
    img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        const imageData = ctx.getImageData(0, 0, img.width, img.height);
        const pixels = imageData.data;

        // Allocate memory for the pixel array in the WASM heap
        const pixelsPtr = Module._malloc(pixels.byteLength);

        // Copy the data to the WASM heap
        Module.HEAPU8.set(pixels, pixelsPtr);

        // Call the grayscale function
        grayscaleWasm(pixelsPtr, img.width, img.height);

        // Copy the result from the WASM heap
        const grayPixels = new Uint8ClampedArray(Module.HEAPU8.subarray(pixelsPtr, pixelsPtr + pixels.byteLength));

        // Update the image data
        imageData.data.set(grayPixels);
        ctx.putImageData(imageData, 0, 0);

        // Free the allocated memory
        Module._free(pixelsPtr);

        document.body.appendChild(canvas);
    };
}

runGrayscale();

注意: 你需要将 your_image.jpg 替换为你自己的图片路径，并且确保你的图片可以正确加载。

2.3 性能对比：JavaScript vs WebAssembly SIMD

为了更直观地了解WebAssembly SIMD的性能优势，我们做一个简单的性能对比测试。分别使用JavaScript和WebAssembly SIMD实现相同的计算任务，然后测量它们的执行时间。

假设我们要做一个简单的数组求和：

JavaScript实现:

function sumArray(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

WebAssembly SIMD实现:

#include <wasm_simd128.h>

extern "C" {

float sum_array(float *arr, int len) {
  v128_t sum_vec = wasm_f32x4_const(0, 0, 0, 0);
  float sum = 0.0f;

  for (int i = 0; i < len; i += 4) {
    v128_t vec = wasm_v128_load(&arr[i]);
    sum_vec = wasm_f32x4_add(sum_vec, vec);
  }

  // Horizontally add the elements of the vector
  sum += wasm_f32x4_extract_lane(sum_vec, 0);
  sum += wasm_f32x4_extract_lane(sum_vec, 1);
  sum += wasm_f32x4_extract_lane(sum_vec, 2);
  sum += wasm_f32x4_extract_lane(sum_vec, 3);

  return sum;
}

}

编译：

emcc sum_array.cpp -o sum_array.wasm -s WASM=1 -s SIMD=1 -s "EXPORTED_FUNCTIONS=['_sum_array']"

JavaScript调用:

async function loadWasm() {
    const response = await fetch('sum_array.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.compile(buffer);
    const instance = await WebAssembly.instantiate(module, {});

    const { _sum_array } = instance.exports;

    return _sum_array;
}

async function runSumArray() {
    const sumArrayWasm = await loadWasm();
    const arraySize = 1000000;
    const arr = new Float32Array(arraySize);
    for (let i = 0; i < arraySize; i++) {
        arr[i] = Math.random();
    }

    // JavaScript implementation
    const startTimeJS = performance.now();
    const sumJS = sumArray(arr);
    const endTimeJS = performance.now();
    const timeJS = endTimeJS - startTimeJS;

    console.log("JavaScript Sum:", sumJS);
    console.log("JavaScript Time:", timeJS, "ms");

    // Allocate memory for the array in the WASM heap
    const arrPtr = Module._malloc(arr.byteLength);

    // Copy the data to the WASM heap
    Module.HEAPF32.set(arr, arrPtr / Float32Array.BYTES_PER_ELEMENT);

    // WebAssembly implementation
    const startTimeWasm = performance.now();
    const sumWasm = sumArrayWasm(arrPtr, arr.length);
    const endTimeWasm = performance.now();
    const timeWasm = endTimeWasm - startTimeWasm;

    console.log("WebAssembly Sum:", sumWasm);
    console.log("WebAssembly Time:", timeWasm, "ms");

    // Free the allocated memory
    Module._free(arrPtr);

    console.log("Speedup:", timeJS / timeWasm);
}

runSumArray();

测试结果表明，WebAssembly SIMD的性能通常比JavaScript快几倍甚至几十倍。

第三部分：SIMD的坑与技巧

虽然SIMD很强大，但也不是万能的。在使用SIMD的过程中，我们可能会遇到一些坑。

3.1 数据对齐

SIMD指令通常要求数据在内存中对齐。例如，如果我们要加载一个v128向量，那么数据的起始地址必须是16字节的倍数。如果数据没有对齐，可能会导致程序崩溃或者性能下降。

3.2 控制流

SIMD指令擅长处理数据并行的计算，但是对于控制流复杂的代码，SIMD的优势可能不明显。

3.3 兼容性

虽然WebAssembly SIMD提供了通用的SIMD指令，但是不同的CPU架构的SIMD指令集还是存在差异。我们需要根据实际情况选择合适的SIMD指令。

3.4 优化技巧

• 尽量使用SIMD指令替换循环: 循环是性能瓶颈的常见原因。使用SIMD指令可以减少循环的迭代次数，从而提高性能。
• 合理选择数据类型: 不同的数据类型对SIMD的性能有影响。选择合适的数据类型可以提高SIMD的效率。
• 避免数据类型转换: 数据类型转换会增加计算开销。尽量避免不必要的数据类型转换。
• 使用编译器优化: 编译器可以自动优化SIMD代码，提高性能。

第四部分：总结与展望

WebAssembly SIMD是一种强大的并行计算技术，可以显著提高Web应用的性能。虽然SIMD的使用有一定的门槛，但是只要掌握了基本原理和技巧，就可以充分发挥SIMD的优势。

随着WebAssembly和SIMD技术的不断发展，相信未来Web应用的性能会越来越接近原生应用。

结语：别忘了点赞！

今天的讲座就到这里，希望大家有所收获。如果觉得有用，别忘了点赞、收藏、转发！下次有机会，我们再聊聊WebAssembly的其他高级特性。 谢谢大家！