WebAssembly在白鹭引擎5.0中的实践

作者：王泽，北京白鹭时代信息技术有限公司白鹭引擎首席架构师。目前主要聚焦于HTML5游戏引擎开发、TypeScript以及WebAssembly技术相关的研究与实践工作。
责编：陈秋歌，关注前端开发领域，寻求报道或者投稿请发邮件chenqg#csdn.net。
本文为《程序员》原创文章，未经允许不得转载，更多精彩文章请订阅《程序员》。

导读：作为一种可移植、体积小、加载快且兼容Web的全新格式，WebAssembly受到诸多关注，并迎来企业的探索实践。白鹭引擎5.0利用它重新编写了渲染核心，此过程中，遇到了很多问题。本文将针对这些问题，分享背后的解决方案。

WebAssembly是Google Chrome、Mozilla FireFox、Microsoft Edge、Mozilla FireFox共同宣布支持，并在2017年3月份在各自浏览器中提供了实现的一种新技术。它被设计为一种可移植的、安全的、低尺寸的、高效的二进制格式。浏览器可以解析并运行这种格式，并拥有比JavaScript更高的性能和解析速度。WebAssembly可以通过编写C/C++代码，通过专门的编译器生成.wasm格式的文件，直接运行在最新的浏览器中。

白鹭引擎是一款HTML5游戏引擎，提供了游戏开发所需要的诸多功能，并允许开发者编写的游戏运行在Web浏览器或移动应用的WebView容器中。

在白鹭引擎5.0中，我们使用WebAssembly重新编写了白鹭引擎的渲染核心，以便进一步提升渲染效率。在这个过程中，白鹭引擎遇到了WebAssembly的各种问题，在此与读者分享一些WebAssembly在实践中遇到的问题及解决方案，希望对计划或者正在使用WebAssembly的开发者有所帮助。

WebAssembly的生成原理

图1 C/C++代码被编译为WebAssembly代码的过程

图1展示了讲C/C++代码编译成WebAssembly内容的过程。

首先通过LLVM，将C/C++源代码编译为LLVM bytecode。这是一种跨语言的底层虚拟机字节码，理论上所有强类型编程语言均可以生成这种字节码。通过这一点可以得知，在未来理论上所有强类型编程语言（诸如Java、C#等）均可以开发WebAssembly程序。

其次，通过Emscripten中的后端编译器，将这种抽象字节码生成asm.js格式的文件。这是一种特殊的JavaScript代码，一些JavaScript引擎会将这种格式以比通常JavaScript代码更快的速度运行，并且由于asm.js仍然是JavaScript，所以哪怕JavaScript引擎不支持该特性，也会以通常的方式运行这段逻辑。这意味着使用C/C++编写的源代码，哪怕用户设备不支持WebAssembly，也可以回退到JavaScript运行并得到一致的结果。

接下来，asm.js会通过另一个编译器生成为WebAssembly的.wasm文件。WebAssembly 是二进制格式，相比JavaScript而言，其代码体积同比小很多，并且已经是面向机器码的格式，也无需在运行前对源代码耗费时间进行JIT编译操作。

通过上述内容可以看出，WebAssembly理论上可以通过任何强类型语言生成，不强制依赖用户的本地运行环境，代码体积小、解析速度快，几乎彻底解决了JavaScript的各种顽疾。

WebAssmely简单入门

开发环境配置

如果您想开发 WebAssembly，强烈建议您收藏以下三个站点。

• WebAs