快捷導(dǎo)航

Go語(yǔ)言對(duì)前端領(lǐng)域的入侵WebAssembly運(yùn)行原理

更新時(shí)間：2022年07月20日 10:14:06 作者：老錢(qián)

這篇文章主要為大家介紹了不安分的Go語(yǔ)言對(duì)Web?前端領(lǐng)域的入侵WebAssembly運(yùn)行原理實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

從 Go 語(yǔ)言誕生以來(lái)，它就開(kāi)始不斷侵蝕 Java 、C、C++ 語(yǔ)言的領(lǐng)地。今年下半年 Go 語(yǔ)言發(fā)布了 1.11 版本，引入了 WebAssembly 技術(shù)，瀏覽器端 Javascript 的壟斷地位也開(kāi)始遭遇 Go 語(yǔ)言的攻擊。這次不同以往，它意味著 Go 語(yǔ)言從后端滲透進(jìn)了前端，進(jìn)入了一個(gè)全新的世界。

WebAssembly 運(yùn)行原理

WebAssembly 這個(gè)名字翻譯過(guò)來(lái)就是「Web 匯編」，也就是 Web 端的匯編語(yǔ)言。它是一段二進(jìn)制字節(jié)碼程序，Javascript 可以將這段二進(jìn)制程序編譯成模塊，然后再實(shí)例化這個(gè)模塊就可以調(diào)用字節(jié)碼邏輯了。WebAssembly 代碼運(yùn)行的速度很快，比 Javascript 要快很多，Javascript 可以通過(guò) WebAssembly 技術(shù)將關(guān)鍵性耗費(fèi)性能的邏輯交給 WebAssembly 來(lái)做就可以明顯提升瀏覽器端的性能。

對(duì)比顯示，使用 WebAssembly 運(yùn)行斐波那契數(shù)列相比使用原生 Javascript 來(lái)實(shí)現(xiàn)，運(yùn)行效率上能帶來(lái) 3.5 倍的提升。

WebAssembly 是一項(xiàng)比較新的技術(shù)，只有比較現(xiàn)代的瀏覽器才支持 WebAssembly，例如 Chrome、FireFox瀏覽器。

Go WebAssembly 運(yùn)行原理

Go 編譯器可以將代碼編譯成 WebAssembly 二進(jìn)制字節(jié)碼，被瀏覽器以靜態(tài)資源的形式加載進(jìn)來(lái)后轉(zhuǎn)換成 Javascript 模塊。有了這個(gè)模塊，瀏覽器可以直接操縱 Go 語(yǔ)言生成的二進(jìn)制字節(jié)碼邏輯。同時(shí)在 Go 語(yǔ)言編寫(xiě)的代碼中可以直接讀寫(xiě)瀏覽器里面 Javascript 運(yùn)行時(shí)對(duì)象，這樣就完成了 Javascript 和 Go 代碼的雙向交互。

Go 語(yǔ)言直到 1.11 版本之后才開(kāi)啟了對(duì) WebAssembly 的支持。如需體驗(yàn)，必須升級(jí)。

Go WebAssembly 初體驗(yàn)

下面我們就開(kāi)始體驗(yàn)一下 Chrome 瀏覽器與 Go 代碼是如何交互的。我們要實(shí)現(xiàn)一個(gè)功能，在瀏覽器的輸入框里輸入一個(gè)正整數(shù)，然后調(diào)用 Go 代碼的斐波那契數(shù)列，再將結(jié)果再呈現(xiàn)在頁(yè)面上。涉及到 4 個(gè)文件，分別是 fib.go、main.go、index.html、wasm_exec.js。

第一步

使用 Go 代碼編寫(xiě) WebAssembly 模塊文件 fib.go，將 Go 語(yǔ)言實(shí)現(xiàn)的斐波那契函數(shù)注冊(cè)到 Javascript 全局環(huán)境。這需要使用內(nèi)置的 syscall/js 模塊，它提供了和 Javascript 引擎交互的接口。

// fib.go
package main
import "syscall/js"
func main() {
	f_fib := func(params []js.Value) {
		var n = params[0].Int() // 輸入?yún)?shù)
		var callback = params[1] // 回調(diào)參數(shù)
		var result = fib(n)
		// 調(diào)用回調(diào)函數(shù)，傳入計(jì)算結(jié)果
		callback.Invoke(result)
	}
	// 注冊(cè)全局函數(shù)
	js.Global().Set("fib", js.NewCallback(f_fib))
	// 保持 main 函數(shù)持續(xù)運(yùn)行
        select {}
}
// 計(jì)算斐波那契數(shù)
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 語(yǔ)言注冊(cè)到 Javascript 引擎的函數(shù)在執(zhí)行時(shí)是異步的，所以這個(gè)函數(shù)沒(méi)有返回值，在完成計(jì)算后需要通過(guò)調(diào)用「?jìng)鬟M(jìn)來(lái)的回調(diào)函數(shù)」將結(jié)果傳遞到 Javascript 引擎。注意 main 函數(shù)要保持運(yùn)行狀態(tài)不要退出，不然注冊(cè)進(jìn)去的 fib 函數(shù)體就銷(xiāo)毀了。

第二步

