各位观众，老铁们，晚上好！今天咱们聊聊 WebAssembly (Wasm) 的 Linear Memory，以及 JavaScript 如何通过 WebAssembly.Memory 对象和 Wasm 模块眉来眼去，进行高效的二进制数据交换。准备好了吗？咱们发车！
啥是 Linear Memory？别慌，没那么玄乎！
想象一下，你有一张巨大的白板，上面写满了数字、字母，甚至还有你昨天没吃完的披萨外卖单（别否认，我都看到了）。这就是 Wasm 的 Linear Memory，一个连续的、可寻址的字节数组。
关键点：
- 连续的： 就像你家楼下的停车场，车位一个挨着一个，地址也是连续的。
- 可寻址的： 每个字节都有一个唯一的编号（地址），方便 Wasm 模块准确找到并修改它。
- 字节数组： 存储的是原始的二进制数据，没有类型之分，想怎么解释都由你说了算。
所以，Linear Memory 其实就是一个巨大的、扁平的、未经格式化的数据存储空间。Wasm 模块可以在这个空间里自由读写数据，就像你在白板上涂鸦一样。
为什么需要 Linear Memory？
Wasm 模块通常是用 C、C++、Rust 等语言编译出来的，这些语言都有自己的内存管理机制。为了让这些模块能在 Web 浏览器中安全、高效地运行，Wasm 引入了 Linear Memory 作为它们共享的内存空间。
好处：
- 安全隔离： Wasm 模块只能访问 Linear Memory 中分配给它的区域，不能越界访问，避免了破坏浏览器或其他模块的风险。
- 高效性能： Linear Memory 是一个连续的内存空间，访问速度非常快，接近原生代码的性能。
- 跨语言互操作： 不同的语言编译出来的 Wasm 模块可以通过 Linear Memory 共享数据，实现跨语言互操作。
- 确定性： Linear Memory 的行为是可预测的，这对于保证 Wasm 模块在不同平台上的运行结果一致性至关重要。
WebAssembly.Memory：JavaScript 和 Wasm 的红娘
光有 Linear Memory 还不够，JavaScript 需要一种方式来访问和操作它。这时候，WebAssembly.Memory 对象就闪亮登场了！
WebAssembly.Memory 对象是 JavaScript 中对 Wasm Linear Memory 的抽象。通过它，JavaScript 可以：
- 创建 Linear Memory： 指定初始大小和最大大小。
- 访问 Linear Memory： 获取 Linear Memory 的
ArrayBuffer视图。 - 修改 Linear Memory： 通过
ArrayBuffer视图读写 Linear Memory 中的数据。 - 与 Wasm 模块共享 Linear Memory： 将
WebAssembly.Memory对象传递给 Wasm 模块，让它们共享同一块内存空间。
简单来说，WebAssembly.Memory 就是 JavaScript 和 Wasm 模块之间的桥梁，让它们可以互相访问和操作同一块内存区域。
代码说话：JavaScript 如何与 Wasm 模块共享 Linear Memory
咱们用一个简单的例子来说明 JavaScript 如何与 Wasm 模块共享 Linear Memory：
-
Wasm 模块 (memory.wat):
(module (memory (export "memory") 1) ;; 定义并导出 Linear Memory，初始大小为 1 页 (64KB) (func (export "get_value") (param $offset i32) (result i32) (i32.load (offset $offset) (local.get $offset)) ;; 从 Linear Memory 中读取指定偏移量的值 ) (func (export "set_value") (param $offset i32) (param $value i32) (i32.store (offset $offset) (local.get $offset) (local.get $value)) ;; 将指定值写入 Linear Memory 的指定偏移量 ) )这个 Wasm 模块导出了一个 Linear Memory (
memory)，以及两个函数：get_value(offset): 从 Linear Memory 的指定偏移量读取一个 32 位整数。set_value(offset, value): 将一个 32 位整数写入 Linear Memory 的指定偏移量。
-
JavaScript 代码 (index.js):
async function runWasm() { // 1. 创建 Linear Memory const memory = new WebAssembly.Memory({ initial: 1 }); // 初始大小为 1 页 (64KB) // 2. 导入对象，包含导出的 Linear Memory const importObject = { env: { memory: memory, // 将 JavaScript 创建的 Linear Memory 传递给 Wasm 模块 }, }; // 3. 加载 Wasm 模块 const response = await fetch('memory.wasm'); const buffer = await response.arrayBuffer(); const module = await WebAssembly.instantiate(buffer, importObject); // 4. 获取导出的函数 const getValue = module.instance.exports.get_value; const setValue = module.instance.exports.set_value; // 5. 获取 Linear Memory 的 ArrayBuffer 视图 const memoryBuffer = memory.buffer; const memoryView = new Int32Array(memoryBuffer); // 创建一个 Int32Array 视图 // 6. 在 JavaScript 中设置 Linear Memory 的值 memoryView[0] = 42; // 将第一个 32 位整数设置为 42 console.log("JavaScript set value at offset 0 to:", memoryView[0]); // 7. 调用 Wasm 模块的 set_value 函数 setValue(4, 123); // 将偏移量为 4 的 32 位整数设置为 123 console.log("Wasm set value at offset 4 to:", memoryView[1]); // 偏移量为 4 的位置是数组的第二个元素 // 8. 调用 Wasm 模块的 get_value 函数 const value = getValue(0); // 从偏移量为 0 的位置读取值 console.log("Wasm get value at offset 0:", value); // 应该输出 42 const value2 = getValue(4); // 从偏移量为 4 的位置读取值 console.log("Wasm get value at offset 4:", value2); // 应该输出 123 } runWasm();这个 JavaScript 代码做了以下事情：
- 创建 Linear Memory: 使用
WebAssembly.Memory创建一个 Linear Memory 对象，初始大小为 1 页 (64KB)。 - 构建导入对象: 创建一个
importObject，将 JavaScript 创建的memory对象传递给 Wasm 模块的env.memory。 - 加载 Wasm 模块: 使用
WebAssembly.instantiate加载 Wasm 模块，并将importObject传递给它。 - 获取导出的函数: 从 Wasm 实例中获取导出的
get_value和set_value函数。 - 获取 ArrayBuffer 视图: 获取 Linear Memory 的
ArrayBuffer视图，并创建一个Int32Array视图，方便以 32 位整数的方式访问 Linear Memory。 - 通过 JavaScript 和 Wasm 模块读写 Linear Memory: 分别使用 JavaScript 和 Wasm 模块的函数读写 Linear Memory，验证它们共享同一块内存空间。
运行这段代码，你会在控制台中看到类似以下的输出：
JavaScript set value at offset 0 to: 42 Wasm set value at offset 4 to: 123 Wasm get value at offset 0: 42 Wasm get value at offset 4: 123这表明 JavaScript 和 Wasm 模块成功共享了 Linear Memory，并且可以互相读写其中的数据。
- 创建 Linear Memory: 使用
-
编译 Wasm 模块:
你需要先将
.wat文件编译成.wasm文件。你可以使用wabt工具链中的wat2wasm命令：wat2wasm memory.wat -o memory.wasm确保你已经安装了
wabt工具链。
Linear Memory 的大小和增长
Linear Memory 的大小是以 页 (Page) 为单位的，每页的大小是 64KB。在创建 WebAssembly.Memory 对象时，你可以指定初始大小 (initial) 和最大大小 (maximum)。
initial: Linear Memory 的初始大小，以页为单位。maximum: Linear Memory 的最大大小，以页为单位。如果未指定，则 Linear Memory 的大小可以无限增长（受浏览器限制）。
Wasm 模块可以通过 memory.grow 指令来增加 Linear Memory 的大小。JavaScript 也可以通过 WebAssembly.Memory.grow() 方法来增加 Linear Memory 的大小。
注意：
- 增加 Linear Memory 的大小是一个耗时的操作，应该尽量避免频繁增长。
- Linear Memory 的大小不能超过
maximum指定的值。 memory.grow和WebAssembly.Memory.grow()方法都返回 Linear Memory 增长前的大小（以页为单位）。如果增长失败，则返回 -1。
ArrayBuffer 视图：访问 Linear Memory 的多种方式
ArrayBuffer 是 JavaScript 中表示原始二进制数据的对象。WebAssembly.Memory.buffer 属性返回一个 ArrayBuffer 对象，它代表了 Linear Memory 的内容。
你可以使用不同类型的 Typed Arrays 来创建 ArrayBuffer 的视图，以便以不同的数据类型访问 Linear Memory：
| 类型 | 描述 | 字节大小 |
|---|---|---|
Int8Array |
8 位有符号整数 | 1 |
Uint8Array |
8 位无符号整数 | 1 |
Int16Array |
16 位有符号整数 | 2 |
Uint16Array |
16 位无符号整数 | 2 |
Int32Array |
32 位有符号整数 | 4 |
Uint32Array |
32 位无符号整数 | 4 |
Float32Array |
32 位浮点数 | 4 |
Float64Array |
64 位浮点数 | 8 |
BigInt64Array |
64 位有符号大整数 | 8 |
BigUint64Array |
64 位无符号大整数 | 8 |
选择合适的 Typed Array 类型取决于你要访问的数据的类型。例如，如果你要访问 32 位整数，可以使用 Int32Array 或 Uint32Array。
示例：
const memory = new WebAssembly.Memory({ initial: 1 });
const buffer = memory.buffer;
const int32View = new Int32Array(buffer);
const float64View = new Float64Array(buffer);
int32View[0] = 123; // 将第一个 32 位整数设置为 123
float64View[1] = 3.14; // 将第二个 64 位浮点数设置为 3.14陷阱和注意事项
- 字节对齐： 在访问 Linear Memory 时，要注意字节对齐。例如，32 位整数必须存储在 4 字节对齐的地址上，否则可能会导致性能问题或错误。
- 内存泄漏： Wasm 模块中的内存泄漏可能会导致 Linear Memory 无限制增长，最终导致浏览器崩溃。要小心管理 Wasm 模块中的内存。
- 并发访问： 如果多个线程或 Web Workers 同时访问 Linear Memory，需要进行同步，避免数据竞争。
- ArrayBuffer detached: 当 Linear Memory 增长时，之前的
ArrayBuffer会被 detached，需要重新获取。 - Endianness: Wasm 默认使用小端字节序，JavaScript 运行环境的字节序可能不同，需要注意字节序转换。
总结
今天咱们聊了 Wasm 的 Linear Memory 模型，以及 JavaScript 如何通过 WebAssembly.Memory 对象与 Wasm 模块进行高效的二进制数据交换。希望大家对 Linear Memory 有了更清晰的认识。记住，Linear Memory 是 Wasm 的核心概念之一，理解它对于编写高性能、安全的 Wasm 应用至关重要。
下次再见，各位老铁！记得点赞、关注、投币三连哦！