JavaScript内核与高级编程之：`JavaScript`的`WebAssembly`集成：`Wasm`与`JS`的性能交互。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！今天咱们聊点刺激的——JavaScript的WebAssembly集成：Wasm与JS的性能交互。放心，不会让你觉得枯燥，我会尽量用大白话把这事儿给掰扯清楚。

开场白：为啥要搞WebAssembly？

想当年，JavaScript一统天下，浏览器端那是它的地盘。但是呢，JS有个软肋，就是性能。有些计算密集型的任务，比如图像处理、3D游戏，用JS跑起来就有点力不从心。咋办呢？WebAssembly就应运而生了。

你可以把WebAssembly理解成一种“编译目标”，而不是一门编程语言。你可以用C、C++、Rust这些高性能的语言写代码，然后编译成WebAssembly字节码，再放到浏览器里跑。这样一来，就能享受到接近原生应用的性能，同时还能利用JS的生态。

第一幕：WebAssembly初体验

咱们先来个最简单的例子，用C语言写一个加法函数，编译成WebAssembly，然后在JS里调用。

C代码 (add.c):

#include <stdio.h>

int add(int a, int b) {
  return a + b;
}

int main() {
  printf("%dn", add(1, 2)); // This won't be executed in the browser.
  return 0;
}

这个C代码很简单，定义了一个add函数，接收两个整数作为参数，返回它们的和。main函数在这里没啥用，因为咱们是在浏览器里跑，不是在命令行里。

编译成WebAssembly:

我们需要一个编译器把C代码编译成WebAssembly字节码。推荐使用Emscripten，它是个神器。

首先，你需要安装Emscripten。安装方法请参考Emscripten的官方文档。

安装好之后，就可以用下面的命令编译C代码：

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_add']" -s MODULARIZE=1 -s 'EXPORT_NAME="Module"' -s WASM=1

这条命令有点长，咱们拆开来说：

emcc: Emscripten的编译器。
add.c: C源代码文件。
-o add.js: 指定输出文件名，这里是add.js。 Emscripten会生成两个文件，一个是add.js (JS胶水代码)，一个是add.wasm (WebAssembly字节码)。
-s EXPORTED_FUNCTIONS="['_add']": 告诉Emscripten，我们要把add函数导出到JS里，方便JS调用。注意，函数名前面要加一个下划线。
-s MODULARIZE=1: 将WebAssembly模块包装成一个JavaScript模块。
-s 'EXPORT_NAME="Module"': 指定模块的名称为"Module"。
-s WASM=1: 确保生成WebAssembly文件。

运行完这条命令，你就会得到add.js和add.wasm两个文件。

