c/c++ 有用宏大的生态--海量c库。反对 c/c++ 编译到 WebAssembly 意味着开发者能够在web端应用这些c库。

想想那些新兴语言，在倒退初期，都是间接封装c库，以此来欠缺本人的生态，比方golang的cgo。

编译环境

能够应用 Emscripten 来将它编译到WebAssembly。

Emscripten 环境的装置略微简单一点，如下：

git clone https://github.com/juj/emsdk.gitcd 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# 在 Windows 上emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bitemsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit# 留神：Windows 版本的 Visual Studio 2017 曾经被反对，但须要在 emsdk install 须要追加 --vs2017 参数。
留神:--global标识会让PATH变量在全局被设置，所以接下来所关上的终端或者命令行窗口都会被设置。如果您仅仅想让Emscripten在以后窗口失效，就删掉这个标识。

不过有另外一种简略办法，间接应用docker镜像作为编译环境，省去了咱们配置环境的懊恼。该办法在后面的文章中有用到，如下：

docker run   --rm   -v `pwd`:`pwd`   -w `pwd`   -u $(id -u):$(id -g)   emscripten/emsdk   emcc native/fibonacci.c -o wasm/fibonacci.wasm --no-entry

示例

该示例来自于官网文档，之所以没有抉择相似 hello-world 之类，一是因为之前的文章中，咱们其实有波及到应用c编写一个斐波那契数列 wasm，而后在浏览器端应用。二是，该示例是对于WebP的，更加能够让大家领会到 c/c++ 如何通过wasm，促成web开发。

让咱们将WebP的编码器编译为wasm。 WebP编解码器的源代码是用C编写的，能够在GitHub上找到，以及一些扩大的API文档。

$ git clone https://github.com/webmproject/libwebp

首先，通过编写一个名为 webp.c的C文件将WebPGetEncoderVersion()从encode.h裸露给JavaScript：

#include "emscripten.h"#include "src/webp/encode.h"EMSCRIPTEN_KEEPALIVEint version() {  return WebPGetEncoderVersion();}

这是一个很好的简略程序，用于测试是否能够编译libwebp的源代码，因为它不须要任何参数或简单的数据结构即可调用此函数。

要编译该程序，您须要应用-I标记通知编译器在哪里能够找到libwebp的头文件，并将须要的所有libwebp C文件都传递给编译器。一个有用的策略就是给它所有C文件，并依附编译器除去所有不必要的货色：

docker run   --rm   -v `pwd`:`pwd`   -w `pwd`   -u $(id -u):$(id -g)   emscripten/emsdk   emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'   -I libwebp   webp.c   libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c

编译胜利后，生产如下文件：

  • a.out.js
  • a.out.wasm

须要编写一些html和js代码，来应用咱们的webp 了。

<script src="./a.out.js"></script><script>  Module.onRuntimeInitialized = async _ => {    const api = {      version: Module.cwrap('version', 'number', []),    };    console.log(api.version());  };</script>

运行成果如下：

残缺代码，大家参见谷歌chrome 示例 repo。官网导出的办法更多。

当然咱们能够加-o version.html — 指定这个选项将会生成HTML页面来运行咱们的代码，并且会生成wasm模块，以及编译和实例化wasm模块所须要的“胶水”js代码，这样咱们就能够间接在web环境中应用了。

论断

通常依赖于C的规范库，操作系统，文件系统等。 Emscripten提供了大多数这些性能，然而有一些限度。这些限度包含：

  • Networking -- Emscripten反对libc网络性能，然而您必须将本人限度为异步（非阻塞）操作。这是必须的，因为根底JavaScript网络性能是异步的。
  • 文件系统 -- Emscripten反对libc文件系统性能，并且能够按惯例形式编写C / C ++代码。
    在浏览器环境中运行的代码是沙盒化的，不能间接拜访本地文件系统。相同，Emscripten创立了一个虚构文件系统，该文件系统能够预加载数据或链接到URL以进行提早加载。这会影响何时能够调用同步文件系统性能以及如何编译我的项目。
  • Application Main Loop -- 浏览器事件模型应用合作式多任务处理-每个事件都有一个“turn”来运行，而后必须将控制权返回给浏览器事件循环，以便能够解决其余事件。 HTML页面挂起的常见起因是JavaScript无奈实现，无奈将控制权返回给浏览器。这可能会影响应用有限主循环编写应用程序的形式。