深入浅出WebAssembly

WebAssembly是一种新的二进制格式，它可以方便地将C/C++等静态语言的代码快速地“运行”在浏览器中，这一特性为前端密集计算场景提供了无限可能。不仅如此，通过WebAssembly技术，我们还可以将基于Unity等游戏引擎开发的大型游戏快速地移植到Web端。WebAssembly技术现在已经被计划设计成W3C的标准，众多浏览器厂商已经提供了对其MVP版本标准的支持。在Google I/O 2017大会上，Google首次针对WebAssembly技术进行了公开演讲和推广，其Post-MVP版本标准更是对诸如DOM操作、多线程和GC等特性提供了支持。WebAssembly所带来的Web技术变革势不可挡。

《深入浅出WebAssembly》力求从一些简单的实践入手，深入理论，到复杂的具有实际业务价值的综合实践，深入浅出地介绍Wasm技术发展至今，其背后所涉及的各种底层设计原理与实现、相关工具链以及未来发展方向等多方面内容。本书内容包括：WebAssembly技术的发展历程，从PNaCl到ASM.js再到WebAssembly，以及这些技术的基本应用方法与性能对比；WebAssembly的标准上层API、底层堆栈机的设计原理，以及对MVP标准理论的深入解读；与WebAssembly标准相关的进阶内容，如单指令多数据流（SIMD）、动态链接（DL）等；LLVM工具链与WAT可读文本格式的相关内容；基于Emscripten工具链开发WebAssembly应用的基本流程，以及工具链的一些基本常用功能和特性；基于Emscripten工具链实现C/C++语言动态关系绑定技术；Emscripten工具链所提供的一些如WebGL支持、虚拟文件系统、应用优化以及HTML 5事件系统等高级应用特性；构建一个具有实际业务价值的WebAssembly应用，现阶段Wasm生态的发展情况，以及在Post-MVP标准中制订的一些WebAssembly未来发展规划。

《深入浅出WebAssembly》的目标读者为Web前端开发人员、C/C++开发人员和对WebAssembly技术感兴趣的人员。

于航，现就职于阿里巴巴 / 饿了么事业部（BU），资深前端工程师，FreeCodeCamp(FCC) China 上海社区负责人，QCon(2017)上海前端专场讲师。2016 年开始研究 WebAssembly 技术，2017 年加入 WebAssembly 中国社区，同年加入官方WCG（W3C Community Group），定期参与 WCG组织的各种线上视频研讨会议，在跟进 WebAssembly 新发展的同时，也为 WebAssembly 的标准化提出自己的建议和意见。生活中喜欢弹钢琴、演讲与分享。主要技术研究方向为Web前端与基础设施架构、WebAssembly、LLVM以及编译器等相关领域。

适读人群 ：Web前端相关从业人员，对Web前端技术感兴趣的人员，C／C++程序员

本书带你一步跨越计算机系统底层机制及C++、编译原理鸿沟，快速拥抱WebAssembly。

对于想进一步了解语言和浏览器引擎原理的开发者来说，这是一本非常好的进阶学习书籍。

WebAssembly带来多语言生态、超Android|iOS的原生性能，是穿透JavaScript最后障碍的银弹。

从原理入手，深入到渲染引擎、编译器，详细介绍各项特性，通过实例介绍WebAssembly开发调试。

前言

为什么要写这本书

自从JavaScript（后面简称JS）脚本语言于1995年诞生以来，人们便一直在使用该语言以及HTML与CSS来编写和开发以浏览器为主的Web应用。近年来，随着JS的不断流行，以及Node.js的出现，JS也开始逐渐向除Web前端之外的其他领域发力，比如开发后端应用、机器学习应用乃至硬件编程等领域。但就JS本身而言，所不能无视的是它是一种弱类型语言，因此，相比于C/C++等强类型语言，尽管Chrome V8、SpiderMonkey等JS引擎已经通过诸如JIT等多种技术手段来优化JS脚本代码的整体执行效率，但引擎每一次版本优化的迭代速度（所花费的时间）却远远跟不上当今各类Web应用的复杂程度变化。因此，发明一种能够从根本上解决该问题的技术便显得迫在眉睫。

曾昙花一现的ASM.js、NaCl与PNaCl等技术都尝试以其各自的方式来优化Web应用的执行效率，但由于其所存在的诸如“浏览器兼容性不佳”以及“性能优化不彻底”等问题，导致它们最终并没有被广泛推广。而在2015年出现的WebAssembly（简称Wasm）技术，便是在吸取了前者经验教训的基础上而被设计和发明出来的。现在，我们可以看到该项技术所具有的潜力——W3C成立了专门的WWG工作组来负责Wasm技术的标准迭代与实现，四大主流浏览器（Google Chrome、FireFox、Edge和Safari）已经全部实现WebAssembly技术在其MVP标准中制定的所有特性，C/C++、Go和Rust等高级语言已经逐渐开始支持编译到Wasm格式。这一系列的发展和变化都说明了人们对该项技术所寄予的厚望。