JS代码 (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>WebAssembly Example</title>
</head>
<body>
  <script src="add.js"></script>
  <script>
    Module().then(function(module) {
      const add = module.cwrap('add', 'number', ['number', 'number']);
      const result = add(5, 3);
      console.log('Result:', result); // 输出: Result: 8
    });
  </script>
</body>
</html>

这个HTML文件很简单，引入了add.js文件，然后在JS代码里调用了WebAssembly的add函数。

Module().then(...): Emscripten生成的add.js文件返回一个Promise，我们需要用then方法来处理Promise的结果。
module.cwrap('add', 'number', ['number', 'number']): cwrap函数是Emscripten提供的一个工具函数，用于把C函数包装成JS函数。它的参数分别是：
- 'add': C函数的名称。
- 'number': C函数的返回值类型，这里是整数。
- ['number', 'number']: C函数的参数类型，这里是两个整数。

打开这个HTML文件，你就能在控制台上看到输出结果：Result: 8。

第二幕：JS与Wasm的数据交互

光调用函数还不够，JS和Wasm之间还需要进行数据交互。比如，JS要传递一个数组给Wasm，Wasm处理完之后，再把结果返回给JS。

C代码 (array.c):

#include <stdio.h>
#include <stdlib.h>

int* process_array(int* arr, int len) {
  int* result = (int*)malloc(len * sizeof(int));
  for (int i = 0; i < len; i++) {
    result[i] = arr[i] * 2;
  }
  return result;
}

这个C代码定义了一个process_array函数，接收一个整数数组和一个长度作为参数，然后把数组里的每个元素乘以2，最后返回一个新的数组。注意，这里使用了malloc函数来分配内存，因为我们需要返回一个动态分配的数组。

编译成WebAssembly:

emcc array.c -o array.js -s EXPORTED_FUNCTIONS="['_process_array', '_malloc', '_free']" -s MODULARIZE=1 -s 'EXPORT_NAME="Module"' -s WASM=1

这次的编译命令和上次有点不一样，我们导出了三个函数：

_process_array: C代码里的process_array函数。
_malloc: C标准库里的malloc函数，用于在Wasm的内存里分配空间。
_free: C标准库里的free函数，用于释放Wasm内存。

JS代码 (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>WebAssembly Array Example</title>
</head>
<body>
  <script src="array.js"></script>
  <script>
    Module().then(function(module) {
      const processArray = module.cwrap('process_array', 'number', ['number', 'number']);
      const malloc = module.cwrap('malloc', 'number', ['number']);
      const free = module.cwrap('free', null, ['number']);

      const array = [1, 2, 3, 4, 5];
      const arrayLength = array.length;
      const arrayBytes = arrayLength * Int32Array.BYTES_PER_ELEMENT;

      // 1. Allocate memory in Wasm
      const wasmArrayPointer = malloc(arrayBytes);

      // 2. Copy data from JS to Wasm
      const wasmArray = new Int32Array(module.HEAP32.buffer, wasmArrayPointer, arrayLength);
      wasmArray.set(array);

      // 3. Call the Wasm function
      const wasmResultPointer = processArray(wasmArrayPointer, arrayLength);

      // 4. Copy data from Wasm to JS
      const result = new Int32Array(module.HEAP32.buffer, wasmResultPointer, arrayLength);
      const resultArray = Array.from(result);

      // 5. Free the memory in Wasm
      free(wasmArrayPointer);
      free(wasmResultPointer);

      console.log('Original array:', array);
      console.log('Result array:', resultArray); // 输出: Result array: [2, 4, 6, 8, 10]
    });
  </script>
</body>
</html>

这个JS代码稍微复杂一点，咱们一步一步来：

const processArray = module.cwrap(...): 包装process_array函数。
const malloc = module.cwrap(...): 包装malloc函数。
const free = module.cwrap(...): 包装free函数。
const array = [1, 2, 3, 4, 5]: 定义一个JS数组。
const arrayLength = array.length: 获取数组的长度。
const arrayBytes = arrayLength * Int32Array.BYTES_PER_ELEMENT: 计算数组占用的字节数。

接下来是关键步骤：

Allocate memory in Wasm: 在Wasm的内存里分配一块空间，用来存放JS数组。
const wasmArrayPointer = malloc(arrayBytes);
Copy data from JS to Wasm: 把JS数组的数据复制到Wasm的内存里。
const wasmArray = new Int32Array(module.HEAP32.buffer, wasmArrayPointer, arrayLength);
wasmArray.set(array);
这里用到了module.HEAP32，它是Emscripten提供的一个类型化数组，用于访问Wasm的内存。
Call the Wasm function: 调用Wasm的process_array函数，把Wasm数组的指针和长度传给它。
const wasmResultPointer = processArray(wasmArrayPointer, arrayLength);
Copy data from Wasm to JS: 把Wasm返回的数组的数据复制到JS里。
const result = new Int32Array(module.HEAP32.buffer, wasmResultPointer, arrayLength);
const resultArray = Array.from(result);
Free the memory in Wasm: 释放Wasm内存，防止内存泄漏。
free(wasmArrayPointer);
free(wasmResultPointer);

打开这个HTML文件，你就能在控制台上看到输出结果：

Original array: [1, 2, 3, 4, 5]
Result array: [2, 4, 6, 8, 10]

第三幕：性能对比

说了这么多，WebAssembly到底比JavaScript快多少呢？咱们来做一个简单的性能对比。

JS代码 (js_array.js):

function processArrayJS(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(arr[i] * 2);
  }
  return result;
}

C代码 (wasm_array.c):

#include <stdio.h>
#include <stdlib.h>

int* process_array(int* arr, int len) {
  int* result = (int*)malloc(len * sizeof(int));
  for (int i = 0; i < len; i++) {
    result[i] = arr[i] * 2;
  }
  return result;
}

（和前面的例子一样，只是为了方便对比，把C代码单独拿出来）

HTML代码 (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Performance Comparison</title>
</head>
<body>
  <script src="js_array.js"></script>
  <script src="wasm_array.js"></script>
  <script>
    const arraySize = 1000000;
    const array = Array.from({ length: arraySize }, (_, i) => i + 1);

    // JavaScript
    const startTimeJS = performance.now();
    const jsResult = processArrayJS(array);
    const endTimeJS = performance.now();
    const jsTime = endTimeJS - startTimeJS;

    console.log('JavaScript Time:', jsTime, 'ms');

    Module().then(function(module) {
      const processArray = module.cwrap('process_array', 'number', ['number', 'number']);
      const malloc = module.cwrap('malloc', 'number', ['number']);
      const free = module.cwrap('free', null, ['number']);

      const arrayBytes = arraySize * Int32Array.BYTES_PER_ELEMENT;

      // 1. Allocate memory in Wasm
      const wasmArrayPointer = malloc(arrayBytes);

      // 2. Copy data from JS to Wasm
      const wasmArray = new Int32Array(module.HEAP32.buffer, wasmArrayPointer, arraySize);
      wasmArray.set(array);

      // 3. Call the Wasm function
      const startTimeWasm = performance.now();
      const wasmResultPointer = processArray(wasmArrayPointer, arraySize);
      const endTimeWasm = performance.now();
      const wasmTime = endTimeWasm - startTimeWasm;

      // 4. Copy data from Wasm to JS (Optional, for verification)
      // const result = new Int32Array(module.HEAP32.buffer, wasmResultPointer, arraySize);
      // const resultArray = Array.from(result);

      // 5. Free the memory in Wasm
      free(wasmArrayPointer);
      free(wasmResultPointer);

      console.log('WebAssembly Time:', wasmTime, 'ms');
    });
  </script>
</body>
</html>

这个HTML文件分别用JavaScript和WebAssembly处理一个包含100万个元素的数组，并记录各自的耗时。

运行结果（仅供参考，不同机器结果不一样）：

JavaScript Time: 20 ms
WebAssembly Time: 2 ms

可以看到，WebAssembly比JavaScript快了10倍左右。当然，这只是一个简单的例子。在实际应用中，性能提升的幅度取决于具体的场景和代码的优化程度。

一些需要注意的点：

内存管理： WebAssembly的内存管理比较麻烦，需要手动分配和释放内存。如果忘记释放内存，就会导致内存泄漏。
类型转换： JS和Wasm之间的数据类型不一样，需要进行类型转换。
调试： 调试WebAssembly代码比较困难，需要借助一些工具。
胶水代码： Emscripten生成的JS胶水代码比较大，会增加页面的加载时间。
并不是所有场景都适合用WebAssembly： 如果你的代码不是很复杂，或者对性能要求不高，那么用JavaScript就足够了。

WebAssembly的适用场景：

场景	优点	缺点
游戏开发	性能高，可以运行复杂的3D游戏。	调试困难，需要处理内存管理。
图像/视频处理	性能高，可以进行复杂的图像和视频处理。	需要处理JS和Wasm之间的数据交互。
加密解密	安全性高，可以防止代码被篡改。	需要处理JS和Wasm之间的数据交互。
音频处理	低延迟，可以实现实时音频处理。	调试困难，需要处理内存管理。
科学计算	性能高，可以进行大规模的科学计算。	需要处理JS和Wasm之间的数据交互。

总结：

WebAssembly是一项强大的技术，可以让你在浏览器里运行高性能的代码。但是，它也有一些缺点，需要仔细权衡。希望今天的讲解能让你对WebAssembly有一个初步的了解。

收尾：

今天就到这里，希望大家有所收获。如果有什么问题，欢迎提问。谢谢大家！散会！

发表回复 取消回复

发表回复取消回复