第1章

初识WebAssembly

本章内容

WebAssembly是什么

WebAssembly能解决什么问题

WebAssembly的工作原理

WebAssembly的安全性来自何处

哪些语言可用于创建WebAssembly模块

提到Web开发，大多数开发者最关心的一件事就是性能——从网页加载速度到整体的响应性。若干研究表明，如果网页不能在3秒内完成加载，那么40%的访问者就会离开。这个百分比会随着网页加载秒数的增加而增加。

网页加载时间并不是唯一的问题。根据一篇谷歌论文所述，如果某个网页的性能很差，那么会有79%的访问者声称他们不太可能再次访问该网站（参见Daniel An与Pat Meenan于2016年7月合著的文章“Why marketers should care about mobile page speed？”）。

随着Web技术的发展，越来越多的应用程序转移到Web上。这就向开发者提出了另一项挑战，因为Web浏览器只支持一种编程语言：JavaScript。

从某种意义上说，在所有浏览器上只使用一种编程语言是好的——只需要编写代码一次，就可以确保它能在所有浏览器上运行。但仍需要在想要支持的每个浏览器上测试代码，因为有时各个厂商的实现方式会略有不同。另外，有时一个浏览器厂商并不与其他厂商同时添加某项新功能。总体上说，只支持一种语言比支持四五种语言简单一些。但浏览器只支持JavaScript的缺点是，我们想要移植到Web上的应用程序并不是用JavaScript编写的，而是用C++这样的语言编写的。

JavaScript是一种很棒的编程语言，但现在我们要求它做的已经超出其本来的设计意图（比如游戏所需要的密集型计算），并且还要求它能够快速执行。

1.1　WebAssembly是什么

随着浏览器开发商寻找提高JavaScript性能的方法，Mozilla（Firefox浏览器开发者）定义了一个名为asm.js的JavaScript子集。

1.1.1　WebAssembly的先驱：asm.js

asm.js具有以下优势。

你并不直接编写asm.js，而是用C或C++编写逻辑，然后将其转换为JavaScript。将代码从一种语言转换到另一种语言的过程称为transpiling。

大计算量代码可以更快地执行。当浏览器的JavaScript引擎看到名为asm pragma语句的特殊字符串（"use asm";）时，其作用相当于一个标记，以此告诉浏览器它可以使用底层系统操作而不是更昂贵的JavaScript操作。

从第一次调用就可以获得更快的代码执行速度。包含的类型提示可以告知JavaScript一个变量会持有何种类型的数据。比如，可以用a|0来提示变量a将持有一个32位整型值。这种方法很有效，因为0的位OR运算不会改变原始值，所以这么做不会产生副作用。

这些类型提示作为一个承诺向JavaScript引擎表明，如果代码将一个变量声明为整型，那么它永远不会被修改，比如不会改为字符串。因此，JavaScript引擎不需要监测代码来确定这些类型，而是可以像代码所声明的那样直接编译它。

以下代码片段展示了一个asm.js代码示例。

function AsmModule() {

"use asm"; ←---- 用于通知JavaScript后续代码为asm.js的标记 return { add: function(a, b) { a = a | 0; ←---- 类型提示表明参数为32位整型 b = b | 0; return (a + b) | 0; ←---- 类型提示表明返回值为32位整型 } }}

虽然具有以上优点，但asm.js仍有一些缺点。

所有这些类型提示可能会使文件非常大。

因为asm.js文件是JavaScript文件，所以它仍然需要由JavaScript引擎读入和解析。在像手机这样的设备上，这会是个问题，因为所有处理过程延长了加载时间，而且会消耗电量。