Go语言对前端领域的入侵WebAssembly运行原理

第Go语言对前端领域的入侵WebAssembly运行原理目录引言WebAssembly运行原理GoWebAssembly运行原理GoWebAssembly初体验第一步第二步第三步第四步第五步Javascript真的需要担心GoWebAssembly的威胁么？

引言

从Go语言诞生以来，它就开始不断侵蚀Java、C、C++语言的领地。今年下半年Go语言发布了1.11版本，引入了WebAssembly技术，浏览器端Javascript的垄断地位也开始遭遇Go语言的攻击。这次不同以往，它意味着Go语言从后端渗透进了前端，进入了一个全新的世界。

WebAssembly运行原理

WebAssembly这个名字翻译过来就是「Web汇编」，也就是Web端的汇编语言。它是一段二进制字节码程序，Javascript可以将这段二进制程序编译成模块，然后再实例化这个模块就可以调用字节码逻辑了。WebAssembly代码运行的速度很快，比Javascript要快很多，Javascript可以通过WebAssembly技术将关键性耗费性能的逻辑交给WebAssembly来做就可以明显提升浏览器端的性能。

对比显示，使用WebAssembly运行斐波那契数列相比使用原生Javascript来实现，运行效率上能带来3.5倍的提升。

WebAssembly是一项比较新的技术，只有比较现代的浏览器才支持WebAssembly，例如Chrome、FireFox浏览器。

GoWebAssembly运行原理

Go编译器可以将代码编译成WebAssembly二进制字节码，被浏览器以静态资源的形式加载进来后转换成Javascript模块。有了这个模块，浏览器可以直接操纵Go语言生成的二进制字节码逻辑。同时在Go语言编写的代码中可以直接读写浏览器里面Javascript运行时对象，这样就完成了Javascript和Go代码的双向交互。

Go语言直到1.11版本之后才开启了对WebAssembly的支持。如需体验，必须升级。

GoWebAssembly初体验

下面我们就开始体验一下Chrome浏览器与Go代码是如何交互的。我们要实现一个功能，在浏览器的输入框里输入一个正整数，然后调用Go代码的斐波那契数列，再将结果再呈现在页面上。涉及到4个文件，分别是fib.go、main.go、index.html、wasm_exec.js。

第一步

使用Go代码编写WebAssembly模块文件fib.go，将Go语言实现的斐波那契函数注册到Javascript全局环境。这需要使用内置的syscall/js模块，它提供了和Javascript引擎交互的接口。

//fib.go

packagemain

import"syscall/js"

funcmain(){

f_fib:=func(params[]js.Value){

varn=params[0].Int()//输入参数

varcallback=params[1]//回调参数

varresult=fib(n)

//调用回调函数，传入计算结果

callback.Invoke(result)

//注册全局函数

js.Global().Set("fib",js.NewCallback(f_fib))

//保持main函数持续运行

select{}

//计算斐波那契数

funcfib(nint)int{

ifn=0{

return0

varresult=make([]int,n+1)

result[0]=0

result[1]=1

ifn=1{

returnresult[n]

fori:=2;ii++{

result[i]=result[i-2]+result[i-1]

returnresult[n]

Go语言注册到Javascript引擎的函数在执行时是异步的，所以这个函数没有返回值，在完成计算后需要通过调用「传进来的回调函数」将结果传递到Javascript引擎。注意main函数要保持运行状态不要退出，不然注册进去的fib函数体就销毁了。

第二步

下面将Go代码编译成WebAssembly二进制字节码。

$GOARCH=wasmGOOS=jsgobuild-ofib.wasmfib.go

执行完成后可以看到目录下多了一个fib.wasm，这个就是字节码文件。它的大小是1.3M，作为静态文件传递到浏览器似乎有点大，不过静态文件服务器一般有gzip压缩，压缩后的大小只有几百K，这差不多也可以接受了。

第三步

编写网页文件index.html，这个网页包含两个输入框，第一个输入框用来输入整数参数，第二个输入框用来呈现计算结果。当第一个输入框内容发生改变时，调用javascript代码，执行通过WebAssembly注册的fib函数。需要传入参数n和回调的函数。

html

head

metacharset="utf-8"

titleGowasm/title

/head

style

body{

text-align:center

input{

height:50px;

font-size:20px;

#result{

margin-left:20px;

/style

body

scriptsrc="wasm_exec.js"/script

script

//容纳WebAssembly模块的容器

vargo=newGo();

//下载WebAssembly模块并执行模块

//也就是运行Go代码里面的main函数

//这样fib函数就注册进了Javascript全局环境

WebAssembly.instantiateStreaming(fetch("fib.wasm"),go.importObject).then((result)={

go.run(result.instance);

functioncallFib(){

letparamInput=document.getElementById("param")

letn=parseInt(paramInput.value||"0")

//传入输入参数和回调函数

//回调函数负责呈现结果

fib(n,function(result){

varresultDom=document.getElementById("result")

resultDom.value=result

/script

//输入发生变化时，调用WebAssembly的fib函数

inputtype="number"id="param"oninput="callFib()"/

inputtype="text"id="result"/

/body

/html

注意代码中引入了一个特殊的js文件wasm_exec.js，这个文件可以从Go安装目录的misc子目录里找到，将它直接拷贝过来。它实现了和WebAssembly模块交互的功能。

第四步

运行静态文件服务器，这里不能使用普通的静态文件服务器，因为浏览器要求请求到的WebAssemly字节码文件的Content-Type必须是application/wasm，很多静态文件服务器并不会因为扩展名是wasm就会自动使用这个Content-Type。但是Go内置的HTTP服务器可以。所以下面我们使用Go代码简单编写一个静态文件服务器。

packagemain

import(

"log"

"net/http"

funcmain(){

mux:=http.NewServeMux()

mux.Handle("/",http.FileServer(http.Dir(".")))

log.Fatal(http.ListenAndServe(":8000",mux))

使用下面的命令运行它

$gorunmain.go

第五步

打开浏览器，访问http://localhost:8000，现在就可以体验它的运行效果了。

Javascript真的需要担心GoWebAssembly的威胁么？

其实根本不用担心，WebAssembly的目的是替换前端运行比较耗时的逻辑，不是用来替换前端框架的，它也替换不了。虽然开源社区冒出了一个/elliotforbe的GoWebAssembly框架，可以让你使用Go语言编写前端应用程序。但是我仔细看了一下它的的源码，发现它原来只是一个玩具^_^，实现上没几行代码，离真实的应用程序差距太远。

如果GoWebAssembly对javascript是个威胁，那么威胁javascript的可不止Go语言了，能够将代码编译成WebAssembly字