本文作者是360奇舞团的前端工程师
本文为翻译,原文略做修改以符合中文语境 原文标题:WebAssembly: byte-code of the future 原文作者:Joshua Nussbaum 原文地址:dev.to/joshnuss/we...
自从Netscape推出JavaScript以来,一直有一些开发者喜欢它,而另一些则不喜欢。
如果浏览器支持更多的编程语言那就太好了,不管你站在哪一边,我想我们都一致同意。
这是 WebAssembly 的承诺:提供任何编程语言都可以编译的通用运行时。
过去的尝试
在网络的早期,人们尝试使用 Java Applet 和 Microsoft ActiveX 进行扩展;但两者都受到安全问题的困扰,最终被放弃;问题是它们在没有访问控制的情况下执行,这成为了一个巨大的挑战。
后来Macromedia Flash和Silverlight取得了一些成功,但最终也遭遇了同样的悲惨命运;它们都缺乏开放标准,这使得浏览器和操作系统供应商很难支持。
什么是 WebAssembly?
WebAssembly (又名 WASM)是一种 开放标准[1] 字节代码格式,适用于所有浏览器。它是一种低级二进制格式和执行引擎,概念上类似于 Oracle 的 JVM 或 Microsoft 的 CLR。
它的设计初衷就是为了托管和安全,它无法访问机器的内存或硬盘。只有主机可以决定公开哪些 API。
WASM 是一种可移植格式,因此可以支持多种编程语言,认为 Rust、Ruby、Python 甚至 JavaScript 都可以编译为 WASM 字节代码。
尽管它最初是针对浏览器而设计的,但它在浏览器之外也能很好地工作。
它可以在服务器上、云端、硬件设备上运行,或者使用插件系统。
编写 WASM
创建.wasm
文件有多种方式:
- 手动编写(不建议,因为WebAssembly的字节码是一种低级别的二进制表示形式,编写起来非常复杂和容易出错)
- 使用 Wasm 文本格式[2] 编写。
- 使用更高级的语言,如 AssemblyScript、Rust、Ruby 等,然后编译它。
我们通过以下几个例子来看下:
什么是WAT
WAT(Wasm Text Format)是WebAssembly规范提供的一种用于定义WebAssembly模块的文本格式;它使用S表达式(S-expressions)的语法,类似于Lisp或Clojure。
例如,以下是一个简单的WAT示例,表示一个将两个数字相加的WebAssembly函数:
bash
; define a module
(module
; define a function called "add"
; it takes 2 params:
; - $a is a 32-bit integer
; - $b is a 32-bit integer
; it returns an 32-bit integer
(fun add (param $a i32) (param $b i32) (result $i32)
; load param $a onto the stack
local.get $a
; load param $b onto the stack
local.get $b
; perform 32-bit integer "add" operation
i32.add
; the last value on the stack is returned
; which is the result of the `i32.add`
)
)
使用 wat2wasm WebAssembly Toolkit CLI 工具[3] 编译.wat文件
markdown
# outputs example.wasm
> wat2wasm example.wat
编译产出 example.wasm 可以在任何主机执行,使用 wasmtime
命令行工具来执行
shell
# invoke "add" function, and pass args 1,2
> wasmtime example.wasm --invoke add 1 2
3
AssemblyScript
还有一种称为 AssemblyScript[4] 的高级语言;它就像是WebAssembly 的 TypeScript。
如果我们用 AssemblyScript 重写上面例子中的add()
函数,它将如下所示:
arduino
// in add.ts
export function add(a: u32, b: u32): u32 {
return a + b;
}
这样对比来看,更具有可读性,对前端开发来讲更友好;
然后使用AssemblyScript 的编译器asc
来编译:
ini
pnpm install -D assemblyscript
pnpm run asc add.ts --outFile=math.wasm
格式对比
为了比较 AssemblyScript 和 WAT 格式,我创建了一个小工具:
assemblyscript-play.vercel.app
您还可以使用 CLI 工具 wasm2wat
来比较这两种格式:
lua
# outputs .wat format
wasm2wat math.wasm
运行时执行
就像编译 wasm 的方式有很多种一样,执行它的方法也有很多种。
在浏览器中使用WebAssembly
要在浏览器中使用WebAssembly API,首先加载WebAssembly模块:
javascript
// fetch .wasm file
const response = fetch('/path/to/some.wasm')
// instantiate module with streaming
const module = WebAssembly.instantiateStreaming(response)
然后,调用导出的add
的函数:
java
const result = module.instance.exports.add(1, 2)
还可以向模块传递其他方法,例如可以共享 console.log
方法:
javascript
// fetch .wasm file
const response = fetch('/path/to/some.wasm')
// instantiate module and pass an api
const module = WebAssembly.instantiateStreaming(response, {
imports: {
// share console.log
log: console.log
}
})
在服务器上使用 WebAssembly
WebAssembly也可以在服务器上执行,使用的方法与在浏览器中的几乎相同。
唯一不同的是,不使用URL从服务器获取.wasm文件,而是使用 fs.readFile()
从磁盘上读取它:
javascript
import fs from 'fs'
// read .wasm file
const bytes = await fs.promises.readFile('/path/to/some.wasm')
// instantiate the module
const module = WebAssembly.instantiate(bytes)
然后,调用 add
函数:
java
const result = module.instance.exports.add(1, 2)
还可以从许多其他编程语言中执行此操作,例如 rust[5] 、 ruby[6] 、 python[7] 或来自 CLI[8] 。
在云端使用 WebAssembly
WebAssembly在云端也有一些重要的应用场景。
与JavaScript云函数相比,它具备一些明显的优势:
- 无冷启动:主机只需加载一个.wasm文件,而不是整个应用程序;典型的JavaScript应用包含许多需要加载的文件,这会耗费较长的时间。
- 更快的部署:需要上传的仅仅是一个简单的二进制文件。
- 多语言托管:所有可以编译为WebAssembly的编程语言都可以在云中部署,无需特殊的运行时环境。
- 快照:执行状态可以进行快照;例如,一个在初始化期间执行大量计算的应用程序可以创建快照。随后的请求可以从快照状态开始,从而避免浪费大量的启动时间。
注意事项
关于WebAssembly,仍然存在一些问题:
- WebAssembly仍然相对较新,并且正在积极开发中,尽管它正在不停的迭代中,但仍存在一些尚未完善的方面。
- 尚未为某些编程语言提供完整的支持。
- WebAssembly没有像字符串或标准库等基本数据类型,这是故意设计的,各编程语言需要自行提供其标准库。
- 由于"标准库"需要包含在.wasm文件中,这可能会导致文件变得较大。
我相信,这些大多数问题会随着时间的推移将得到解决。
未来前景
在过去几年中,WebAssembly取得了许多进展。
最终,几乎所有编程语言都将具备编译到WebAssembly的能力,并提供适用于托管WebAssembly的运行时环境(如果尚未提供的话);这将使所有编程语言都能够在浏览器、服务器甚至硬件上运行。
这也可能催生出专为适应WebAssembly主导的编程环境而设计的新型编程语言。
参考资料
[1] 开放标准 www.w3.org/groups/wg/w... [2] Wasm 文本格式 webassembly.github.io/spec/core/t... [3] WebAssembly Toolkit CLI 工具 github.com/WebAssembly... [4] AssemblyScript www.assemblyscript.org/ [5] rust docs.rs/wasmer/late... [8] ruby github.com/wasmerio/wa... [7] python github.com/wasmerio/wa... [8] CLI wasmtime.dev/