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

目录
  • 引言
  • WebAssembly 运行原理
  • Go WebAssembly 运行原理
  • Go WebAssembly 初体验
    • 第一步
    • 第二步
    • 第三步
    • 第四步
    • 第五步
  • Javascript 真的需要担心 Go WebAssembly 的威胁么？

引言

从 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浏览器。

Go WebAssembly 运行原理

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

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

Go WebAssembly 初体验

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

第一步

使用 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[0].Int() // 输入参数
		var callback = params[1] // 回调参数
		var result = fib(n)
		// 调用回调函数，传入计算结果
		callback.Invoke(result)
	}
	// 注册全局函数
	js.Global().Set("fib", js.NewCallback(f_fib))
	// 保持 main 函数持续运行
        select {}
}
// 计算斐波那契数
func fib(n int) int {
        if n <= 0 {
          return 0
        }
	var result = make([]int, n+1)
	result[0] = 0
	result[1] = 1
	if n <= 1 {
		return result[n]
	}
	for i:=2;i<=n;i++ {
		result[i] = result[i-2] + result[i-1]
	}
	return result[n]
}

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

第二步

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

$ GOARCH=wasm 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">
	<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 || "0")
		// 传入输入参数和回调函数
                // 回调函数负责呈现结果
                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))
}

使用下面的命令运行它

$ go run main.go

第五步

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

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

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

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

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

