WebAssembly 初探

农星华

2023-12-01

WebAssembly 初探

1、什么是 WebAssembly

WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行－它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

2、WebAssembly 有什么用

封装需要高性能的逻辑
代码混淆，防盗用
扩展 Web 能力
复用已有算法
……

Unity WebGL Player | Tanks!

3、WebAssembly 怎么用

WebAssembly 的作用是将其它语言的代码编译成类似于汇编/机器码的代码供 web 使用，所以在使用这些代码之前，需要先将其它语言代码编译成为 web 可识别的代码。

准备工作（以C++/C为例）

Emscripten 环境安装

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

# 在 Linux 或者 Mac OS X 上
./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 参数。

安装完成后，将 emcc 编译命令添加到环境变量，以便于编译

# on Linux or Mac OS X
source ./emsdk_env.sh

# on Windows
emsdk_env.bat

C++/C 测试代码编写

使用CLion 创建工程，在 main.cpp 中

#include <stdio.h>

// main 方法，编译完成后会自动执行
int main(int argc, char ** argv) {
    printf("Hello World\n");
}

add(int a, int b) {
    return a+b;
}

在以上代码中，声明了 main 方法，以及一个 add 方法。使用如下命令进行编译

emcc main.cpp -s STANDALONE_WASM -O1 -o out/hello.html

关于 emcc 的参数说明

下面列出了我们命令中选项的细节：
- s WASM=1 — 指定我们想要的wasm输出形式。如果我们不指定这个选项，Emscripten默认将只会生成asm.js。
- o hello.html — 指定这个选项将会生成HTML页面来运行我们的代码，并且会生成wasm模块，以及编译和实例化wasm模块所需要的“胶水”js代码，这样我们就可以直接在web环境中使用了。
这个时候在您的源码文件夹应该有下列文件:
- hello.wasm 二进制的wasm模块代码
- hello.js 一个包含了用来在原生C函数和JavaScript/wasm之间转换的胶水代码的JavaScript文件
- hello.html 一个用来加载，编译，实例化你的wasm代码并且将它输出在浏览器显示上的一个HTML文件

此时，会生成三个文件

hello.html 布局文件
hello.js 胶水js文件
hello.wasm 编译完成的主要 wasm 文件

Wasm 的引用

wasm生成后，需要通过 fetch 或 XHR等方式来进行加载。如果是只架子啊 wasm 文件的话，需要如下方式

fetch('demo.wasm').then(response =>
    response.arrayBuffer() // wasm 的内存 buffer
).then(buffer =>
    WebAssembly.instantiate(buffer, importObj) 
).then(({module, instance}) =>
    // 这里即可拿到 instance 
);

但是，wasm 的加载并没有这么简单，可能需要做很多处理去配置 importObj。所以可以直接调用胶水代码 [hello.js] 来进行 wasm 的加载。

<script src="hello.js"></script>
<script>
  Module.onRuntimeInitialized = function() { //此时才能获得完整Module对象
    console.log(Module)
    console.log(Module._add(1,1))
  }
</script>

这里，即可在控制台看到 Hello World 的输出。因为 main 方法编译之后是自动执行的，所以会直接输出。

add 方法的调用

在 main.cpp 中，如果以如下方式声明，会被 emscripten 视作无效方法，是不会在 Module 中出现，所以是不能引用的

add(int a, int b) {
    return a+b;
}

这里需要对 main.cpp 方法进行改写

#include <stdio.h>
#include "[emscripten 项目路径]/emscripten/emscripten.h"

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

#ifdef __cplusplus
extern "C" {
#endif

int EMSCRIPTEN_KEEPALIVE add(int a, int b) {
    return a+b;
}

#ifdef __cplusplus
}
#endif

再次编译

emcc main.cpp -s STANDALONE_WASM -O1 -o out/hello.html

此时，即可通过 Module.**_add**(1,1) 来进行 c++ 方法的调用

4、哪里用了 WebAssembly

8个WebAssembly 应用案例

5、WebAssembly 语言支持

WebAssembly支持不断发展。目前，以下语言支持它：
- C / C ++ -通过EmScripten或其他基于LLVM的最小工具链提供了很好的支持（可立即投入生产）
- Rust -WebAssembly是受官方支持的目标，周围有非常活跃的社区。
- Go- 现在已将WebAssembly作为正式但实验性的目标来支持
- C＃ -通过Blazor具有实验支持，但是当前需要将.NET运行时嵌入到Wasm中。Blazor在最近的预览版本中被Microsoft正式采用为实验技术。
- D - D的“ betterC”子集可以通过LDC（LLVM编译器）编译为WebAssembly 。
- **TypeScript-**通过AssemblyScript，实验性强，但势头强劲。
- Java的 -通过TeaVM或Bytecoder
- HAXE - 刚刚宣布支持
- Kotlin -Kotlin / Native 0.4 通过 WebAssembly和TeaVM 获得了实验支持
- Python - Pyodide是Python到WebAssembly的移植，其中包括科学的Python堆栈的核心软件包（Numpy，Pandas，matplotlib）。
- **PHP-**实验性的，但具有有效的原型
- Perl - WebPerl是Perl二进制文件到WebAssembly的端口，允许您在Web上运行Perl脚本。
- 斯卡拉 -使用Emscripten编译
- 红宝石 -通过run.rb项目
- 斯威夫特 -使用SwiftWasm，这是目前正在开发中