如今世间百态，万物的发展速度越来越快，而前端技术领域也同样如此，正在转向技术融合的道路——从2000年专门指代PC网页技术的Web前端，到2010年左右包含有H5技术的前端，再到融合了移动端甚至部分后端技术的“大前端”。“前端”一词所指代的技术实体正变得越来越模糊，已经不单单是指我们所熟知的JS、HTML与CSS了，正如大学里生物学专业与化学专业两者融合后所形成的“生物化学专业”一样。技术本身并无好坏之分，只有能否适用于某些业务场景。而技术的融合则正好能够发挥各项技术本身所具备的优势，达到“1+1>2”的效果。WebAssembly技术便正是如此。

在写作本书的过程中，笔者曾与WWG的核心成员Alon、Ben和JF等专家进行了多次交流，以力求保证书中各个技术细节的正确性。但Wasm技术发展非常之快，比如Emscripten工具链每天都会有众多的“commit”被提交到主分支中，新版本的发布也是以“周”甚至“天”为单位进行的。因此，书中所述内容并不保证会在今后的半年甚至一年时间里都具有时效性。而对于相关内容的时效性变化，笔者也会在对应于本书的Github仓库（详见“勘误和支持”部分）中及时进行标注。作为国内第一本介绍WebAssembly的技术书籍，希望本书的内容能够为国内互联网基础技术的发展做出微小的贡献。虽然现阶段我们还无法完全地自主创新，或者参与到各项国际技术标准的制定过程中，但唯有紧跟其脚步，才能够伺机超越。

本书特色

作为市面上第一本深入介绍WebAssembly技术的相关书籍，笔者尝试由浅入深地来介绍与Wasm技术相关的各种底层理论知识，以及相关编译器工具链的内部实现结构与使用方法。WebAssembly技术从其第一版MVP标准诞生至今，时间过去并不久，但抽象的英文官方文档并不适合各类Web前端开发工程师直接进行阅读。从另一个方面来看，虽然我们可以在国内如“百度”等中文搜索引擎上找到部分与Wasm实践相关的介绍文章，但它们大都不会深入该技术标准的背后，探寻该技术的底层设计本质。因此，本书力求从一些简单的实践入手，深入理论，再到复杂的具有实际业务价值的综合实践，深入浅出地介绍Wasm技术发展至今，其背后所涉及的各种底层设计原理与实现、相关工具链以及未来发展方向等多方面内容。

由于WebAssembly并不是一种单方面的前端或后端技术，因此在本书中，我们将会随着内容的深入逐渐接触到除Web前端技术之外的诸如编译原理、V8引擎、LLVM以及Linux动态链接等多方面内容。笔者将会用最简单和直观的方式，由浅入深地介绍这些平日里可能很少接触到的技术与特性。

另外，作为市面上首本与WebAssembly相关的纯技术类书籍，笔者只能从自己所接触到的Wasm相关技术中，按照各个知识点的相关性与重要性来编排内容。相信读者在读完整本书后，一定会对Wasm技术背后的实现原理以及相关技术有着进一步的理解。

读者对象

□ Web前端开发人员。

□ C/C++开发人员。

□ 对WebAssembly技术感兴趣的人员。

本书内容

本书分为8章。

第1章：本书的开篇，主要介绍WebAssembly技术的发展历程，从PNaCl到ASM.js再到WebAssembly，以及这些技术的基本应用方法与性能对比。

第2章：介绍WebAssembly的标准上层API、底层堆栈机的设计原理，以及对MVP标准理论的深入解读。

第3章：介绍与WebAssembly标准相关的进阶内容，如单指令多数据流（SIMD）、动态链接技术等。

第4章：由浅入深地介绍LLVM工具链与WAT可读文本格式的相关内容。

第5章：从理论走向实践，从本章开始介绍基于Emscripten工具链开发WebAssembly应用的基本流程，以及工具链的一些基本常用功能和特性。

第6章：介绍基于Emscripten工具链实现的C/C++语言动态关系绑定技术。

第7章：从基础走向深入，继续介绍Emscripten工具链所提供的一些如WebGL支持、虚拟文件系统、应用优化以及事件系统等高级应用特性。

第8章：构建一个具有实际业务价值的WebAssembly应用，并介绍现阶段Wasm生态的发展情况，以及在Post-MVP标准中制订的一些WebAssembly未来发展规划。

勘误和支持

