大家好，我是煎魚。

最近因?yàn)楦鞣N奇怪的原因，更多的接觸到了 WebAssembly。雖然之前很多博客也翻過(guò)寫過(guò)各種文章，但總感覺(jué)欠些味道。于是今天梳理了一版，和大家一起展開(kāi)學(xué)習(xí)。

先來(lái)一張經(jīng)典圖：

WebAssembly 是什么

以下是 Mozilla 在 MDN 上給出的定義：

WebAssembly（縮寫：Wasm）是一種新的編碼方式，可以在現(xiàn)代的網(wǎng)絡(luò)瀏覽器中運(yùn)行 － 它是一種低級(jí)的類匯編語(yǔ)言，具有緊湊的二進(jìn)制格式，可以接近原生的性能運(yùn)行，并為諸如 C/C++ 等語(yǔ)言提供一個(gè)編譯目標(biāo)，以便它們可以在 Web 上運(yùn)行。它也被設(shè)計(jì)為可以與 JavaScript 共存，允許兩者一起工作。

Wasm 官網(wǎng)自己挑出的重點(diǎn)是：

• 是一種基于堆棧的虛擬機(jī)的二進(jìn)制指令格式。
• 被設(shè)計(jì)為編程語(yǔ)言的可移植編譯目標(biāo)。
• 能夠在網(wǎng)絡(luò)上部署客戶端和服務(wù)器應(yīng)用程序。

新編碼方式，可以在瀏覽器中運(yùn)行。可以以接近原生的性能運(yùn)行?？梢钥缯Z(yǔ)言，例如：C/C++；可以與 JavaScript 共存。

看著是一個(gè)不錯(cuò)的可跨平臺(tái)運(yùn)行的新玩具。

由哪家研發(fā)

最早 WebAssembly1.0 基于 asm.js（Javascript 的嚴(yán)格子集，靜態(tài)類型，取消垃圾回收機(jī)制等）的特性集實(shí)現(xiàn)。隨后的 WebAssembly2.0 又根據(jù)新的標(biāo)準(zhǔn)進(jìn)行了進(jìn)一步的延伸和開(kāi)發(fā)。

WebAssembly 的開(kāi)發(fā)團(tuán)隊(duì)分別來(lái)自 Mozilla、Google、Microsoft、Apple，代表著四大網(wǎng)絡(luò)瀏覽器 Firefox、Chrome、Microsoft Edge、Safari。

一些重要的時(shí)間線：

• 2015 年 WebAssembly 首次發(fā)布，在上述四大瀏覽器中進(jìn)行了 Unity 的 Angry Bots（憤怒的機(jī)器人）的演示。
• 2017 年 3 月，首次發(fā)布 WebAssembly MVP 版本，預(yù)覽版本結(jié)束，正式進(jìn)行發(fā)布，可以理解為 1.0。
• 2018 年 2 月，WebAssembly 工作組（WebAssembly Working Group）發(fā)布了核心規(guī)范、JavaScript 接口和 Web API 的三個(gè)公開(kāi)工作草案。
• 2019 年，Chrome 75 發(fā)布，默認(rèn)啟用 WebAssembly 線程。
• 2022 年 6 月，開(kāi)始發(fā)布 WebAssembly 2.0。

幾家大廠派人一起做的，比較新，近幾年才開(kāi)始更多的被支持。當(dāng)前還在 WebAssembly 2.0 的階段，還在發(fā)展階段。

1.0 和 2.0 區(qū)別之一

直觀上來(lái)看，1.0 和 2.0 最大的區(qū)別在于：

• 1.0 主要目標(biāo)是在所有主要瀏覽器中能運(yùn)行 WebAssembly。根據(jù)統(tǒng)一截至 2022 年 10 月 ，96% 的已安裝瀏覽器支持 WebAssembly（1.0 版），基本實(shí)現(xiàn)了全覆蓋。
• 讓 WebAssembly 煥發(fā)第二春（2.0）的：可以借助 WASI（WebAssembly System Interfac） 的模塊化系統(tǒng)接口，能夠借此中間產(chǎn)物 .wasm 實(shí)現(xiàn)各語(yǔ)言的集合和互相集成。

WebAssembly 2.0 起，邊界更大了，目標(biāo)完全就是可移植、安全的高級(jí)語(yǔ)言。期望應(yīng)用于瀏覽器、各編程語(yǔ)言、各系統(tǒng)中。

大有一個(gè) JVM 的感覺(jué)：

Go 快速上手

在我們快速了解了 WebAssembly 的背景后。我們落到實(shí)處，看看 Go 語(yǔ)言的 WebAssembly 情況如何，又是如何使用。

Go 目前有兩種使用 WebAssembly 的方式，第一種是使用 syscall/js 標(biāo)準(zhǔn)庫(kù)，四舍五入算勉強(qiáng)支持了 WebAssembly 1.0。

代碼如下：

package main

import "syscall/js"

func main() {
 alert := js.Global().Get("alert")
 alert.Invoke("腦子進(jìn)煎魚了！")
}

