对于Go开发者而言，除了将代码编译为本地可执行程序，还可使其在浏览器环境中直接运行。实现这一跨环境运行能力的核心技术，便是 Go WebAssembly。

作为新一代的网页虚拟机技术，WebAssembly正在改变前端开发格局，而Go语言也对它提供了原生支持！

什么是 WebAssembly？

WebAssembly（简称 Wasm ）是一种通用的二进制指令格式，其核心价值在于为浏览器提供高效的代码执行能力。本质上，它可被理解为浏览器可解析的“跨语言中间代码”。

它可以在现代浏览器中运行，它被设计为编程语言的可移植编译目标，让 C/C++、Rust、Go 等语言都能编译成 Wasm 在浏览器中执行。

传统网页开发依赖 JS、HTML 与 CSS，浏览器可直接解析执行；而 Go、C++ 等编译型语言的代码无法被浏览器直接识别。WebAssembly 扮演了“转译器”的角色，将 Go 代码编译为 Wasm 格式的二进制文件，使浏览器能够解析并执行 Go 代码逻辑。

对于 Go 开发者而言，无需学习新的前端开发语言，即可利用熟悉的 Go 语法构建浏览器可运行的应用程序，这正是 Go WebAssembly 的核心价值所在。

简单来说，WebAssembly不是用来替代JavaScript的，而是作为高性能补充。特别适合处理计算密集型任务，比如数据加密、图形渲染、复杂算法等。从 Go 1.11 版本开始，Go 官方原生支持将代码编译为WebAssembly格式。这意味着你可以用熟悉的 Go 语法来写前端逻辑！

典型应用场景

Go WebAssembly主要适用于前端JavaScript性能不足以支撑的高强度计算场景，典型应用包括：

  • 网页端复杂计算场景（如大规模数据可视化、实时图像处理等）；

  • 浏览器端游戏开发（利用 Go 编写游戏核心逻辑，编译为 Wasm 后在浏览器运行）；

  • 存量 Go 项目的网页端迁移（无需基于 JavaScript 重写，降低迁移成本与周期）。

实操指南

想象一下，同一段Go代码既能在后端服务器运行，又能直接在前端浏览器执行！这就是Go+WebAssembly的强大之处。

假设我们有一个计算逻辑，需要给前端使用，下面通过一个具体例子，展示如何创建并运行一个 Go WebAssembly 应用。

第一步：在wasm/main.go文件中将算法暴露给js：

package main

// 导入必要的包，syscall/js用于和JS交互
import "syscall/js"

// 定义要暴露给JS的加法函数
func Add(this js.Value, args []js.Value) interface{} {
    a, b := args[0].Int(), args[1].Int()
    return a + b // 返回两个整数的和
}

func main() {
    // 获取浏览器的全局window对象
    window := js.Global()
    // 将Add函数暴露给JS，JS中可通过goAdd调用
    window.Set("goAdd", js.FuncOf(Add))

    select {} // 防止main函数执行完后程序退出，让程序一直运行等待JS调用
}

第二步：编译 Go 代码为 WebAssembly 二进制文件：

GOARCH=wasm GOOS=js go build -o ./public/main.wasm ./wasm/main.go

命令执行完成后，工作目录下将生成public/main.wasm文件，该文件为浏览器可解析的 WebAssembly 二进制文件。补充说明编译参数：

  • GOARCH=wasm 指定编译目标架构为 WebAssembly
  • GOOS=js 指定编译目标运行环境为 JavaScript（即浏览器环境）

第三步：获取必要的支持文件

复制 Go 的 WebAssembly 支持文件：

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./public/

第四步：编写前端页面代码，实现 Wasm 文件加载与调用。

在工作目录下创建public/index.html文件，写入如下内容：

<!DOCTYPE html>
<html>
<body>
    <h1>Go WebAssembly 演示</h1>
    <div>
        <input type="number" id="num1" value="10">
        <span> + </span>
        <input type="number" id="num2" value="20">
        <button onclick="calculate()">计算</button>
    </div>
    <div id="result"></div>

    <script src="wasm_exec.js"></script>
    <script>
        // 初始化Go WebAssembly
        const go = new Go();
        // 异步加载Wasm模块
        async function init() {
            const result = await WebAssembly.instantiateStreaming(
                fetch("main.wasm"),
                go.importObject
            );
            go.run(result.instance); // Go WebAssembly加载成功!
        }

        // 调用Go函数进行计算
        function calculate() {
            const num1 = parseInt(document.getElementById('num1').value);
            const num2 = parseInt(document.getElementById('num2').value);
            const result = goAdd(num1, num2);
            document.getElementById('result').innerHTML =
                `<strong>结果: ${num1} + ${num2} = ${result}</strong>`;
        }

        // 初始化应用
        init();
    </script>
</body>
</html>

第五步：运行应用

使用 Go 编写简单服务器，可以使用 nginx 代替：

// main.go
package main

import "net/http"

func main() {
    http.Handle("/", http.FileServer(http.Dir("./public/")))
    http.ListenAndServe(":8080", nil)
}

启动 Web 服务：

go run main.go

访问http://localhost:8080即可看到运行效果。

完整结构如下：

.
├── go.mod
├── main.go
├── public
│   ├── index.html
│   ├── main.wasm
│   └── wasm_exec.js
└── wasm
    └── main.go

写在最后

Go WebAssembly为开发者提供了强大的工具，可以将Go的优势带到Web平台。

主要优势：

  1. 代码复用：核心业务逻辑前后端统一，避免重复开发
  2. 性能表现：计算密集型任务性能远超 JavaScript
  3. 技术栈统一：Go 开发者也能轻松开发前端应用

无论是为了提升性能，还是为了统一技术栈，Go WebAssembly都值得尝试。随着技术的不断成熟，我们有理由相信，WebAssembly技术将会有更多的应用场景。