WebAssembly和Emscripten工作整理

作者/云荒杯倾

写在前面

之前做过一段时间的WebAssembly的研究，写过几个WebAssembly Demo，并且阅读并翻译了很多篇Emscripten官方文档，今天对这些东西做一个总结。

如果有需要对这块知识了解的同学，就可以按照这篇文章里的资料顺序来学习。

主要是以链接形式提供，并附上简短的说明。

WebAssembly方面

1.WebAssembly入门

这是一篇对WebAssembly进行概括介绍的文章。里面也有demo。

链接： https://cunzaizhuyi.github.io/webassembly/

2.WebAssembly API及调用过程图示

为了搞清楚WebAssembly的几个Web API而画的一个典型的使用JS调用wasm模块所涉及的API。

图片链接：https://github.com/cunzaizhuyi/photos/blob/master/WebAssembly/seq.png?raw=true

3.WebAssembly的CanvasDemo

介绍了一个基于canvas的圆球随机运动小demo。

文章链接：https://cunzaizhuyi.github.io/WebAssemblyCanvasDemo/

Demo链接：https://github.com/cunzaizhuyi/wasm-canvasDemo

Emscripten官方文档翻译

1.Emscripten入门指导

是对这个Emscripten项目的教学型介绍，原文在get started目录下。

链接： https://segmentfault.com/a/1190000011328496

2.emcc编译工具使用

如何使用emcc工具将c/c++代码编译为wasm供js调用，从而生成web程序？如何使用emcc工具将c/c++代码直接编译为asm，从而生成web程序？以上两个问题的答案，要在emcc编译命令的介绍里面去搜寻。

链接：https://segmentfault.com/a/1190000011335568

3.代码可移植性与限制

介绍将C/C++代码编译为wasm的过程中，有哪部分C/C++代码不能被编译、哪种代码能编译但是效率很低、哪种代码可以通过转化代码写法从而进行编译等。

链接：https://cunzaizhuyi.github.io/em-port-one/

4.Emscripten运行时环境

因为c/c++运行时环境与web程序运行时环境不同，因此一个Emscripten程序如果将来想要能够被编译成web程序，它就要对自身的运行时环境进行改造，填平、处理掉这些差异。

链接：https://cunzaizhuyi.gi
4000
thub.io/em-port-RuntimeEnv-two/

5.连接C程序和JavaScript代码

实际上你可以将Emscripten看成一个js API 和c、C++ sdk 优化子集，即它自己是一套完整的东西。从这个思路出发，说到c和js的代码交互，C里面怎么调用js，js里面又怎么调c，不过就是怎么用好emscripten sdk的问题，这么说好理解一点。

链接1：https://cunzaizhuyi.github.io/em-port-codeinteract-three/

链接2：https://cunzaizhuyi.github.io/em-port-embind-three/

6.文件和文件系统

根据上一个链接的说法，这部分其实就是介绍了Emscripten项目的文件系统和c/c++的不同，为啥要有这些不同（因为要适应web环境），然后你怎么用我Emscripten的sdk中涉及文件系统的API等。

链接：https://cunzaizhuyi.github.io/em-port-filesystem-four/

7.对opengl的支持

介绍了Emscripten项目能够支持的OpenGL的版本与支持程度。

链接：https://segmentfault.com/a/1190000011438279

8.调试代码

Emscripten提供了好几种调试方式

链接：https://cunzaizhuyi.github.io/em-port-debug-six/

9.优化代码

其实也算emcc编译工具使用教程之一，它集中在讲解哪些emcc命令是与优化代码质量、大小有关的。

链接：https://cunzaizhuyi.github.io/emcscripten-Optimizing-Code/

总结

以上文章都收录在segmentfault的专栏。因为之前文章发表的时间是乱序的，所以这篇文章的主旨其实是整理一个合理的学习顺序出来。

wasm和Emscripten技术交流群

由于我这个系列的文章，已经有好几位大牛加我询问这方面的问题，鉴于个人水平有限，并不能及时回应，且人多力量大，还是建个小qq群，供有需要的程序员们交流吧。群号：114235775。欢迎目前在研究这两块技术的同学进来互相帮助，互相学习。