以上就是Go语言对前端领域的入侵WebAssembly运行原理的详细内容，更多关于Go WebAssembly运行原理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Go语言使用Request，Response处理web页面请求

    Go语言使用Request，Response处理web页面请求

    Go语言处理web页面请求 Request和Response http Requset和Response的内容包括以下几项: Request or response line Zero or more headers An empty line, followed by … … an optional message body 例如一个http Request: GET /Protocols/rfc2616/rfc2616.html HTTP/1.1 Host: www.w3.org User-

  • 解决Golang在Web开发时前端莫名出现的空白换行

    解决Golang在Web开发时前端莫名出现的空白换行

    问题: 在使用Golang做Web开发时,有时候渲染出来的模板在前台显示时会出现一些奇怪的空白换行,具体特征就是查看css样式表并没有相关定义的空白部分. 分析: 查看出现问题页面的网页源代码,复制空白换行部分转码为Unicode编码,发现其中包含了\u2028这样的字符[图一].  [图一] 另外,直接在浏览器检查里边的html选择Edit as html,也可发现在空白处存在小红点,鼠标移上会直接显示该字符是\u2028[图二].查阅资料发现,这样的换行符在JavaScript中并不支持.

  • Golang+Vue轻松构建Web应用的方法步骤

    Golang+Vue轻松构建Web应用的方法步骤

    目录 介绍 项目结构 后端结构 前端结构 一些细节 为什么使用JWT 缓存实现 请求限流 从零开发前端 运行 总结 最近疫情在家,空闲时间比较多,整理下之前写的Golang项目Weave,补充了一些功能,加了前端实现.作为一个Web应用模板,也算是功能比较齐全了,现将开发过程中遇到的一些问题.项目特性总结下. 介绍 Weave是一个基于Go+Vue实现的Web应用模板,支持前后端,拥有完整的认证.存储.Restful API等功能. 后端基于Golang开发,主要特性如下: Restful AP

  • Go语言开发浏览器视频流rtsp转webrtc播放

    Go语言开发浏览器视频流rtsp转webrtc播放

    目录 1. 前言 2. rtsp转webRTC 3. 初步测试结果 4. 结合我们之前的onvif+gSoap+cgo的方案做修改 4.1 go后端修改 4.2 前端修改 4.3 项目结构和编译运行 4.4 结果展示 5. 最后 1. 前言 前面我们测试了rtsp转hls方式,发现延迟比较大,不太适合我们的使用需求.接下来我们试一下webrtc的方式看下使用情况. 综合考虑下来,我们最好能找到一个go作为后端,前端兼容性较好的前后端方案来处理webrtc,这样我们就可以结合我们之前的cgo+on

  • 使用Golang搭建web服务的实现步骤

    使用Golang搭建web服务的实现步骤

    如何用golang搭建一个web服务呢?菜鸟官网的go web编程教程已经介绍了web服务器的工作原理,这里就不赘述了. 我们先看个例子:http.go package main import ( "fmt" "io" "log" "net/http" ) func main() { http.HandleFunc("/test", doRequest) // 设置访问路由 err := http.List

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

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

    目录 引言 WebAssembly 运行原理 Go WebAssembly 运行原理 Go WebAssembly 初体验 第一步 第二步 第三步 第四步 第五步 Javascript 真的需要担心 Go WebAssembly 的威胁么? 引言 从 Go 语言诞生以来,它就开始不断侵蚀 Java .C.C++ 语言的领地.今年下半年 Go 语言发布了 1.11 版本,引入了 WebAssembly 技术,浏览器端 Javascript 的垄断地位也开始遭遇 Go 语言的攻击.这次不同以往,它意

  • 浅析前端路由简介以及vue-router实现原理

    路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口(或443)有请求过来,并解析url路径 根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等) 浏览器根据数据包的 Content-Type 来决定如何解析数据 简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中

  • JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    本文实例讲述了JS前端面试必备--基本排序算法原理与实现方法.分享给大家供大家参考,具体如下: 排序算法是面试及笔试中必考点,本文通过动画方式演示,通过实例讲解,最后给出JavaScript版的排序算法 插入排序 算法描述: 1. 从第一个元素开始,该元素可以认为已经被排序 2. 取出下一个元素,在已经排序的元素序列中从后向前扫描 3. 如果该元素(已排序)大于新元素,将该元素移到下一位置 4. 重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置 5. 将新元素插入到该位置后 6. 重复

  • C 语言实现一个简单的 web 服务器的原理解析

    说到 web 服务器想必大多数人首先想到的协议是 http,那么 http 之下则是 tcp,本篇文章将通过 tcp 来实现一个简单的 web 服务器. 本篇文章将着重讲解如何实现,对于 http 与 tcp 的概念本篇将不过多讲解. 一.了解 Socket 及 web 服务工作原理 既然是基于 tcp 实现 web 服务器,很多学习 C 语言的小伙伴可能会很快的想到套接字 socket.socket 是一个较为抽象的通信进程,或者说是主机与主机进行信息交互的一种抽象.socket 可以将数据流

  • 前端 JavaScript运行原理

    前端 JavaScript运行原理

    目录 1.什么是JavaScript引擎 2.V8引擎 3.运行时环境 4.运行时的调用栈 5.异步任务 6.总结 1.什么是JavaScript引擎 JavaScript引擎是一个计算机程序,它的主要作用是JavaScript运行时将源码编译为机器码. 每个主流Web浏览器都有自己的JavaScript引擎,它通常由web浏览器供应商开发. Google Chrome V8. Mozilla Firefox Spider Monkey. Safari Javascript Core Webki

  • 易语言编程新手第一课安装及运行

    易语言编程新手第一课安装及运行

    目录 易语言安装环境 使用易语言 编译一个简单的易语言 易语言安装环境 要学习易语言那么首先要有编译环境, 以下是易语言 的下载地址 注释:此平台要六百多元购买正版 http://www.dywt.com.cn/ 也可以下载破解版但是我不推荐,我买的正版 我的教书先生有破解版的过一段时间我会将盗版下载地址发给你们 下载完之后软件的样子是成下图正上方 使用易语言 进入软件 点击程序按钮.如下图 然后再点击建新,如下图 然后点击Windows窗口程序,如下图 恭喜你你现在可以编译易语言了. 想找例题

  • Go语言CSP并发模型goroutine channel底层实现原理

    Go语言CSP并发模型goroutine channel底层实现原理

    目录 Go的CSP并发模型(goroutine + channel) 1.goroutine goroutine的优点: 2.channel 无缓存channel 有缓存channel 3.Go并发模型的底层实现原理 4.一个CSP例子 参考Go的CSP并发模型实现:M, P, G Go语言是为并发而生的语言,Go语言是为数不多的在语言层面实现并发的语言. 并发(concurrency):多个任务在同一段时间内运行. 并行(parallellism):多个任务在同一时刻运行. Go的CSP并发模

  • C语言函数栈帧的创建与销毁原理图解

    C语言函数栈帧的创建与销毁原理图解

    目录 什么是函数栈帧 什么是栈? 与函数栈帧有关的汇编语句 函数如何创建栈帧并销毁 main函数栈帧开辟 调用Add函数 返回主函数 什么是函数栈帧 我们在写C语言代码的时候,经常会把一个独立的功能抽象为函数,所以C程序是以函数为基本单位的. 那函数是如何调用的?函数的返回值又是如何待会的?函数参数是如何传递的?这些问题都和函数栈帧有关系. 函数栈帧(stack frame)就是函数调用过程中在程序的调用栈(call stack)所开辟的空间,这些空间是用来存放: 函数参数和函数返回值 临时变量

  • 前端JS图片懒加载原理方案详解

    目录 背景 原理 方案 方案一:img的loading属性设为“lazy” 使用方法 优点 兼容性 缺点 方案二:通过offsetTop来计算是否在可视区域内 优化 优点 缺点 方案三:通过getBoundingClientRect来计算是否在可视区域内 方案四:使用IntersectionObserver来判断是否在可视区域内 兼容性 优点 缺点 问题 布局抖动 响应式图片 SEO不友好 插件 背景 懒加载经常出现在前端面试中,是前端性能优化的常用技巧.懒加载也叫延迟加载,把非关键资源先不加载

  • 前端分页功能的实现以及原理（jQuery）

    分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 基于jq实现分页功能,大致分为以下几步: 定义一个分页方法,可多次调用 参数设置 请求数据页面跳转方法 创建非数字按钮和数据内容区 创建数字按钮 首屏加载 调用 结构层只需要一个容器 <div class="pagination-nick"></div> 一.定义分页方法 function paginationNick(op

随机推荐