WebAssembly实战

在人们极力渴求提高JavaScript性能的情况下，WebAssembly应运而生，现已得到所有主流Web浏览器的支持。由于其卓越的性能和可移植性，WebAssembly也被用于Web浏览器之外的许多场景。本书围绕WebAssembly技术栈介绍如何通过C、C 等语言编写高性能的浏览器端应用程序。你将掌握WebAssembly的基础知识，学习如何创建原生WebAssembly模块，与JavaScript组件交互，使用WebAssembly文本格式进行调试，并利用多线程支持机制。

C.杰勒德·加伦特（C. Gerard Gallant），微软认证专家，Dovico公司高级软件工程师，DZone技术网站专栏作者。 【译者简介】 计算机专业硕士，软件工程师，现居于上海，另译有《你不知道的JavaScript》（中卷和下卷）。

第 一部分 起步

第 1 章 初识WebAssembly 2

1.1 WebAssembly是什么 2

1.1.1 WebAssembly的先驱：asm.js 3

1.1.2 从asm.js到MVP 3

1.2 WebAssembly解决了哪些问题 4

1.2.1 性能改进 4

1.2.2 比JavaScript更快的启动速度 5

1.2.3 可以在浏览器中使用JavaScript之外的语言 5

1.2.4 代码复用的机会 5

1.3 WebAssembly的工作原理 6

1.3.1 编译器工作原理概览 6

1.3.2 模块的加载、编译和实例化 8

1.4 WebAssembly 模块的结构 9

1.4.1 前导 10

1.4.2 已知段 10

1.4.3 自定义段 10

1.5 WebAssembly文本格式 10

1.6 WebAssembly如何获得安全性 11

1.7 哪些语言可用来创建WebAssembly模块 11

1.8 我的模块可以用在何处 12

1.9 小结 13

第 2 章 初探WebAssembly模块内部 14

2.1 已知段 15

2.2 自定义段 18

2.3 小结 19

第 3 章 创建自己的第 一个WebAssembly模块 20

3.1 Emscripten工具包 20

3.2 WebAssembly模块 21

3.3 Emscripten输出选项 23

3.4 用Emscripten编译C/C 并使用HTML模板 24

3.5 让Emscripten生成JavaScript plumbing代码 29

3.5.1 用Emscripten生成的JavaScript编译C/C 30

3.5.2 创建一个供浏览器使用的基本HTML网页 32

3.6 让Emscripten只生成WebAssembly文件 35

3.6.1 用Emscripten将C/C 编译为副模块 36

3.6.2 浏览器中的加载与实例化 38

3.7 功能检测：如何测试WebAssembly是否可用 44

3.8 现实用例 45

3.9 练习 46

3.10 小结 46

第二部分 使用模块

第 4 章 复用现有C 代码库 48

4.1 用C/C 创建带Emscripten plumbing的模块 50

4.1.1 修改C 代码 50

4.1.2 将代码编译为WebAssembly模块 55

4.1.3 创建网页 56

4.1.4 创建与模块交互的JavaScript代码 57

4.1.5 查看结果 62

4.2 用C/C 创建不使用Emscripten的模块 63

4.2.1 修改C 代码 64

4.2.2 将代码编译为WebAssembly模块 69

4.2.3 创建与模块交互的JavaScript代码 69

4.2.4 查看结果 74

4.3 现实用例 74

4.4 练习 74

4.5 小结 75

第 5 章 创建调用JavaScript的WebAssembly模块 76

5.1 用C/C 创建带Emscripten plumbing的模块 78

5.1.1 调整C 代码 79

5.1.2 创建将要包含到Emscripten生成的JavaScript文件中的JavaScript代码 81

5.1.3 将代码编译为WebAssembly模块 82

5.1.4 调整网页的JavaScript代码 83

5.1.5 查看结果 86

5.2 用C/C 创建不带Emscripten plumbing的模块 86

5.2.1 C 修改 88

5.2.2 将代码编译为WebAssembly模块 89

5.2.3 调整将与模块交互的JavaScript代码 90

5.2.4 查看结果 92

5.3 现实用例 93

5.4 练习 93

5.5 小结 93

第 6 章 创建通过函数指针与JavaScript交流的WebAssembly模块 95

6.1 用C/C 创建带Emscripten plumbing的模块 96

6.1.1 使用JavaScript传给模块的函数指针 96

6.1.2 调整C 代码 97

6.1.3 将代码编译为WebAssembly模块 101

6.1.4 调整网页JavaScript代码 102

6.1.5 查看结果 107

6.2 用C/C 创建不带Emscriptenplumbing的模块 108

6.2.1 使用JavaScript传给模块的函数指针 109

6.2.2 修改C 代码 109

6.2.3 将代码编译为WebAssembly模块 110

6.2.4 调整与模块交互的JavaScript 111

6.2.5 查看结果 119

6.3 现实用例 119

6.4 练习 120

6.5 小结 120

第三部分 高级主题

