WebAssembly 初探
1、什么是 Web
Assembly
WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。
2、Web
Assembly 有什么用
- 封装需要高性能的逻辑
- 代码混淆，防盗用
- 扩展 Web 能力
- 复用已有算法
- ……
3、Web
Assembly 怎么用
Web
Assembly 的作用是将其它语言的代码编译成类似于汇编/机器码的代码供 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、哪里用了 Web
Assembly
8个WebAssembly 应用案例
5、Web
Assembly 语言支持
-
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
，这是目前正在开发中
-
参考
编译 C/C++ 为 WebAssembly – WebAssembly | MDN
Emscripten Tutorial – Emscripten 3.1.8-git (dev) documentation