标签： WebAssembly

go WebAssembly初体验

WebAssembly是一门新的浏览器技术。可以取代一部分js的角色，并且从性能上来说，要比js好很多。WebAssembly目前还处于早期的发展阶段，仍然不够成熟。go语言对WebAssembly的支持也是在1.11版本上刚刚加入。虽然不能投入生产环境，但是可以用来做一些很有意思的事情。

官方WebAssembly的文档：https://github.com/golang/go/wiki/WebAssembly。详细的介绍可以看官方的文档。

一个go WebAssembly的例子

main.go

package main

import "fmt"

func main() {
    fmt.Println("hello WebAssembly")
}

编译这个go文件: GOOS=js GOARCH=wasm go build -o main.wasm main.go

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Go wasm</title>
</head>
<body>
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(
            fetch("main.wasm"),go.importObject).then((result) => {
            go.run(result.instance)
        });

    </script>
</body>
</html>

这里还需要一个wasm_exec.js。这个文件是官方提供的，可以理解为是go编译出来的二进制文件和js间的连接桥梁。这个时候打开浏览器，可以看到控制台下有：hello WebAssembly。

需要说明的是，在go里面的所有STDOUT，都会在浏览器的控制台打印出来。

wasm的初始化过程

WebAssembly.instantiateStreaming(fetch("main.wasm"),go.importObject)。浏览器执行这样一段代码来加载main.wasm，并返回一个Promise对象。在加载完毕之后，调用go.run(result.instance)来执行wasm中的代码。

加载一个wasm文件就是这样的简单。

go WebAssembly如何和js交互

上面的例子非常简单。但是WebAssembly技术绝非这样简单。我们可以在go中轻松的调用js中的方法。比如下面这句话：

js.Global().Get("document").Call("getElementById", "maxCubes").Set("value", 256)

相当于js中的

document.getElementById("maxCubes).setAttribute('value', 256)

同样的，我们也可以在go中定义js方法，这样就可以在js中直接调用了。

api.onMemInitCb = js.NewCallback(func(args []js.Value) {
        length := args[0].Int()
        api.console.Call("log", "length", length) // 调用js的console.log("length", length)
        api.inBuf = make([]uint8, length)
        // 拿到这个slice的SliceHeader
        hdr := (*reflect.SliceHeader)(unsafe.Pointer(&api.inBuf))
        ptr := uintptr(unsafe.Pointer(hdr.Data))

        api.console.Call("log", "ptr:", ptr)
        js.Global().Call("gotMem", ptr)

        fmt.Println("初始化Mem成功")
    })

js.Global().Set("initMem", api.onMemInitCb)

这样，我们就可以在js中直接使用initMem方法了。这样子，就相当于打通了go和js之间的通道，使得go WebAssembly几乎无所不能。

go和js之间如何通过内存传值。

这个部分是我在看go WebAssembly部分时最关注的。因为大多数时候，我们传参都不仅仅是256这样的字面值。比如我们在做图片处理的时候，浏览器加载图片后传给wasm去处理，这种时候传递的肯定是一个指向一段内存的指针。

go代码中：

api.onMemInitCb = js.NewCallback(func(args []js.Value) {
    length := args[0].Int()
    api.console.Call("log", "length", length) // 调用js的console.log("length", length)
    api.inBuf = make([]uint8, length)
    // 拿到这个slice的SliceHeader
    hdr := (*reflect.SliceHeader)(unsafe.Pointer(&api.inBuf))
    ptr := uintptr(unsafe.Pointer(hdr.Data))

    api.console.Call("log", "ptr:", ptr)
    js.Global().Call("gotMem", ptr)

    fmt.Println("初始化Mem成功")
})

js代码中：

function gotMem(pointer) {

    console.log("pointer", pointer)

    memoryBytes.set(bytes, pointer);
    // Now the image can be loaded from the slice.

    console.log("load image")
    loadImage();
}

......

let reader = new FileReader();
reader.onload = (ev) => {
    bytes = new Uint8Array(ev.target.result);
    initMem(bytes.length);
    let blob = new Blob([bytes], {'type': imageType});
    document.getElementById("sourceImg").src = URL.createObjectURL(blob);
};
imageType = this.files[0].type;
reader.readAsArrayBuffer(this.files[0]);

上面有两段代码，js部分代码是在加载一张图片，然后转换为Uint8Array数组bytes，然后调用initMem方法，传递一个数组bytes的长度作为参数。而initMem是在go代码中定义的，initMem负责调用make([]uint8, length)去初始化需要的内存。然后通过一系列的转换获得申请的内存区域的指针ptr。然后调用js的gotMem将这个ptr传递给js代码。在gotMem中，memoryBytes.set(bytes, pointer)这句代码初始化了这块内存。

这里值得指出的是，memoryBytes是一段在wasm初始化时申请的内存，保存在一个Uint8Array数组中。如果我们打印出来的话，可以发现这段内存有1G。然后我们的go代码中调用make([]uint8, length)申请一块内存时，其实是在这段内存中申请的。比如说申请的区域为201883648~(201883648+107003)。我们只要在js中向memoryBytes的数组中给这块区域赋值，就把值传递给go的对象了。

再考虑一个问题。1G的初始化内存是不是太大了？这个内存是在编译go代码时由编译工具指定的。但是如果我们使用浏览器（比如chrome)的任务管理器查看这个窗口的占用内存时就会发现，实际占用并不会这么大。

在我的理解中（并不一定正确），这和C语言的malloc类似。malloc可以申请大于物理内存的虚拟内存，但是只要你不实际占用这么大内存，是不会有问题的。所以虽然go WebAssembly打印出来有1G的初始化内存，但是如果不是真的会使用，是不会占用这么大物理内存的。

关于初始化内存过大的问题，可以参考这个issues:cmd/compile: wasm code causes out of memory error on Chrome and Firefox for Android

一些关于WebAssembly内存的设计：Finer-grained control over memory

一个用go WebAssembly实现中位切分法处理图片的例子

关于中切分法可以参考我之前的这篇文章：中位切分法颜色量化

可以在这个地址进行预览: 预览地址

在浏览器中运行的效果(这里只展示了FastMap的效果，BestMap会好很多）：

fastmap

代码的github地址是:WebAssembly-MedianCut

里面大多数的代码都是用的我之前的代码。可见go WebAssembly还可以非常舒服的复用之前的代码。