下面將 Go 代碼編譯成 WebAssembly 二進(jìn)制字節(jié)碼。

$ GOARCH=wasm GOOS=js go build -o fib.wasm fib.go

執(zhí)行完成后可以看到目錄下多了一個(gè) fib.wasm，這個(gè)就是字節(jié)碼文件。它的大小是 1.3M，作為靜態(tài)文件傳遞到瀏覽器似乎有點(diǎn)大，不過(guò)靜態(tài)文件服務(wù)器一般有 gzip 壓縮，壓縮后的大小只有幾百K，這差不多也可以接受了。

第三步

編寫(xiě)網(wǎng)頁(yè)文件 index.html，這個(gè)網(wǎng)頁(yè)包含兩個(gè)輸入框，第一個(gè)輸入框用來(lái)輸入整數(shù)參數(shù)，第二個(gè)輸入框用來(lái)呈現(xiàn)計(jì)算結(jié)果。當(dāng)?shù)谝粋€(gè)輸入框內(nèi)容發(fā)生改變時(shí)，調(diào)用 javascript 代碼，執(zhí)行通過(guò) WebAssembly 注冊(cè)的 fib 函數(shù)。需要傳入?yún)?shù) n 和回調(diào)的函數(shù)。

<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 模塊并執(zhí)行模塊
        // 也就是運(yùn)行 Go 代碼里面的 main 函數(shù)
        // 這樣 fib 函數(shù)就注冊(cè)進(jìn)了 Javascript 全局環(huán)境
        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")
		// 傳入輸入?yún)?shù)和回調(diào)函數(shù)
                // 回調(diào)函數(shù)負(fù)責(zé)呈現(xiàn)結(jié)果
                fib(n, function(result) {
        	    var resultDom = document.getElementById("result")
        	    resultDom.value = result
        	})
	}
	</script>
	// 輸入發(fā)生變化時(shí)，調(diào)用 WebAssembly 的 fib 函數(shù)
        <input type="number" id="param" oninput="callFib()"/>
	<input type="text" id="result" />
</body>
</html>

注意代碼中引入了一個(gè)特殊的 js 文件 wasm_exec.js，這個(gè)文件可以從 Go 安裝目錄的 misc 子目錄里找到，將它直接拷貝過(guò)來(lái)。它實(shí)現(xiàn)了和 WebAssembly 模塊交互的功能。

第四步

運(yùn)行靜態(tài)文件服務(wù)器，這里不能使用普通的靜態(tài)文件服務(wù)器，因?yàn)闉g覽器要求請(qǐng)求到的 WebAssemly 字節(jié)碼文件的 Content-Type 必須是 application/wasm，很多靜態(tài)文件服務(wù)器并不會(huì)因?yàn)閿U(kuò)展名是 wasm 就會(huì)自動(dòng)使用這個(gè) Content-Type。但是 Go 內(nèi)置的 HTTP 服務(wù)器可以。所以下面我們使用 Go 代碼簡(jiǎn)單編寫(xiě)一個(gè)靜態(tài)文件服務(wù)器。

package main
import (
	"log"
	"net/http"
)
func main() {
	mux := http.NewServeMux()
	mux.Handle("/", http.FileServer(http.Dir(".")))
	log.Fatal(http.ListenAndServe(":8000", mux))
}

使用下面的命令運(yùn)行它

$ go run main.go

第五步

打開(kāi)瀏覽器，訪(fǎng)問(wèn) http://localhost:8000，現(xiàn)在就可以體驗(yàn)它的運(yùn)行效果了。

Javascript 真的需要擔(dān)心 Go WebAssembly 的威脅么？

其實(shí)根本不用擔(dān)心，WebAssembly 的目的是替換前端運(yùn)行比較耗時(shí)的邏輯，不是用來(lái)替換前端框架的，它也替換不了。雖然開(kāi)源社區(qū)冒出了一個(gè) github.com/elliotforbe… 的 Go WebAssembly 框架，可以讓你使用 Go 語(yǔ)言編寫(xiě)前端應(yīng)用程序。但是我仔細(xì)看了一下它的的源碼，發(fā)現(xiàn)它原來(lái)只是一個(gè)玩具 ^_^，實(shí)現(xiàn)上沒(méi)幾行代碼，離真實(shí)的應(yīng)用程序差距太遠(yuǎn)。

如果 Go WebAssembly 對(duì) javascript 是個(gè)威脅，那么威脅 javascript 的可不止 Go 語(yǔ)言了，能夠?qū)⒋a編譯成 WebAssembly 字節(jié)碼的語(yǔ)言多達(dá)幾十種。

希望將當(dāng)前 javascript 項(xiàng)目的部分代碼替換成 Go 語(yǔ)言，成本也是顯而易見(jiàn)的。技術(shù)棧的切換成本，字節(jié)碼的加載成本，框架項(xiàng)目持續(xù)集成的成本都是需要考慮的點(diǎn)。除非能獲得巨大的性能提升，否則使用純粹的 javascript 來(lái)完成項(xiàng)目依然是最佳選擇。

以上就是Go語(yǔ)言對(duì)前端領(lǐng)域的入侵WebAssembly運(yùn)行原理的詳細(xì)內(nèi)容，更多關(guān)于Go WebAssembly運(yùn)行原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: