javascript - 如何处理 WebAssembly 和 JavaScript 的数据互通？

Question

当你在前端使用 WebAssembly 时，如何有效地在 WebAssembly 和 JavaScript 之间传递复杂数据？

Answer 1

WebAssembly 使用内存数组作为数据结构，你可以通过 Memory 对象与 JavaScript 共享内存，并通过 getInt32、setInt32 等方法读写数据：

const memory = new WebAssembly.Memory({ initial: 1 });
const buffer = new Uint32Array(memory.buffer);
buffer[0] = 42; // 设置 WebAssembly 内存中的数据

Answer 2

处理 WebAssembly (Wasm) 和 JavaScript 之间的数据互通主要涉及内存管理和数据类型的转换。由于 WebAssembly 运行在沙箱环境中，直接访问 JavaScript 的堆内存是不被允许的，因此数据交换需要通过线性内存（Linear Memory）或其他接口进行。以下是一些处理数据互通的有效方法：

1. 使用线性内存（Linear Memory）

WebAssembly 模块可以访问其自己的线性内存，而 JavaScript 可以通过 WebAssembly 的内存对象（Memory object）来读写这块内存。

• 写入数据到 WebAssembly 内存：JavaScript 可以通过 WebAssembly 实例的 exports 属性中的函数或直接使用 memory 对象来写入数据。
• 从 WebAssembly 内存读取数据：同样，JavaScript 可以从 WebAssembly 内存中读取数据，然后转换回 JavaScript 使用的数据类型。

2. 使用外部函数（External Functions）

WebAssembly 模块可以导入 JavaScript 函数，这些函数可以作为外部接口来处理数据转换或调用 JavaScript API。

• 定义导入的函数：在 WebAssembly 模块的编译或实例化时，指定 JavaScript 提供的函数。
• 在 WebAssembly 中调用：Wasm 代码可以调用这些导入的函数来传递数据或请求服务。

3. 数据类型映射

由于 JavaScript 和 WebAssembly 支持的数据类型有所不同，因此在进行数据交换时需要进行适当的类型转换。

• 基本类型：如整数、浮点数等，可以直接在内存中以字节形式传递，但需要确保类型匹配。
• 复杂类型（如字符串、数组、对象）：通常需要将它们序列化为字节流（例如使用 JSON、MessagePack 等），然后传递到 WebAssembly 内存，或在 JavaScript 中进行反序列化。

4. 使用 Emscripten

Emscripten 是一个工具链，它简化了将 C/C++ 代码编译为 WebAssembly 并与 JavaScript 交互的过程。它提供了丰富的库来处理类型转换、内存管理以及异步操作等。

• Emscripten 绑定：自动处理 C/C++ 函数和 JavaScript 之间的绑定。
• 内存管理：管理 WebAssembly 使用的内存，并提供方便的 API 来操作这些内存。
• 类型转换：自动处理基本类型和复杂类型之间的转换。

示例

假设你有一个 C/C++ 函数，它接受一个指向整型数组的指针和数组的长度，并对其进行处理。在 JavaScript 中，你需要创建一个 TypedArray（如 Uint32Array），将其传递给 WebAssembly，并在处理完成后读取结果。

// 假设 wasmModule 是已加载的 WebAssembly 模块实例
let memory = wasmModule.exports.memory;
let data = new Uint32Array(wasmModule.exports.memory.buffer, offset, length);

// 填充数据
for (let i = 0; i < length; i++) {
    data[i] = i * 2;
}

// 调用 WebAssembly 函数处理数据
wasmModule.exports.process_data(offset, length);

// 读取处理后的数据
// 注意：这里假设 process_data 原地修改了数据
console.log(data);

在这个例子中，offset 是你在线性内存中为数组分配的空间的起始偏移量。通过这种方式，你可以有效地在 JavaScript 和 WebAssembly 之间传递复杂数据。