本文作者是360奇舞团的前端工程师。 本文为翻译，原文略做修改以符合中文语境。
原文标题：WebAssembly: byte-code of the future 原文作者：Joshua Nussbaum
原文地址：https://dev.to/joshnuss/webassembly-byte-code-of-the-future-402p
自从Netscape推出JavaScript以来，一直有一些开发者喜欢它，而另一些则不喜欢。
如果浏览器支持更多的编程语言那就太好了，不管你站在哪一边，我想我们都一致同意。
这是 WebAssembly 的承诺：提供任何编程语言都可以编译的通用运行时。
在网络的早期，人们尝试使用 Java Applet 和 Microsoft ActiveX 进行扩展；但两者都受到安全问题的困扰，最终被放弃；问题是它们在没有访问控制的情况下执行，这成为了一个巨大的挑战。
后来Macromedia Flash和Silverlight取得了一些成功，但最终也遭遇了同样的悲惨命运；它们都缺乏开放标准，这使得浏览器和操作系统供应商很难支持。
WebAssembly（又名 WASM）是一种 开放标准[1] 字节代码格式，适用于所有浏览器。它是一种低级二进制格式和执行引擎，概念上类似于 Oracle 的 JVM 或 Microsoft 的 CLR。
它的设计初衷就是为了托管和安全，它无法访问机器的内存或硬盘。只有主机可以决定公开哪些 API。
WASM 是一种可移植格式，因此可以支持多种编程语言，认为 Rust、Ruby、Python 甚至 JavaScript 都可以编译为 WASM 字节代码。
尽管它最初是针对浏览器而设计的，但它在浏览器之外也能很好地工作。
它可以在服务器上、云端、硬件设备上运行，或者使用插件系统。
创建.wasm文件有多种方式：
我们通过以下几个例子来看下：
WAT（Wasm Text Format）是WebAssembly规范提供的一种用于定义WebAssembly模块的文本格式；它使用S表达式（S-expressions）的语法，类似于Lisp或Clojure。
例如，以下是一个简单的WAT示例，表示一个将两个数字相加的WebAssembly函数：
; 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文件
# outputs example.wasm
> wat2wasm example.wat编译产出 example.wasm 可以在任何主机执行，使用 wasmtime 命令行工具来执行
# invoke "add" function, and pass args 1,2
> wasmtime example.wasm --invoke add 1 2
3还有一种称为 AssemblyScript[4] 的高级语言；它就像是WebAssembly 的 TypeScript。
如果我们用 AssemblyScript 重写上面例子中的add()函数，它将如下所示：
// in add.ts
export function add(a: u32, b: u32): u32 {
return a + b;
}这样对比来看，更具有可读性，对前端开发来讲更友好；
然后使用AssemblyScript 的编译器asc 来编译：
pnpm install -D assemblyscript
pnpm run asc add.ts --outFile=math.wasm为了比较 AssemblyScript 和 WAT 格式，我创建了一个小工具：
https://assemblyscript-play.vercel.app
您还可以使用 CLI 工具 wasm2wat 来比较这两种格式：
# outputs .wat format
wasm2wat math.wasm就像编译 wasm 的方式有很多种一样，执行它的方法也有很多种。
要在浏览器中使用WebAssembly API，首先加载WebAssembly模块：
// fetch .wasm file
const response = fetch('/path/to/some.wasm')
// instantiate module with streaming
const module = WebAssembly.instantiateStreaming(response)然后，调用导出的add的函数：
const result = module.instance.exports.add(1, 2)还可以向模块传递其他方法，例如可以共享 console.log 方法：
// 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也可以在服务器上执行，使用的方法与在浏览器中的几乎相同。
唯一不同的是，不使用URL从服务器获取.wasm文件，而是使用 fs.readFile() 从磁盘上读取它：
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 函数：
const result = module.instance.exports.add(1, 2)还可以从许多其他编程语言中执行此操作，例如 **rust[5]、ruby[6]**、 python[7] 或来自 CLI[8] 。
WebAssembly在云端也有一些重要的应用场景。
与JavaScript云函数相比，它具备一些明显的优势：
关于WebAssembly，仍然存在一些问题：
我相信，这些大多数问题会随着时间的推移将得到解决。
在过去几年中，WebAssembly取得了许多进展。
最终，几乎所有编程语言都将具备编译到WebAssembly的能力，并提供适用于托管WebAssembly的运行时环境（如果尚未提供的话）；这将使所有编程语言都能够在浏览器、服务器甚至硬件上运行。
这也可能催生出专为适应WebAssembly主导的编程环境而设计的新型编程语言。
Copyright© 2013-2020
All Rights Reserved 京ICP备2023019179号-8