作为市面上首本介绍WebAssembly相关技术的书籍，本书在内容组织与编排上全部由笔者一人完成。由于笔者的知识水平有限，以及编写时间仓促，书中难免会出现一些错误或不准确的地方，恳请读者批评指正。如果你有更多的宝贵意见，欢迎在笔者的Github仓库“Book-DISO-WebAssembly”下创建“issue”，留下你的问题、意见或建议，笔者会在第一时间给予答复。

致谢

首先要感谢的是Emscripten工具链的作者Alon，在编写Emscripten实践部分时，通过邮件与他沟通了很多技术细节上的内容。Alon是Mozilla的技术研究员，他主要负责维护和开发Emscripten与Binaryen两个重要的WebAssembly工具链。Alon平日工作繁忙，非常感谢他能够抽出时间为我指导技术，以及本书内容组织方面的事情，并为本书写了序言。

其次要感谢的是我的女朋友，工作本已十分繁忙，而写书路漫漫，这期间曾遇到过无数次难以下笔、不知所措的时刻，而她却总是能在关键时刻鼓励我陪我共渡难关。在写书的半年多时间里，基本上所有的双休日都是在家中或咖啡馆度过的，没有时间陪伴，希望能够和你一同见证本书出版的时刻。

还要感谢的是我的好友以及家人。早早地立下写书的誓言，正是因为有了你们每天的监督，我才能督促自己完成每天规定的任务，最终完成本书所有章节的编写。

最后要感谢的是本书的策划编辑张春雨，2017年上海QCon全球软件开发大会之后，他通过微信找到了作为讲师的我，并给予我这次写书的机会。但十分抱歉的是，由于我的日程和时间安排不当，导致本书的出版比预定时间晚了近三个月。但张老师并没有放弃我，这里真的要说一声：“感谢您对我的信任”。

关于源码

关于本书第3章、第4章和第5章中所涉及的相关源代码示例，读者可以在笔者Github账号（https://github.com/Becavalier）下的“Cinderella”和“Book-DISO-WebAssembly”仓库中找到完整的代码文件。其他章节中所涉及的部分源代码文件，也会被同时整理并放置到上面的“Book-DISO-WebAssembly”仓库中。

第1章 漫谈WebAssembly发展史 1

1.1 JavaScript的发展和弊端 1

1.1.1 快速发展与基准测试 1

1.1.2 Web新时代与不断挑战 8

1.1.3 无法跨越的“阻碍” 11

1.1.4 Chrome V8引擎链路 17

1.2 曾经尝试——ASM.js与PNaCl 28

1.2.1 失落的ASM.js 28

1.2.2 古老的NaCl与PNaCl 42

1.3 新的可能——WebAssembly 57

1.3.1 改变与颠覆 57

1.3.2 一路向前，WCG与WWG 85

第2章 WebAssembly核心原理（基于MVP标准） 90

2.1 应用与标准Web接口 90

2.1.1 编译与初始化 90

2.1.2 验证模块 106

2.1.3 遇到错误 106

2.1.4 内存分配 108

2.1.5 表 112

2.2 深入设计模型——堆栈机 118

2.2.1 堆栈式虚拟机 119

2.2.2 逆波兰表达式 125

2.2.3 Shunting-yard算法 126

2.2.4 标签与跳转 130

2.2.5 条件语句 135

2.2.6 子程序调用 137

2.2.7 变量 138

2.2.8 栈帧 139

2.2.9 堆 140

2.3 类型检查 141

2.3.1 数据指令类型 142

2.3.2 基本流程控制 144

2.3.3 基于表达式的控制流 149

2.3.4 类型堆栈的一致性 151

2.3.5 不可达代码 155

2.4 二进制编码 156

2.4.1 字节序——大端模式与小端模式 157

2.4.2 基于LEB-128的整数编码 161

2.4.3 基于IEEE-754—2008的浮点数编码 164

2.4.4 基于UTF-8的字符串编码 167

2.4.5 模块数据类型 168

2.4.6 虚拟指令与编码 169

2.4.7 类型构造符 174

2.5 模块 175

2.5.1 段 175

2.5.2 索引空间 185

2.5.3 二进制原型结构 186

2.6 内存结构 196

2.6.1 操作运算符 197

2.6.2 寻址 197

2.6.3 对齐 198

2.6.4 溢出与调整 202

第3章 动态链接与SIMD（基于MVP标准） 204

3.1 动态链接（Dynamic Linking） 204

3.1.1 ELF 206

3.1.2 重定向（Relocation） 212

3.1.3 GOT（Global Offset Table，全局偏移表） 225

3.1.4 PLT（Procedure Lookup Table，过程查询表） 229

3.1.5 基于表的Wasm模块动态链接 233

3.2 单指令多数据流（SIMD） 236

3.2.1 SIMD应用 238

3.2.2 并行与并发 243

3.2.3 费林分类法 244

3.2.4 SIMD.js & TC39 246

3.2.5 WebAssembly上的SIMD扩展 248

