webassembly初探

最新推荐文章于 2025-03-02 09:56:04 发布

头快撑不住了

最新推荐文章于 2025-03-02 09:56:04 发布

阅读量649

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web音视频文章标签： wasm

本文链接：https://blog.youkuaiyun.com/wushakun/article/details/141112087

web音视频专栏收录该内容

1 篇文章

订阅专栏

一、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>