編譯命令：

$ GOOS=js GOARCH=wasm go build -o jianyu.wasm

再使用 JS 中對(duì)應(yīng) WebAssembly 的調(diào)用就可以了。

第二種使用方式，是使用開(kāi)源庫(kù) tinygo-org/tinygo[1]，其基于 LLM，支持了 WebAssembly1.0/2.0 (WASM/WASI)。

tinygo brew 安裝方式：

$ brew tap tinygo-org/tools
$ brew install tinygo

如果安裝成功，執(zhí)行 tinygo version 就可以看到版本信息。

Go wasm 代碼如下：

import (
 figure "github.com/common-nighthawk/go-figure"
)

//export HelloWorld
func HelloWorld() {
 myFigure := figure.NewFigure("Hello World", "", true)
 myFigure.Print()
}

func main() {}

編譯命令：

tinygo build -o module.wasm -target wasi .

運(yùn)行成功后，將會(huì)在對(duì)應(yīng)目錄編譯出 module.wasm 二進(jìn)制文件，可以由其他的平臺(tái)、語(yǔ)言進(jìn)行使用。

如果你希望在 Go 或其他語(yǔ)言中調(diào)用所生成的 .wasm，需要找到對(duì)應(yīng)符合 WASI 的庫(kù)和規(guī)則。

下面是 Go wasmer-go 調(diào)用 .wasm 的代碼：

import (
 "fmt"
 "io/ioutil"

 wasmer "github.com/wasmerio/wasmer-go/wasmer"
)

func main() {
 wasmBytes, _ := ioutil.ReadFile("module.wasm")

 store := wasmer.NewStore(wasmer.NewEngine())
 module, _ := wasmer.NewModule(store, wasmBytes)

 wasiEnv, _ := wasmer.NewWasiStateBuilder("wasi-program").
  // Choose according to your actual situation
  // Argument("--foo").
  // Environment("ABC", "DEF").
  // MapDirectory("./", ".").
  Finalize()
 importObject, err := wasiEnv.GenerateImportObject(store, module)
 check(err)

 instance, err := wasmer.NewInstance(module, importObject)
 check(err)

 start, err := instance.Exports.GetWasiStartFunction()
 check(err)
 start()

 HelloWorld, err := instance.Exports.GetFunction("HelloWorld")
 check(err)
 result, _ := HelloWorld()
 fmt.Println(result)
}

func check(e error) {
 if e != nil {
  panic(e)
 }
}

運(yùn)行成功后會(huì)輸出 “Hello World”。

Go 標(biāo)準(zhǔn)庫(kù) syscall/js 標(biāo)準(zhǔn)庫(kù)只支持 WebAssembly1.0，只能應(yīng)用于 JS 相關(guān)的場(chǎng)景，并不能被其他語(yǔ)言所集成。

其中 tinygo 實(shí)現(xiàn)了 WASI，借助 WASI 這一標(biāo)準(zhǔn)接口與其他平臺(tái)語(yǔ)言互相集成。但 tinygo 并沒(méi)有支持所有的 Go 語(yǔ)法特性，具體可以查看 Go language features[2]。

這塊需要特別注意，不同語(yǔ)言對(duì) WebAssembly（WASI）的支持程度均不一樣。

其他應(yīng)用場(chǎng)景

帶火 WebAssembly 的還有一個(gè)重要的因素，那就是在各種云原生的組件上都可以集成和使用，進(jìn)一步延伸了場(chǎng)景。

例如在 Envoy 和 Istio 上，可以使用 wasm 很方便的將自定義 filter 集成到 Envoy 中，實(shí)現(xiàn) Envoy 代理的功能增強(qiáng)。

總結(jié)

今天我們快速的對(duì) WebAssembly 進(jìn)行了背景了解、Go 快速上手、擴(kuò)展場(chǎng)景了解等。雖然 WebAssembly 是一個(gè)新輪子，也號(hào)稱可以借助 WASI 集成和被集成。

但實(shí)際上現(xiàn)在各語(yǔ)言對(duì) WebAssembly 的支持程度都不一樣，像 Go 官方自己提供的標(biāo)準(zhǔn)庫(kù)就維護(hù)的不怎么樣，WASI 的 issues 也沒(méi)有繼續(xù)推進(jìn)。

甚至在其他語(yǔ)言的互通，現(xiàn)在仍然有著或多或少會(huì)導(dǎo)致阻塞無(wú)法應(yīng)用的問(wèn)題?？赡?，還需要再過(guò)個(gè) 3~5 年？

但如此多語(yǔ)言的庫(kù)維護(hù)，能否長(zhǎng)久的迭代和維護(hù)。也是一個(gè)更大的問(wèn)題。

參考資料

[1]tinygo-org/tinygo: https://github.com/tinygo-org/tinygo

[2]Go language features: https://tinygo.org/docs/reference/lang-support/

網(wǎng)頁(yè)標(biāo)題：一分鐘搞明白！快速掌握GoWebAssembly
網(wǎng)站URL：http://uogjgqi.cn/article/dhodhoo.html