一、WebAssembly 是什么？
WebAssembly（简称wasm）是一种可移植的、体积紧凑且加载快速的二进制格式，设计用于现代网络浏览器环境。它提供了一个底层的、可验证的安全执行环境，使得开发者能够将高级语言（如C、C++、Rust等）编译成可以在Web上以接近原生速度运行的代码
通俗点讲，就是正常在前端浏览器中，浏览器只能识别js代码，而wasm可以在浏览器上运行非 JavaScript 语言（C/C++、Rust，只要它能被编译成 wasm）
优点
- 可以使用 C/C++、Rust等语言编写代码，这个是 wasm 最大的价值所在；
- 高效快速，二进制文件，以接近原生的速度运行；
- 安全，和 JS 有相同的沙盒环境和安全策略，比如同源策略；
- 绝大多数主流浏览器支持。另外可移植，非浏览器环境也能支持（塞个 v8 进去，比如 nodejs）；
- 使用其他语言的轮子。比如 Canvas 底层调用的 Skia C++ 库，就通过 wasm 技术提供了一个名为 CanvasKit 的 NPM 包给开发者用 JS 开发
缺点
- 适用场景较少，适合 CPU 密集型的场景（比如 3D 渲染）；
- 提升并没有非常高（几十倍），通常可能就两三倍的样子？但对普通前端来说学习成本太高，还得看投入产出比；
- 和 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
若安装成功会出现下面的代码
注意: 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 环境中使用了
此时目录结构为
目录结构运行html页面可以得到
页面结果
当然我们也可以创建一个 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
此时目录结构为
目录结构
运行html页面可以得到
运行结果
到此，简单的在web中运行wasm就实现了
参看资料：
