WebAssembly浏览器低级汇编基础 JavaScript环境外集成至C/C++、C#和GoLang等编程语言

🕗2024-10-17👁️10

（1）语言概述

• WebAssembly 简称 WASM 或 WA，是一种新的编码方式，可以在现代的 Web 浏览器中运行
• 可以通过编译器，把多种编程语言（如 C/C++、C#、Go、Python、Rust、TypeScript 等）编写的代码转化为 WA，并在浏览器中使用
• 特点：
  • 灵活度高：是一种低级的类汇编语言
  • 体积较小：具有紧凑的二进制格式
  • 性能提升：接近原生的性能运行
• WA 可以与 JavaScript 共存，允许两者一起工作
• WA 关键概念：
  • 模块：表示一个已经被浏览器编译为可执行机器码的 WA 二进制代码
  • 内存：一个可变长的 ArrayBuffer
  • 表格：一个可变长的类型化数组
  • 实例：一个模块及其在运行时使用的所有状态（包括内存、表格和一系列导入值）
• 使用 WA 编写的相关应用：Figma 等

（2）加载与运行

1. 通常，编译器将其他语言的代码编译成 .wasm 文件，以便在 WA 环境中使用

2. 在浏览器环境中，可以通过 AJAX 导入外部文件，如导入 .wasm 文件

   fetch("main.wasm");

3. JavaScript 中的 WebAssembly 对象是所有 WA 相关功能的命名空间，其中 WebAssembly.compile / WebAssembly.instantiate 或 WebAssembly.compileStreaming / WebAssembly.instantiateStreaming 方法组合可以用于加载和运行 WA 代码

   fetch("main.wasm")
     .then((response) => response.arrayBuffer())
     .then((bytes) => WebAssembly.compile(bytes))
     .then((module) => {
       const instance = new WebAssembly.Instance(module);
       console.log(instance.exports);
     });

   或

   WebAssembly.instantiateStreaming(fetch("main.wasm")).then(
     (results) => {
       const instance = results.instance;
       console.log(instance.exports);
     },
   );

（3）相关 JavaScript API

• WebAssembly：所有 WA 相关功能的命名空间

a. 对象

• WebAssembly.Module：包含已经由浏览器编译的无状态 WebAssembly 代码
• WebAssembly.Global：一个全局变量实例，可以被 JavaScript 和 importable/exportable 访问
• WebAssembly.Instance：有状态，是 WebAssembly.Module 的一个可执行实例
• WebAssembly.Table：代表 WA 表格概念的 JavaScript 包装对象，具有类数组结构，存储了多个函数引用
• WebAssembly.Tag：定义了一种 WA 异常的类型，该异常可以从 WA 代码抛出或抛出
• WebAssembly.Exception：表示从 WA 抛出到 JavaScript 的运行时异常，或者从 JavaScript 抛出到 WA 异常处理程序的运行时异常
• WebAssembly.LinkError：表示在模块实例化期间发生错误

b. 方法

• WebAssembly.Memory()：用于创建一个新的 Memory 内存对象
• WebAssembly.CompileError()：创建一个新的 WA 编译错误对象
• WebAssembly.RuntimeError()：创建一个新的 WA 运行时错误对象

---

0x01 结合 C/C++

1. 使用 C 或 C++ 编写一段代码（以 C 为例）

   // filename: main.c
   #include<stdio.h>
    
   int main(){
     printf("Hello, WebAssembly!");
     return 0;
   }

   运行测试无误后继续

2. 下载并安装用于编译 C/C++ 到 WA 的 Emscripten

   详细操作参考官方下载与安装文档：https://emscripten.org/docs/getting_started/downloads.html

3. 使用命令 emcc main.c -s WASM=1 -o main.html 编译

   • emcc：Emscripten 提供的工具
   • main.c：基于 C 语言的代码
   • -s WASM=1：指定输出 WA
   • -o main.html：输出 main.wasm、main.js 和 main.html 文件，按需使用

0x02 结合 C#

1. 使用 C# 编写一段代码

   // filename: main.cs
   public class Example
   {
     public static void Main()
     {
       System.Console.WriteLine("Hello, WebAssembly!");
     }
   }

2. 安装 .NET Core SDK、mono

3. 使用命令 mcs --out:main.dll -t:library main.cs 将 C# 代码编译为 DLL

4. 使用命令 mono --runtime=mono --aot=llvm main.dll 将 DLL 编译为 WA

0x03 结合 Go

1. 使用 Go 编写一段代码：

   // filename: main.go
   package main
    
   import "fmt"
    
   func main() {
     fmt.Println("Hello, WebAssembly!")
   }

2. 使用命令 GOOS=js GOARCH=wasm go build -o main.wasm main.go 通过 GOCC 将 main.go 编译为 main.wasm