JS `WebAssembly` `GC` 提案：Wasm 模块的宿主语言垃圾回收集成

各位观众老爷，大家好！今天咱们来聊聊 WebAssembly (Wasm) 的一个“未来战士”特性：GC (Garbage Collection)。

开场白：Wasm 的“野心”与“痛点”

WebAssembly，这玩意儿一出生就带着“野心”，想成为 Web 平台的通用字节码，让各种语言都能跑得飞起。它凭借着接近原生的性能、安全性和可移植性，已经攻占了 Web 应用、Node.js、甚至嵌入式系统等诸多领域。

但 Wasm 也不是完美的，它有个“痛点”：内存管理。 最初的 Wasm 只能通过线性内存（Linear Memory）来管理内存，这就像给你一块巨大的数组，你自己负责分配和释放。 对于 C、C++ 这种“手动挡”语言还好说，但对于 Java、C#、Python 这些自带垃圾回收机制的“自动挡”语言来说，就有点尴尬了。它们要么自己实现一套垃圾回收器，要么就把整个运行时都编译到 Wasm 里，体积和性能都受到影响。

Wasm GC：应运而生的“救星”

为了解决这个问题，Wasm GC 提案就诞生了。 它的目标是：让 Wasm 模块可以直接使用宿主环境（比如浏览器）的垃圾回收器，从而让那些“自动挡”语言能够更轻松、更高效地运行在 Wasm 上。

想象一下，你用 Java 写了一个复杂的应用，以前需要把整个 JVM 都编译成 Wasm，现在只需要把 Java 代码编译成 Wasm，然后利用浏览器的垃圾回收器，是不是感觉轻松多了？

Wasm GC 的核心概念

Wasm GC 引入了几个关键概念：

1. 引用类型 (Reference Types)：Wasm GC 引入了新的类型来表示对象的引用，比如 (ref) 和 (ref null)。ref 表示一个非空的引用，ref null 表示一个可以为空的引用。

2. 结构体 (Structs) 和数组 (Arrays)：Wasm GC 允许定义结构体和数组类型，这些类型可以包含其他类型，包括引用类型。这使得 Wasm 模块可以创建复杂的数据结构，并由宿主环境的垃圾回收器来管理。

3. gc.new 和 gc.new_default 指令：这两个指令用于创建新的结构体对象。gc.new 需要提供初始值，而 gc.new_default 则使用默认值初始化结构体。

4. gc.get 和 gc.set 指令：这两个指令用于访问和修改结构体中的字段。

5. gc.array.new、gc.array.get 和 gc.array.set 指令：这三个指令分别用于创建新的数组、访问数组元素和修改数组元素。

6. 类型定义 (Type Definitions)：可以使用 (type) 指令定义新的结构体和数组类型，这样可以提高代码的可读性和可维护性。

代码示例：用 Wasm GC 创建一个简单的对象

咱们来看一个简单的例子，用 Wasm GC 创建一个表示点的对象，包含 x 和 y 坐标：

(module
  (type $point (struct (field f64) (field f64)))  ; 定义一个名为 point 的结构体类型
  (global $point_type (mut i32) (i32.const 0))   ; 用于存储 point 类型的索引，初始化为 0

  (func $create_point (param $x f64 (param $y f64) (result (ref $point))
    (local $point_instance (ref $point))          ; 声明一个局部变量存储结构体实例
    (local.set $point_instance (gc.new $point (local.get $x) (local.get $y))) ; 创建一个 point 实例
    (local.get $point_instance)                   ; 返回 point 实例
  )

  (func $get_x (param $point_instance (ref $point)) (result f64)
    (gc.get $point_instance 0)                     ; 获取 point 实例的第一个字段 (x 坐标)
  )

  (func $get_y (param $point_instance (ref $point)) (result f64)
    (gc.get $point_instance 1)                     ; 获取 point 实例的第二个字段 (y 坐标)
  )

  (func $set_x (param $point_instance (ref $point)) (param $x f64)
    (gc.set $point_instance 0 (local.get $x))      ; 设置 point 实例的第一个字段 (x 坐标)
  )

  (func $set_y (param $point_instance (ref $point)) (param $y f64)
    (gc.set $point_instance 1 (local.get $y))      ; 设置 point 实例的第二个字段 (y 坐标)
  )

  (export "create_point" (func $create_point))
  (export "get_x" (func $get_x))
  (export "get_y" (func $get_y))
  (export "set_x" (func $set_x))
  (export "set_y" (func $set_y))
)

这个 Wasm 模块定义了一个名为 point 的结构体，包含两个 f64 类型的字段（x 和 y 坐标）。它还导出了几个函数，用于创建 point 对象、获取 x 和 y 坐标，以及设置 x 和 y 坐标。

JavaScript 中使用 Wasm GC 模块

现在，咱们来看看如何在 JavaScript 中使用这个 Wasm GC 模块：

async function loadAndRunWasm() {
  const response = await fetch('point.wasm'); // 假设 Wasm 模块保存在 point.wasm 文件中
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);

  const instance = await WebAssembly.instantiate(module);

  const createPoint = instance.exports.create_point;
  const getX = instance.exports.get_x;
  const getY = instance.exports.get_y;
  const setX = instance.exports.set_x;
  const setY = instance.exports.set_y;

  // 创建一个 point 对象
  const point = createPoint(10.5, 20.7);

  // 获取 x 和 y 坐标
  const x = getX(point);
  const y = getY(point);

  console.log(`Point: x = ${x}, y = ${y}`); // 输出：Point: x = 10.5, y = 20.7

  // 修改 x 和 y 坐标
  setX(point, 30.2);
  setY(point, 40.9);

  // 再次获取 x 和 y 坐标
  const newX = getX(point);
  const newY = getY(point);

  console.log(`New Point: x = ${newX}, y = ${newY}`); // 输出：New Point: x = 30.2, y = 40.9
}

