WebAssembly 初探

1、什么是 Web


Assembly

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

2、Web


Assembly 有什么用

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

Unity WebGL Player | Tanks!

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
    
    ，这是目前正在开发中

参考

WebAssembly 中文网|Wasm 中文文档

WebAssembly | MDN

c++项目转成wasm全过程

编译 C/C++ 为 WebAssembly – WebAssembly | MDN

AssemblyScript

Emscripten Tutorial – Emscripten 3.1.8-git (dev) documentation