参考：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. 一文看懂https如何保证数据传输的安全性的

    通过漫画的形式由浅入深带你读懂htts是如何保证一台主机把数据安全发给另一台主机的 对称加密 一禅:在每次发送真实数据之前,服务器先生成一把密钥,然后先把密钥传输给客户端.之后服务器给客户端发送真实数 ...

  2. TCP/IP 四次断开

    网络连接状态 网络连接状态(11种)非常重要这里既包含三次握手中的也包括四次断开中的,所以要熟悉. LISTEN 被动打开,首先服务器需要打开一个socket进行监听,监听来自远方TCP端口的连接请求 ...

  3. 如何在React项目中直接使用WebAssembly

    前言 自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子.即使有,我自己按照介绍的步骤一步一步来, 也会报各种错误,官 ...

  4. golang - gob与rpc

    今天和大家聊聊golang中怎么使用rpc,rpc数据传输会涉及到gob编码,所以先讲讲gob,别担心,就算你完全没有接触过gob与rpc,只要知道rpc的中文是远程过程调用,剩下的我都能给你讲明白( ...

  5. .net core EFCore CodeFirst 迁移出现错误【No project was found. Change the current working directory or use the --project option. 】

    PM> dotnet ef Migrations add Init No project was found. Change the current working directory or u ...

  6. @Html.DropDownListFor 下拉框绑定（选择默认值）

    首先先构建绑定下拉框的数据源 private void GetSalesList() { var userList = _rmaExpressAppService.GetUserList(); Tem ...

  7. 理解PHP的垃圾回收机制

    什么是垃圾回收机制 使用的是“引用计数”方式进行回收.简单地理解的话,就是每个分配的内存区域都有一个计数器,记录有多少个变量指针指向这片内存.当指向该片内存的指针数量为0,那么该片内存区域就可以被回收 ...

  8. JDK8新特性：default方法的应用实践

    背景: 最近维护一个老旧工程,遇到集团层面的数据安全改造,需要在DAO层做加解密改造.而这个老旧工程的DAO层是用的JdbcTemplate实现的,尽管template方式实现起来可自由发挥的空间很大 ...

  9. Fundebug前端JavaScript插件更新至1.6.0，新增test()方法用于测试

    摘要: 1.6.0新增fundebug.test()方法用于测试,请大家及时更新. 默认情况下,Fundebug 插件能够自动捕获未处理的错误(uncaught error).另外,开发者也可以通过使 ...

  10. CSS常见的中属性级，选择符级的Hack

    注意:尽量找到通用方法而减少对CSS Hack的使用,大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题. 星号 * 针对IE6,7:下划线 _ 针对ie ...