通过这个分步教程,开始用人类可读的文本编写 WebAssembly。
WebAssembly 是一种字节码格式,几乎所有的浏览器 都可以将它编译成其宿主操作系统的机器代码。除了 JavaScript 和 WebGL 之外,WebAssembly 还满足了将应用移植到浏览器中以实现平台独立的需求。作为 C++ 和 Rust 的编译目标,WebAssembly 使 Web 浏览器能够以接近原生的速度执行代码。
当谈论 WebAssembly 应用时,你必须区分三种状态:
- 源码(如 C++ 或 Rust): 你有一个用兼容语言编写的应用,你想把它在浏览器中执行。
- WebAssembly 字节码: 你选择 WebAssembly 字节码作为编译目标。最后,你得到一个
.wasm
文件。 - 机器码(opcode): 浏览器加载
.wasm
文件,并将其编译成主机系统的相应机器码。
WebAssembly 还有一种文本格式,用人类可读的文本表示二进制格式。为了简单起见,我将其称为 WASM-text。WASM-text 可以比作高级汇编语言。当然,你不会基于 WASM-text 来编写一个完整的应用,但了解它的底层工作原理是很好的(特别是对于调试和性能优化)。
本文将指导你在 WASM-text 中创建经典的 “Hello World” 程序。
创建 .wat 文件
WASM-text 文件通常以 .wat
结尾。第一步创建一个名为 helloworld.wat
的空文本文件,用你最喜欢的文本编辑器打开它,然后粘贴进去:
“`
(module
;; 从 JavaScript 命名空间导入
(import “console” “log” (func $log (param i32 i32))) ;; 导入 log 函数
(import “js” “mem” (memory 1)) ;; 导入 1 页 内存(64kb)
;; 我们的模块的数据段
(data (i32.const 0) "Hello World from WebAssembly!")
;; 函数声明:导出 helloWorld(),无参数
(func (export "helloWorld")
i32.const 0 ;; 传递偏移 0 到 log
i32.const 29 ;; 传递长度 29 到 log(示例文本的字符串长度)
call $log
)
)
“`
WASM-text 格式是基于 S 表达式的。为了实现交互,JavaScript 函数用 import
语句导入,WebAssembly 函数用 export
语句导出。在这个例子中,从 console
模块中导入 log
函数,它需要两个类型为 i32
的参数作为输入,以及一页内存(64KB)来存储字符串。
字符串将被写入偏移量 为 0
的数据段。数据段是你的内存的 叠加投影 ,内存是在 JavaScript 部分分配的。
函数用关键字 func
标记。当进入函数时,栈是空的。在调用另一个函数之前,函数参数会被压入栈中(这里是偏移量和长度)(见 call $log
)。当一个函数返回一个 f32
类型时(例如),当离开函数时,一个 f32
变量必须保留在栈中(但在本例中不是这样)。
创建 .wasm 文件
WASM-text 和 WebAssembly 字节码是 1:1 对应的,这意味着你可以将 WASM-text 转换成字节码(反之亦然)。你已经有了 WASM-text,现在将创建字节码。
转换可以通过 WebAssembly Binary Toolkit(WABT)来完成。从该链接克隆仓库,并按照安装说明进行安装。
建立工具链后,打开控制台并输入以下内容,将 WASM-text 转换为字节码:
“`
wat2wasm helloworld.wat -o helloworld.wasm
“`
你也可以用以下方法将字节码转换为 WASM-text:
“`
wasm2wat helloworld.wasm -o helloworld_reverse.wat
“`
一个从 .wasm
文件创建的 .wat
文件不包括任何函数或参数名称。默认情况下,WebAssembly 用它们的索引来识别函数和参数。
编译 .wasm 文件
目前,WebAssembly 只与 JavaScript 共存,所以你必须编写一个简短的脚本来加载和编译 .wasm
文件并进行函数调用。你还需要在 WebAssembly 模块中定义你要导入的函数。
创建一个空的文本文件,并将其命名为 helloworld.html
,然后打开你喜欢的文本编辑器并粘贴进去:
“`