许多3D游戏都是用C/C++语言写的，如果能将C/C++语言编译成JavaScript代码，它们不就能在浏览器里运行了吗？
Emscripten的底层是LLVM编译器，Emscripten可以将c／c++编译成asm.js代码，也可以将c/c++编译成webAssembly，但却不能把asm.js转成wasm。想把asm.js编译成WebAssembly，需要借助Binaryen和WABT等工具。

asm.js是javascript的一个严格子集，它的变量一律都是静态类型，没有垃圾回收机制，通过TypedArray直接读写内存，在浏览器的运行速度比js更快。asm.js是文本，人类可读，比较直观。所有浏览器都支持asm.js，不会有兼容性问题。

// asm.js案例
function () {
"use asm";

function add (x, y) {
x = x | 0;
y = y | 0;
return x + y | 0;
}

function square (x) {
x = x | 0;
return x * x | 0;
}

return {
add: add,
square: square
};
}

WebAssembly是二进制字节码，因此运行速度更快、体积更小，但是有兼容性问题。

一、快速体验

// 在浏览器控制台输入下列代码，下面的一些列数字是WebAssembly 的二进制源码
WebAssembly.compile(new Uint8Array(`
00 61 73 6d 01 00 00 00 01 0c 02 60 02 7f 7f 01
7f 60 01 7f 01 7f 03 03 02 00 01 07 10 02 03 61
64 64 00 00 06 73 71 75 61 72 65 00 01 0a 13 02
08 00 20 00 20 01 6a 0f 0b 08 00 20 00 20 00 6c
0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)).then(module => {
const instance = new WebAssembly.Instance(module)
const { add, square } = instance.exports

console.log('2 + 4 =', add(2, 4))
console.log('3^2 =', square(3))
console.log('(2 + 5)^2 =', square(add(2 + 5)))
})

上边的二进制源码一行 16 个数，有 4 行零两个，一共有 66 个数；每个数都是 8 位无符号十六进制整数，一共占66Byte。把字符串转成ArrayBuffer，先将字符串分割成普通数组，然后将普通数组转成8位无符号整数的数组。如果WebAssembly.compile返回的Promise fulfilled了，resolve方法的第一个参数就是WebAssembly的模块对象，是WebAssembly.Module的实例。WebAssembly.Instance将模块对象转成WebAssembly实例，通过instance.exports可以拿到wasm代码输出的接口，剩下的代码就和普通javascript一样了。

只有通过js代码来编译、实例化才可以调用webAssembly的接口。WebAssembly更适合用于写模块，承接各种复杂的计算，如图像处理、3D运算、语音识别、视音频编码解码这种工作，主体程序还是要用javascript来写的。

二、安装环境
1、git
2、CMake
3、vscode／xcode
4、python。

三、编译Emscripten

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

# 适用于os系统
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

该命令会经常用到

source ./emsdk_env.sh

四、运行代码

# 把cpp文件编译成wasm文件，html文件
emcc -o webAssembly/test6/hello.html webAssembly/test6/hello.c -O3 -s WASM= --shell-file webAssembly/test6/html_template/shell_minimal.html

使用一个支持WebAssembly的浏览器运行生成的html文件

emrun webAssembly/test6/hello.html

如果不知道命令选项的含义

emcc --help

五、小尝试
这里主要汇集了自己初学webAssembly练习的C++代码。

六、参考链接
https://developer.mozilla.org/zh-CN/docs/WebAssembly/C_to_wasm
http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html
https://segmentfault.com/a/1190000008402872
https://developer.mozilla.org/zh-CN/docs/WebAssembly/Using_the_JavaScript_API
http://webassembly.org/
https://cunzaizhuyi.github.io/WebAssembly-LinkError/
在线写webAssembly，https://webassembly.studio/?f=aakxyho2ho