第4章 深入LLVM与WAT 250

4.1 LLVM——底层虚拟机 250

4.1.1 传统的编译器架构 251

4.1.2 LLVM中间表示层 252

4.1.3 基于LLVM的编译器架构 254

4.1.4 LLVM优化策略 256

4.1.5 LLVM命令行工具 261

4.1.6 WebAssembly与LLVM 267

4.2 基于LLVM开发编程语言 272

4.2.1 图灵完备与DSL 276

4.2.2 简易词法分析器 280

4.2.3 RDP与OPP算法 287

4.2.4 AST 295

4.2.5 简易语法分析器 296

4.2.6 生成LLVM-IR代码 303

4.2.7 链接优化器 307

4.2.8 编译到目标代码 308

4.2.9 整合I/O交互层 312

4.3 WAT 315

4.3.1 S-表达式 317

4.3.2 WAT/Wasm与Binary-AST 319

4.3.3 其他与设计原则 320

第5章 Emscripten基础应用 322

5.1 利器——Emscripten工具链 322

5.1.1 Emscripten发展历史 322

5.1.2 Emscripten组成结构 324

5.1.3 Emscripten下载、安装与配置 326

5.1.4 运行测试套件 330

5.1.5 编译到ASM.js 331

5.2 连接C/C++与WebAssembly 333

5.2.1 构建类型 333

5.2.2 Emscripten运行时环境 342

5.2.3 在JavaScript代码中调用C/C++函数 351

5.2.4 在C/C++代码中调用JavaScript函数 362

第6章 基于Emscripten的语言关系绑定 382

6.1 基于Embind实现关系绑定 384

6.1.1 简单类 389

6.1.2 数组与对象类型 391

6.1.3 高级类元素 393

6.1.4 重载函数 407

6.1.5 枚举类型 408

6.1.6 基本类型 409

6.1.7 容器类型 411

6.1.8 转译JavaScript代码 413

6.1.9 内存视图 416

6.2 基于WebIDL实现关系绑定 417

6.2.1 指针、引用和值类型 420

6.2.2 类成员变量 422

6.2.3 常量“const”关键字 423

6.2.4 命名空间 424

6.2.5 运算符重载 425

6.2.6 枚举类型 426

6.2.7 接口类 429

6.2.8 原始指针、空指针与void指针 430

6.2.9 默认类型转换 433

第7章 探索Emscripten高级特性 436

7.1 加入优化流程 436

7.1.1 使用编译器代码优化策略 441

7.1.2 使用GCC压缩代码 443

7.1.3 使用IndexedDB缓存模块对象 445

7.1.4 其他优化参数 452

7.2 使用标准库与文件系统 453

7.2.1 使用基于musl和libc++的标准库 454

7.2.2 虚拟文件系统结构 457

7.2.3 打包初始化文件 458

7.2.4 基本文件系统操作 460

7.2.5 懒加载 469

7.2.6 Fetch API 472

7.3 处理浏览器事件 477

7.3.1 事件注册函数 479

7.3.2 事件回调函数 479

7.3.3 通用类型与返回值类型 481

7.3.4 常用事件 482

7.4 基于EGL、OpenGL、SDL和OpenAL的多媒体处理 485

7.4.1 使用EGL与OpenGL处理图形 486

7.4.2 使用SDL处理图形 492

7.4.3 使用OpenAL处理音频 495

7.5 调试WebAssembly应用 497

7.5.1 编译器的调试信息 498

7.5.2 使用调试模式 500

7.5.3 手动跟踪 501

7.5.4 其他常用编译器调试选项 503

第8章 WebAssembly综合实践、发展与未来 504

8.1 DIP综合实践应用 504

8.1.1 应用描述 504

8.1.2 滤镜与卷积 505

8.1.3 基本组件类型与架构 509

8.1.4 编写基本页面骨架（HTML与CSS） 510

8.1.5 编写核心卷积函数（C++） 511

8.1.6 编写主渲染循环与“胶水”代码（JavaScript） 513

8.1.7 使用Emscripten编译并运行应用 518

8.1.8 性能对比 519

8.2 WebAssembly常用工具集 520

8.2.1 Cheerp 520

8.2.2 Webpack 4 522

8.2.3 Go和Rust的WebAssembly实践 525

8.2.4 Binaryen 527

8.2.5 WasmFiddle 528

8.2.6 Wabt 529

8.2.7 AssemblyScript 529

8.3 WebAssembly未来草案 529

8.3.1 GC（垃圾回收） 530

8.3.2 Multi-Thread（多线程）与原子操作 530

8.3.3 异常处理 530

8.3.4 多返回值扩展 530

8.3.5 ES模块 530

8.3.6 尾递归 531

8.3.7 BigInts的双向支持 531

8.3.8 自定义注释语法 531