loadAndRunWasm();

这段 JavaScript 代码首先加载 Wasm 模块，然后获取导出的函数。接着，它创建一个 point 对象，获取和修改 x 和 y 坐标，并打印结果。

更复杂的例子：链表

接下来，咱们来一个稍微复杂点的例子，用 Wasm GC 创建一个链表：

(module
  (type $list_node (struct (field (ref null $list_node)) (field i32))) ; 定义链表节点类型
  (global $list_node_type (mut i32) (i32.const 0))

  (func $create_node (param $value i32) (param $next (ref null $list_node)) (result (ref $list_node))
    (local $node (ref $list_node))
    (local.set $node (gc.new $list_node (local.get $next) (local.get $value)))
    (local.get $node)
  )

  (func $get_value (param $node (ref $list_node)) (result i32)
    (gc.get $node 1) ; 获取节点的值
  )

  (func $get_next (param $node (ref $list_node)) (result (ref null $list_node))
    (gc.get $node 0) ; 获取下一个节点
  )

  (func $set_next (param $node (ref $list_node)) (param $next (ref null $list_node))
    (gc.set $node 0 (local.get $next)) ; 设置下一个节点
  )

  (export "create_node" (func $create_node))
  (export "get_value" (func $get_value))
  (export "get_next" (func $get_next))
  (export "set_next" (func $set_next))
)

这个 Wasm 模块定义了一个链表节点类型 list_node，包含一个指向下一个节点的引用和一个整数值。它还导出了几个函数，用于创建节点、获取节点的值和下一个节点，以及设置下一个节点。

JavaScript 中使用链表模块

async function loadAndRunListWasm() {
  const response = await fetch('list.wasm');
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);

  const instance = await WebAssembly.instantiate(module);

  const createNode = instance.exports.create_node;
  const getValue = instance.exports.get_value;
  const getNext = instance.exports.get_next;
  const setNext = instance.exports.set_next;

  // 创建链表
  let head = createNode(1, null);
  head = createNode(2, head);
  head = createNode(3, head);

  // 遍历链表
  let current = head;
  while (current !== null) {
    console.log(getValue(current)); // 输出 3, 2, 1
    current = getNext(current);
  }

  // 修改链表
  const secondNode = getNext(head);
  setNext(head, getNext(secondNode)); // 删除第二个节点

  // 再次遍历链表
  current = head;
  console.log("After deletion:");
  while (current !== null) {
    console.log(getValue(current)); // 输出 3, 1
    current = getNext(current);
  }
}

loadAndRunListWasm();

这段 JavaScript 代码创建了一个链表，遍历链表，删除一个节点，然后再次遍历链表。

Wasm GC 的优势

• 更好的语言集成：让 Java、C#、Python 等语言能够更方便地运行在 Wasm 上。
• 更小的体积：避免了将整个运行时编译到 Wasm 中，减小了 Wasm 模块的体积。
• 更高的性能：可以利用宿主环境的垃圾回收器，通常比自己实现的垃圾回收器更高效。
• 更好的互操作性：可以更容易地在 Wasm 模块和宿主环境之间传递对象。

Wasm GC 的挑战

• 宿主环境兼容性：需要宿主环境支持 Wasm GC 提案。目前，浏览器对 Wasm GC 的支持还在不断完善中。
• 调试难度：Wasm GC 的调试可能会比较困难，因为涉及到 Wasm 模块和宿主环境的垃圾回收器。
• 性能调优：需要对 Wasm GC 进行性能调优，以获得最佳性能。

Wasm GC 的未来

Wasm GC 仍然是一个相对较新的技术，但它具有巨大的潜力。 随着 Wasm GC 的不断发展和完善，它将成为 Wasm 生态系统中一个重要的组成部分，让更多的语言能够更轻松、更高效地运行在 Wasm 上。

总结

特性	描述	优势	挑战
引用类型	允许 Wasm 模块直接引用宿主环境中的对象。	更好的语言集成，更小的体积。	宿主环境兼容性。
结构体和数组	允许定义结构体和数组类型，这些类型可以包含其他类型，包括引用类型。	可以在 Wasm 模块中创建复杂的数据结构。	调试难度。
gc.new 指令	用于创建新的结构体对象。	创建对象更方便。	性能调优。
gc.get/set 指令	用于访问和修改结构体中的字段。	访问和修改对象更方便。
垃圾回收	Wasm 模块创建的对象由宿主环境的垃圾回收器管理。	避免了在 Wasm 模块中实现垃圾回收器，减小了体积，提高了性能。	需要宿主环境支持 Wasm GC。
互操作性	可以更容易地在 Wasm 模块和宿主环境之间传递对象。	更好的互操作性，可以更容易地构建复杂的应用。

总而言之，Wasm GC 是 Wasm 发展道路上的一块重要拼图，它让 Wasm 变得更加强大和通用。虽然目前还面临一些挑战，但我们有理由相信，在不久的将来，Wasm GC 将会大放异彩。

好了，今天的讲座就到这里。 谢谢大家！ 希望对您有所帮助。