当前位置： 首页>后端>正文

WebAssembly

后端2024-04-28 02:11:21

一、WebAssembly 是什么？

WebAssembly（简称wasm）是一种可移植的、体积紧凑且加载快速的二进制格式，设计用于现代网络浏览器环境。它提供了一个底层的、可验证的安全执行环境，使得开发者能够将高级语言（如C、C++、Rust等）编译成可以在Web上以接近原生速度运行的代码
通俗点讲，就是正常在前端浏览器中，浏览器只能识别js代码，而wasm可以在浏览器上运行非 JavaScript 语言（C/C++、Rust，只要它能被编译成 wasm）

优点
  1. 可以使用 C/C++、Rust等语言编写代码，这个是 wasm 最大的价值所在；
  2. 高效快速，二进制文件，以接近原生的速度运行；
  3. 安全，和 JS 有相同的沙盒环境和安全策略，比如同源策略；
  4. 绝大多数主流浏览器支持。另外可移植，非浏览器环境也能支持（塞个 v8 进去，比如 nodejs）；
  5. 使用其他语言的轮子。比如 Canvas 底层调用的 Skia C++ 库，就通过 wasm 技术提供了一个名为 CanvasKit 的 NPM 包给开发者用 JS 开发
缺点
  1. 适用场景较少，适合 CPU 密集型的场景（比如 3D 渲染）；
  2. 提升并没有非常高（几十倍），通常可能就两三倍的样子？但对普通前端来说学习成本太高，还得看投入产出比；
  3. 和 JS 有通信的成本，通信频繁或数据量大会降低性能。

二、Emscripten

当你在用 C/C++ 之类的语言编写模块时，你可以使用 Emscripten 来将它编译到 WebAssembly。下面介绍如何安装Emscripten，你需要通过源码自己编译一个 Emscripten

git https://gitee.com/tataocs/emsdk.git
cd emsdk

# 在 Linux 或者 Mac macOS 上
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
# 如果在你的 macos 上获得以下错误
Error: No tool or SDK found by name 'sdk-incoming-64bit'
# 请执行
./emsdk install latest
# 按照提示配置环境变量即可
./emsdk activate latest


# 在 Windows 上
emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

# 注意：Windows 版本的 Visual Studio 2017 已经被支持，但需要在 emsdk install 需要追加 --vs2017 参数。

1. 先克隆

在第一步克隆时就遇到了瓶颈，因为仓库在github，正常国内无法访问，需要去到gitee国内镜像克隆相关代码 ，克隆地址为 https://gitee.com/tataocs/emsdk.git

# git clone https://github.com/juj/emsdk.git

# 拉取仓库
git clone https://gitee.com/tataocs/emsdk.git
# 进入目录
cd emsdk

2. 下载最新的Emscripten

./emsdk install latest

3. 安装最新的Emscripten

./emsdk activate latest

4. 激活

# ios，linux
source ./emsdk_env.sh
# windows
emsdk_env.bat

5. 安装成功

emcc -v  or  emcc --version

若安装成功会出现下面的代码


WebAssembly,第1张
安装成功

注意: emcc环境只有在安装有Emscripten环境的文件夹下的终端执行， 这里我只有在vscode中打开emsdk此文件夹才能执行emcc命令

三、hello word

下面介绍如何编译一个简单的样例代码，如何把把C语言 代码编译到 Emscripten。
当使用 Emscripten 来编译的时候有很多种不同的选择，我们介绍其中主要的 2 种：

  • 编译到 wasm 并且生成一个用来运行我们代码的 HTML，将所有 wasm 在 web 环境下运行所需要的“胶水”JavaScript 代码都添加进去。
  • 编译到 wasm 然后仅仅生成 JavaScript。

1. 生成HTML和JavaScript

1)随便创建一个文件夹，创建hello1.c文件，复制下面代码
#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}
2) 现在，转到一个已经配置过 Emscripten 编译环境的终端窗口中，进入刚刚保存 hello.c 文件的文件夹中，然后运行下列命令：
emcc hello1.c -s WASM=1 -o hello1.html

下面列出了我们命令中选项的细节：

  • -s WASM=1 — 指定我们想要的 wasm 输出形式。如果我们不指定这个选项，
  • -o hello.html — 指定这个选项将会生成 HTML 页面来运行我们的代码，并且会生成 wasm 模块，以及编译和实例化 wasm 模块所需要的“胶水”js 代码，这样我们就可以直接在 web 环境中使用了
此时目录结构为
WebAssembly,第2张
目录结构
运行html页面可以得到
WebAssembly,第3张
页面结果

当然我们也可以创建一个 html 文件，引入这个 a.out.js 文件，也可以看到控制台能够正确输出输出。

2. 自定义HTML 模板

该功能我按照文档执行时，并没有发现文档中相关的文件，所有没有成功运行

3. 文件系统

出于安全考虑，wasm 最终是要在浏览器的沙箱内运行的，是无法读取本地文件的。
但我们还是可以使用 C++ 的读取文件的方法的，只是它会被转换为从虚拟文件系统里读取

1）创建一个hello3.c文件
#include <stdio.h>

int main() {
  FILE *file = fopen("./hello_world_file.txt", "rb");
  if (!file) {
    printf("cannot open file\n");
    return 1;
  }
  while (!feof(file)) {
    char c = fgetc(file);
    if (c != EOF) {
      putchar(c);
    }
  }
  fclose (file);

  printf("\n");

  return 0;
}
2)创建一个本地需要读取的hello_world_file.txt文件
==
This data has been read from a file.
The file is readable as if it were at the same location in the filesystem, including directories, as in the local filesystem where you compiled the source.
读取文件-难不住小杜
==
3)使用--preload-file 选项，指定要预加载的资源文件
emcc hello3.c -o hello3.html --preload-file hello_world_file.txt

此时目录结构为


WebAssembly,第4张
目录结构

运行html页面可以得到


WebAssembly,第5张
运行结果
到此，简单的在web中运行wasm就实现了

参看资料：

  1. https://juejin.cn/post/7259182371974266936
  2. https://developer.mozilla.org/zh-CN/docs/WebAssembly/C_to_wasm#emscripten_%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85

https://www.xamrdz.com/backend/3z31936687.html

相关文章：