首页 > 极客资料 博客日记
WebAssembly 基础以及结合其他编程语言
2024-10-13 21:00:04极客资料围观22次
0x00 WebAssembly 基础
(1)概述
- WebAssembly 简称 WASM 或 WA,是一种新的编码方式,可以在现代的 Web 浏览器中运行
- 可以通过编译器,把多种编程语言(如 C/C++、C#、Go、Python、Rust、TypeScript 等)编写的代码转化为 WA,并在浏览器中使用
- 特点:
- 灵活度高:是一种低级的类汇编语言
- 体积较小:具有紧凑的二进制格式
- 性能提升:接近原生的性能运行
- WA 可以与 JavaScript 共存,允许两者一起工作
- WA 关键概念:
- 模块:表示一个已经被浏览器编译为可执行机器码的 WA 二进制代码
- 内存:一个可变长的
ArrayBuffer
- 表格:一个可变长的类型化数组
- 实例:一个模块及其在运行时使用的所有状态(包括内存、表格和一系列导入值)
- 使用 WA 编写的相关应用:Figma 等
(2)加载与运行
-
通常,编译器将其他语言的代码编译成 .wasm 文件,以便在 WA 环境中使用
-
在浏览器环境中,可以通过 AJAX 导入外部文件,如导入 .wasm 文件
fetch("main.wasm");
-
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++
-
使用 C 或 C++ 编写一段代码(以 C 为例)
// filename: main.c #include<stdio.h> int main(){ printf("Hello, WebAssembly!"); return 0; }
运行测试无误后继续
-
下载并安装用于编译 C/C++ 到 WA 的 Emscripten
详细操作参考官方下载与安装文档:https://emscripten.org/docs/getting_started/downloads.html
-
使用命令
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#
-
使用 C# 编写一段代码
// filename: main.cs public class Example { public static void Main() { System.Console.WriteLine("Hello, WebAssembly!"); } }
-
安装 .NET Core SDK、mono
-
使用命令
mcs --out:main.dll -t:library main.cs
将 C# 代码编译为 DLL -
使用命令
mono --runtime=mono --aot=llvm main.dll
将 DLL 编译为 WA
0x03 结合 Go
-
使用 Go 编写一段代码:
// filename: main.go package main import "fmt" func main() { fmt.Println("Hello, WebAssembly!") }
-
使用命令
GOOS=js GOARCH=wasm go build -o main.wasm main.go
通过 GOCC 将 main.go 编译为 main.wasm
0x04 结合 Python
- 可以通过 py2wasm 工具将 Python 编译为 WA,或使用 pyodide 直接在 JavaScript 中执行 Python
a. py2wasm
-
使用 Python 编写一段代码:
# filename: main.py if __name__ == '__main__': print("Hello, WebAssembly!")
-
使用命令
pip install py2wasm
安装 py2wasm 工具 -
使用命令
py2wasm main.py -o main.wasm
将 main.py 编译为 main.wasm
b. pyodide
在 HTML 头中导入 pyodide.js 并编写 Python 代码
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.0/full/pyodide.js"></script>
</head>
<body>
<script>
async function main() {
let pyodide = await loadPyodide();
await pyodide.loadPackage("numpy"); // 加载一个 Python 库
let result = await pyodide.runPythonAsync(`
import numpy as np
np.sum([1, 2, 3, 4])
`);
console.log(result);
}
main();
</script>
</body>
</html>
如果在 NodeJS 环境中,可以使用命令 npm install pyodide
导入
0x05 结合 Rust
-
使用命令
cargo add wasm-bindgen
添加依赖项 -
使用命令
rustup target add wasm32-unknown-unknown
安装目标 -
使用 Rust 编写一段代码:
// filename: main.rs use wasm_bindgen::prelude::*; // 使用 #[wasm_bindgen] 宏来导出函数到 JavaScript #[wasm_bindgen] pub fn greet(name: &str) -> String { format!("Hello, {}!", name) }
-
使用命令
cargo build --target wasm32-unknown-unknown --release
将 main.rs 编译为 main.wasm 等文件 -
使用命令
wasm-bindgen --out-dir ./out --target web target/wasm32-unknown-unknown/release/lib_wasm.wasm
生成 JavaScript 绑定文件,并设置输出目录为 ./out
0x06 结合 TypeScript
- AssemblyScript 简称 AS,可以将 TypeScript 的严格变体编译为 WA
- 具体操作方法参考 AS 官方文档
-End-
标签:
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”