webassembly初探
一、webassembly语言长啥样
把它的名字拆成两部分，web assembly，可以理解为，在web端运行的汇编语言。
它长什么样子呢?下面举个例子
//模块申明，这是wasm的开始
(module(func $add (export "add")(param $a i32)(param $b i32)(result i32)(i32.add (get_local $a)(get_local $b))))
1 模块声明
(module
其中module是模块声明，这是wasm模块的开始
2 函数声明和导出
(func $add (export "add")(param $a i32)(param $b i32)(result i32)
-
func $add 定义了一个名为add的函数
-
export “add”：导出add函数，作为外部可调用的函数
-
(pram $a i32) (pram $b i32) 定义了两个32位整数参数
-
(result i32) 返回32位的整数
3 函数体
(i32.add (get_local $a)(get_local $b))
-
i32.add 32位的加法指令
-
(get_local $a) (get_local $b) 从本地参数中获取a和b
从上述例子可以看出，WebAssembly的写法是非常繁琐的。如果要程序员去手写webassembly的代码，那这门语言将很快就会湮没在历史的长河中。
所以实际使用时，我们一般是用自己趁手的高级语言去编写代码，然后通过emscripten工具将代码编译成webaseembly。
二、如何编译webassembly
2.1 编译过程
编写源代码
首先，开发者用高级编程语言（如C/C++，Rust等）中，编写源代码
前端编译
源代码被前端编译器（Clang、Rust编译器等）编译为中间表示（Intermediate Representation，IR），通常是LLVM IR（Low-Level Virtual Machine Intermediate Representaion）
优化和中间表示转化
编译器对中间表示进行各种优化，以提高代码的执行效率和性能。例如常量折叠，循环优化等
WebAssembly目标后端编译
优化后的中间表示被进一步编译为WebAssembly的中间表示（Wasm IR），这是用来生成最终WebAssembly二进制格式的表示
2.2 编译工具Emscripten
对于C/C++，Emsripten是一个常用的工具链，它基于LLVM并扩展了Clang，以直接生成WebAssembly，以下是编译步骤
emcc example.cpp -s WASM=1 -o example.js
这将生成example.wasm 和 example.js两个文件，其中的js文件是执行wasm文件的胶水层代码
三、如何运行webAssembly
要运行 WebAssembly（Wasm），通常可以按照以下步骤进行：
- 在网页中运行：
-
编写 HTML 和 JavaScript 代码来加载和实例化 WebAssembly 模块。
-
使用
fetch或其他方法获取 WebAssembly 模块的二进制文件（通常是.wasm文件）。 -
使用 JavaScript 的
WebAssembly.instantiate或相关的 API 来实例化并与 WebAssembly 模块进行交互。
以下是一个简单的在网页中运行 WebAssembly 的示例（使用 JavaScript）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebAssembly Example</title>
</head>
<body><script>async function runWebAssembly() {// 获取 WebAssembly 模块const response = await fetch('your_wasm_module.wasm');const buffer = await response.arrayBuffer();// 实例化 WebAssembly 模块const module = await WebAssembly.instantiate(buffer);// 调用模块中的导出函数const result = module.instance.exports.add(5, 3);console.log(result);}runWebAssembly();</script>
</body>
</html>