参考：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. 在SpringBoot中引入Redis

    前言 之前我们只是在Spring中加入Redis用于session的存放,并没有对redis进行主动的存放,这次我们需要加入redis工具类来方便我们在实际使用过程中操作redis 已经加入我的git ...

  2. XSS Stored 测试

    dvwa存储型XSS 存储型XSS:会把用户输入的数据“存储”在服务器端,一般出现在需要用户可以输入数据的地方,比如网站的留言板.评论等地方,当网站这些地方过滤不严格的时候,就会被黑客注入恶意攻击代码 ...

  3. 阿里云弹性容器实例产品 ECI ——云原生时代的基础设施

    阿里云弹性容器实例产品 ECI ——云原生时代的基础设施 1. 什么是 ECI 弹性容器实例 ECI (Elastic Container Instance) 是阿里云在云原生时代为用户提供的基础计算 ...

  4. Mybatis sql映射文件浅析 Mybatis简介（三）

    简介 除了配置相关之外,另一个核心就是SQL映射,MyBatis 的真正强大也在于它的映射语句. Mybatis创建了一套规则以XML为载体映射SQL 之前提到过,各项配置信息将Mybatis应用的整 ...

  5. 【Java入门提高篇】Day25 史上最详细的HashMap红黑树解析

    当当当当当当当,好久不见,最近又是换工作,又是换房子,忙的不可开交,断更了一小段时间,最重要的一篇迟迟出不来,每次都犹抱琵琶半遮面,想要把它用通俗易懂的方式进行说明,确实有一定的难度,可愁煞我也,但自 ...

  6. Web工作方式：浏览网页的时候发生了什么？

    原文地址:https://wizardforcel.gitbooks.io/build-web-application-with-golang/content/03.1.html 我们平时浏览网页的时 ...

  7. JQuery——选择器

    简单介绍一下什么是选择器:选择器是CSS样式中用来选择页面元素的一个特有的方式,而JQuery的选择器同样也是如此,JQuery的选择器简单的分为一下这几种:1.常用的CSS选择器 标签选择器:E{ ...

  8. MySQL 笔记整理（8.a） --事务到底是隔离还是不隔离的？

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> 8.a) --事务到底是隔离还是不隔离的? 这部分内容不太容易理解,笔者也是进行了多次阅读.因此引用原文: 之前有提到过,如果是在可 ...

  9. TCP/IP，Web世界的基本规则

    TCP/IP协议     TCP/IP 是因特网的通信协议.通信协议是对计算机必须遵守的规则的描述,只有遵守这些规则,计算机之间才能进行通信.浏览器与服务器就是通过这个协议连接在互联网上的,还有电子邮 ...

  10. Android开发过程中的坑及解决方法收录（三）

    bug:应用出现了 不幸运的,应用已停止的错误提示 排除问题: 1.intent接收数据的字符串不匹配 2.java常见的NullPointerException(空指针错误),可能由三个原因引起,字 ...