参考：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. 知其所以然~分布式事务cap

    背景 一致性是一个抽象的.具有多重含义的计算机术语,在不同应用场景下,有不同的定义和含义.在传统的IT时代,一致性通常指强一致性,强一致性通常体现在你中有我.我中有你.浑然一体:而在互联网时代,一致性 ...

  2. linux下（fdisk,gdisk,parted）三种分区工具比较

    1 2种分区结构简介 MBR分区 硬盘主引导记录MBR由4个部分组成 主引导程序(偏移地址0000H--0088H),它负责从活动分区中装载,并运行系统引导程序. 出错信息数据区,偏移地址0089H- ...

  3. Android IllegalArgumentException: Cannot draw recycled bitmaps解决方法

    在编码图集过程中,出现了Android IllegalArgumentException: Cannot draw recycled bitmaps错误. 大致意思是:不能使用已经被回收的bitmap ...

  4. Oracle学习笔记二

    多表查询: 笛卡尔积: 实际上是两张表的乘积,但是在实际开发中没有太大意义 格式: select * from 表1,表2 select * from emp; select * from dept; ...

  5. express中间件系统的基本实现

    一直觉得express的中间件系统这种流式处理非常形象,就好像加工流水线一样,每个环节都在针对同一个产品的不同部分完成自己的工作,最后得到一个成品.今天就来实现一个简易的[中间件队列]. 一. API ...

  6. 关于火狐和IE下href="javascript:void(0)"兼容性的问题

    今天在开发中发现,使用如下方式的链接.在Chrome中点击后行为符合预期,但在IE下会新开标签卡(根据参考资料,Firefox中有相同问题). 经过排查,发现是href="javascrip ...

  7. 程序员50题（JS版本）（六）

    程序26:给一个不多于5位的正整数.要求:一.求它是几位数,二.逆序打印出各位数字. var test=456; var arr=[]; arr[0]=test%10; arr[1]=parseInt ...

  8. HTML的概念和三大基石以及标准文档结构

    HTML的概念: 概念:  HTML:超文本标记语言 作用:  需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户.  在浏览器中数据需要使用友好的格式展示给用户.  HTML是告诉浏 ...

  9. vue 新版本 webpack 代理 跨域设置

    旧版本中:dev-server.js 这段去掉 var apiRoutes = express.Router() //getList apiRoutes.get('/getDiscList', fun ...

  10. 驰骋工作流引擎JFlow与activiti的对比之2种取消模式

    1. 取消模式(Cancel Activity) 就是将某个活动取消. JFLOW中,类似与删除流程操作相同. 不能删除:不允许删除. 逻辑删除:仅仅将此流程标记为删除状态,数据仍然存在节点表单与流程 ...