webassembly入门篇

news2024/11/26 6:01:16

背景

随着职业的发展看到的东西也越来越多，webassembly也慢慢进入了视野。老哥铁柱公司做渲染用到webassembly、有幸参加掘金前端沙龙线下活动大佬们也在讲webassembly（大佬叫它wasm）等等，wasm有强于js的性能以及各种低级语言（go/c/rust）支持编译的特点。webassembly为后缀为.wasm的二进制文件它可以被js的WebAssembly api调用，对于前端出身的我来说可以预见的是webassembly很重要。

简介

WebAssembly（缩写为Wasm）是一种基于堆栈的虚拟机的二进制指令格式。Wasm 被设计为编程语言的可移植编译目标，支持在网络上部署客户端和服务器应用程序。准确的来说wasm不是一种语言而是一个由go/c/rust等等编译出来的标准协议。wasm具有高效快速、安全的特点。

简单的案例

主要语言毕竟是js，我考虑了两种语言go和rust来开发wasm。go和rust的性能差距不大go能做的rust也能做，因此在后续的学习中更多的是以go为主，毕竟go的上手难度比rust低得多而且有谷歌背书以及市场需求上也比rust高。

go

package main

func main() {
	println("adding two numbers:", add(2, 3)) // expecting 5
}

//export add
func add(x, y int) int

//export multiply
func Multiply(x, y int) int {
	return x * y
}

这里说一下，在go中“方法”大写开头是表示导出。

// go项目初始化
go mod init XXXX

go代码有了那么就要打包成.wasm文件。需要用到这个工具tinygo

// 打包命令
tinygo build -o XXXXX.wasm

项目目录如下：

前端调用wasm计算

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>

  <body>
    <script src="./wasm_exec.js"></script>
    <script>
      const go = new Go(); // Defined in wasm_exec.js
      const WASM_URL = "wasm.wasm";
      var wasm;
      go.importObject.env = {
        add: function (x, y) {
          // 设置go代码执行环境中的方法
          return x + y;
        },
      };

      if ("instantiateStreaming" in WebAssembly) {
        WebAssembly.instantiateStreaming(fetch(WASM_URL), go.importObject).then(
          function (obj) {
            wasm = obj.instance;
            console.log(wasm.exports, wasm.exports.multiply(2, 4)); // 执行go中暴露的方法
            go.run(wasm); // 执行go函数中的main方法
          }
        );
      } else {
        fetch(WASM_URL)
          .then((resp) => resp.arrayBuffer())
          .then((bytes) =>
            WebAssembly.instantiate(bytes, go.importObject).then(function (
              obj
            ) {
              wasm = obj.instance;
              go.run(wasm);
            })
          );
      }
    </script>
  </body>
</html>

对应的说明都在代码注释中了这里主要说下go编译的wasm文件前端要调用需要用到官方提供的一个wasm_exec.js脚本。wasm_exec.js