参考：https://blog.csdn.net/csdnnews/article/details/84038848

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

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

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

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

第一步

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

// fib.go

package main

import "syscall/js"

func main() {

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

        var n = params[].Int()  // 输入参数

        var callback = params[] // 回调参数

        var result = fib(n)

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

        callback.Invoke(result)

    }

    // 注册全局函数

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

    // 保持 main 函数持续运行

    select {}

}

// 计算斐波那契数

func fib(n int) int {

    if n <=  {

        return

    }

    var result = make([]int, n+)

    result[] =

    result[] =

    if n <=  {

        return result[n]

    }

    for i := ; i <= n; i++ {

        result[i] = result[i-] + result[i-]

    }

    return result[n]

}

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

第二步

下面将 Go 代码编译成 WebAssembly 二进制字节码。(我的是windows)

set GOARCH=wasmset GOOS=js

go build -o fib.wasm fib.go

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

第三步

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

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="expires" content="">

    <title>Go wasm</title>

</head>

<style>

body {

    text-align: center

}

input {

    height: 50px;

    font-size: 20px;

}

#result {

    margin-left: 20px;

}

</style>

<body>

    <script src="wasm_exec.js"></script>

    <script>

        // 容纳 WebAssembly 模块的容器

        var go = new Go();

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

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

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

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

            go.run(result.instance);

        });

        function callFib() {

            let paramInput = document.getElementById("param")

            let n = parseInt(paramInput.value || "")

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

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

            fib(n, function(result) {

                var resultDom = document.getElementById("result")

                resultDom.value = result

            })

        }

    </script>

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

    <input type="number" id="param" oninput="callFib()"/>

    <input type="text" id="result" />

</body>

</html>

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

第四步

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

package main

import (

    "log"

    "net/http"

)

func main() {

    mux := http.NewServeMux()

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

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

}

现在在项目目录下有四个文件：main.go、index.html、fib.wasm、wasm_exec.js

用以下命令编译运行:

go run main.go

第五步

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

Javascript 真的需要担心 Go WebAssembly 的威胁么？

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

如果 Go WebAssembly 对 Javascript 是个威胁，那么威胁 Javascript 的可不止 Go 语言了，能够将代码编译成 WebAssembly 字节码的语言多达几十种。

希望将当前 Javascript 项目的部分代码替换成 Go 语言，成本也是显而易见的。技术栈的切换成本，字节码的加载成本，框架项目持续集成的成本都是需要考虑的点。除非能获得巨大的性能提升，否则使用纯粹的 Javascript 来完成项目依然是最佳选择。

原作者简介：老钱，著有《Redis 深度历险》《深入理解 RPC》《快学 Go 语言》。

熟练使用 Java、Python、Golang 等多种计算机语言，开发过游戏，制作过网站，写过消息推送系统和 MySQL 中间件，实现过开源的 ORM 框架、Web 框架、RPC 框架等，目前任职掌阅服务端技术专家。

不安分的 Go 语言开始入侵 Web 前端领域了！（ WebAssembly ）的更多相关文章

  1. Web前端开发推荐阅读书籍

    前言 前端工程师在中国兴起也就5年左右,以前公司里没有专门前端工程师的这个职位,很多前端方面的任务都是由全栈工程师来完成,有的基础一点的后台或者设计的帮助分担一些.但是随着互联网的快速发展,特别是所谓 ...

  2. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  3. 淘宝前端工程师：国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  4. Web前端开发十日谈

    =========================================================================== 原文章: http://kb.cnblogs.c ...

  5. 绝对精品推荐做前端的看下：Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  6. web前端工程师入门须知

    本文是写给那些想要入门web前端工程的初学者,高手请路过,也欢迎高手们拍砖. 先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做w ...

  7. 小白到web前端工程师需要学习哪些知识？

    随着web3.0时代,那么web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多.那么,如何学习web前端知识?从哪开始?转型成为we ...

  8. 零基础转行web前端，要学习多久？需要掌握些什么？

    web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多.那么,如何学习web前端知识?从哪开始?转型成为web前端工程师需要学些什么? ...

  9. WEB前端开发职业学习路线初级完整版

    作者 | Jeskson 来源 | 达达前端小酒馆 下面小编专门为广大web前端开发职业者汇总了学习路线初级完整版,其实web前端开发工程师可算是高福利,高薪水的职业了,所以现在学习web前端开发的技 ...

随机推荐

  1. Chapter 5 Blood Type——14

    "You're wrong." His voice was almost inaudible. “你错了.” 他的声音几乎听不见 He looked down, stealing ...

  2. 按行切割大文件（linux split 命令简版）

    按行切割大文件(linux split 命令简版) #-*- coding:utf-8 -*- __author__ = 'KnowLifeDeath' ''' Linux上Split命令可以方便对大 ...

  3. 基于hashicorp/raft的分布式一致性实战教学

    本文由云+社区发表 作者:Super 导语:hashicorp/raft是raft算法的一种比较流行的golang实现,基于它能够比较方便的构建具有强一致性的分布式系统.本文通过实现一个简单的分布式缓 ...

  4. [Redux] redux之combineReducers

    combineReducers combineReducer 是将众多的 reducer 合成通过键值映射的对象,并且返回一个 combination 函数传入到 createStore 中 合并后的 ...

  5. selenium加载配置参数，让chrome浏览器不出现‘Chrome正在受到自动软件的控制’的提示语，以及后台静默模式启动自动化测试，不占用桌面的方法

    一:自动化测试的时候,启动浏览器出现‘Chrome正在受到自动软件的控制’,怎么样隐藏,今天学习分享: 在浏览器配置里加个参数,忽略掉这个警告提示语,disable_infobars option = ...

  6. javascript基础修炼(7)——Promise，异步，可靠性

    开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 别人是开发者,你也是 Promise技术是[javascript异步编程]这个话题中非常重要的,它一度让我感到熟悉 ...

  7. nginx错误界面优化和日志管理

    nginx错误界面优化 在进行web访问的时候,经常会遇到网站打不开报错的情况,nginx默认的界面并不美观,我们可以通过重定向到自定义的错误页面,提升用户体验,比如淘宝的错误页面还有商品信息和广告. ...

  8. 第一册：lesson 111.

    原文:The most expensive model. question:Can Mr.Frith buy the television on instalments? How does it wo ...

  9. C++系列总结——new和delete

    前言 "new和malloc()有什么区别",这是一个很常见的C++面试题.我的回答是"new等于malloc()后再选择性执行构造函数".执行流程上是这样的, ...

  10. Mybatis框架基础支持层——反射工具箱之泛型解析工具TypeParameterResolver（4）

    简介:TypeParameterResolver是一个工具类,提供一系列的静态方法,去解析类中的字段.方法返回值.方法参数的类型. 在正式介绍TypeParameterResolver之前,先介绍一个 ...