一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

使用Emscripten生成WebAssembly文件

前提

使用Emscripten生成WebAssembly文件
根据2022.stateofjs.com/zh-Hans/fea… 给出的数据,webAssembly已经在全球的前端从业者中有比较广泛的认知度了,作为一个在处在这13%的选手,还是决定随大流从众一波。

使用Emscripten生成WebAssembly文件

流程

环境安装

windows环境需要安装

// 拉取emscripten sdk的初始化模块
git clone https://github.com/juj/emsdk.git
cd emsdk

// 使用emsdk命令初始化emscripten环境 需要环境下有python支持
emsdk install latest
emsdk activate latest
emsdk_env.bat

如果emsdk install没有效果,可以参考这个issue

编译

这时候copy一段简单c++代码

#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

在一个已经配置过 Emscripten 编译环境的终端窗口中,进入刚刚保存 hello.c 文件的文件夹中,然后运行下列命令:

emcc hello.c -s WASM=1 -o hello.html

得到如下文件:

使用Emscripten生成WebAssembly文件

  • hello.wasm 二进制的 wasm 模块代码
  • hello.js 一个包含了用来在原生 C 函数和 JavaScript/wasm 之间转换的胶水代码的 JavaScript 文件
  • hello.html 一个用来加载,编译,实例化你的 wasm 代码并且将它输出在浏览器显示上的一个 HTML 文件

打开hello.html,可以看到刚才的c++代码运行结果在html上展示了

使用Emscripten生成WebAssembly文件

编译成功。

结果查看

在vscode下载webAssembly插件查看生成的wasm文件,可以看到他的wat结构:

使用Emscripten生成WebAssembly文件

wat结构

这里分析一下wat的结构,wat是使用S- 表达式编码

一个S-表达式的执行步骤如下:

(print (* 2 (+ 3 4)))

使用Emscripten生成WebAssembly文件
(图片出自于航老师的课程)

那么来看一段基础的wat结构的代码

// wat文件
(module
   //函数申明方式 func 函数名 (param 参数1 32位) (param 参数2 32位) (返回值 32位)
  (func $add (param $lhs i32) (param $rhs i32) (result i32)
    // get_local表示压栈,把$lhs压栈
    get_local $lhs
    // 把$rhs压栈
    get_local $rhs
    // 相加
    i32.add)
    // 导出add函数
  (export "add" (func $add))
)
// js文件
fetchAndInstantiate('add.wasm').then(function(instance) {
   console.log(instance.exports.add(1, 2));  // "3"
});

相当于实现了一个(a, b) => a + b 的功能。

详细的wat介绍可以看这里

原文链接:https://juejin.cn/post/7234103673343901751 作者:用户名未被占用

(0)
上一篇 2023年5月19日 上午10:26
下一篇 2023年5月19日 上午10:36

相关推荐

发表评论

登录后才能评论