第 7 章 动态链接：基础 122

7.1 动态链接：优点与缺点 123

7.2 动态链接选项 123

7.2.1 副模块与主模块 124

7.2.2 动态链接：dlopen 125

7.2.3 动态链接：dynamicLibraries 133

7.2.4 动态链接：WebAssembly JavaScript API 137

7.3 动态链接回顾 143

7.4 现实用例 144

7.5 练习 144

7.6 小结 144

第 8 章 动态链接：实现 145

8.1 创建WebAssembly模块 147

8.1.1 将文件validate.cpp中的逻辑分割为两个文件 149

8.1.2 为Place Order表逻辑创建新的C 文件 151

8.1.3 用Emscripten生成WebAssembly副模块 154

8.1.4 定义一个JavaScript函数来处理验证问题 158

8.1.5 用Emscripten生成WebAssembly主模块 158

8.2 调整网页 160

8.2.1 调整网页的JavaScript代码 163

8.2.2 查看结果 171

8.3 现实用例 172

8.4 练习 172

8.5 小结 173

第9 章 线程：Web worker与pthread 174

9.1 Web worker的好处 175

9.2 使用Web worker的考量 176

9.3 用Web worker预取WebAssembly模块 176

9.3.1 调整calculate_primes逻辑 178

9.3.2 用Emscripten生成WebAssembly文件 180

9.3.3 复制文件到正确位置 180

9.3.4 为网页创建HTML 文件 181

9.3.5 为网页创建JavaScript文件 182

9.3.6 创建Web worker的JavaScript文件 184

9.3.7 查看结果 185

9.4 使用pthread 186

9.4.1 调整calculate_primes逻辑以创建并使用4个pthread线程 187

9.4.2 用Emscripten生成WebAssembly文件 190

9.4.3 查看结果 191

9.5 现实用例 193

9.6 练习 194

9.7 小结 194

第 10 章 Node.js中的WebAssembly模块 195

10.1 回顾前面所学内容 196

10.2 服务器端验证 196

10.3 使用Emscripten创建模块 197

10.3.1 加载WebAssembly模块 198

10.3.2 调用WebAssembly模块内函数 199

10.3.3 调入JavaScript代码 202

10.3.4 调用JavaScript函数指针 204

10.4 使用WebAssembly JavaScript API 206

10.4.1 加载并实例化WebAssembly模块 207

10.4.2 调用WebAssembly模块内函数 208

10.4.3 WebAssembly模块调入JavaScript代码 212

10.4.4 WebAssembly模块调用JavaScript函数指针 215

10.5 现实用例 218

10.6 练习 219

10.7 小结 219

第四部分 调试与测试

第 11 章 WebAssembly文本格式 222

11.1 用WebAssembly文本格式创建游戏的核心逻辑 225

11.1.1 模块段 225

11.1.2 注释 227

11.1.3 函数签名 227

11.1.4 module节点 228

11.1.5 import节点 229

11.1.6 global节点 232

11.1.7 export节点 233

11.1.8 start节点 234

11.1.9 code节点 235

11.1.10 type节点 252

11.1.11 data节点 254

11.2 从文本格式生成WebAssembly模块 255

11.3 Emscripten生成模块 256

11.3.1 创建C 文件 256

11.3.2 生成WebAssembly模块 257

11.4 创建HTML和JavaScript文件 258

11.4.1 修改HTML文件 258

11.4.2 创建JavaScript文件 260

11.5 查看结果 265

11.6 现实用例 265

11.7 练习 265

11.8 小结 266

第 12 章 调试 267

12.1 扩展游戏 268

12.2 调整HTML代码 269

12.3 显示试验次数 270

12.3.1 JavaScript函数generateCards 271

12.3.2 调整文本格式 272

12.3.3 生成Wasm文件 272

12.3.4 测试修改 274

12.4 增加试验次数 275

12.4.1 JavaScript函数updateTriesTotal 276

12.4.2 调整文本格式 277

12.4.3 生成Wasm文件 278

12.4.4 测试修改 279

12.5 更新总结屏幕 286

12.5.1 JavaScript函数levelComplete 287

12.5.2 调整文本格式 288

12.5.3 生成Wasm文件 289

12.5.4 测试修改 290

12.6 练习 290

12.7 小结 291

第 13 章 测试——然后呢 292

13.1 安装JavaScript测试框架 293

13.1.1 文件package.json 294

13.1.2 安装Mocha和Chai 295

13.2 创建并运行测试 295

13.2.1 编写测试 296

13.2.2 从命令行运行测试 299

13.2.3 加载测试的HTML页面 300

13.2.4 从浏览器运行测试 302

13.2.5 让测试通过 303

13.3 下一步是什么 304

13.4 练习 304

13.5 小结 304

附录A 安装与工具设置 306

附录B ccall、cwrap以及直接函数调用 314

附录C Emscripten宏 320

附录D 练习答案 335

附录E 文本格式进阶 354