本文译者是 360 奇舞团前端资深开发工程师
原文题目：What makes WebAssembly fast?
原文作者：Lin Clark
原文地址：https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
这是 WebAssembly 文章系列的第五局部。如果你还没有读过其余的，我倡议你从头开始。
在上一篇文章，我解释过 WebAssembly 和 JavaScript 这两种技术 并非 不可得兼。咱们并不冀望开发者们都编写纯正的 WebAssembly 代码库。
也就是说，开发者们在开发应用程序时，不须要在 WebAssembly 和 JavaScript 之间做抉择。但咱们心愿开发者可能将我的项目中的局部 JavaScript 代码切换成 WebAssembly 的版本。
例如，React 的开发团队能够将他们的 reconciler 代码（即 Virtual DOM）替换成 WebAssembly 版本。应用 React 的人就什么都不必做 … 他们的应用程序会像之前一样失常运行，并因 WebAssembly 收益。
正因为 WebAssembly 执行更加疾速，能力压服 React 团队做出这种转换。然而其执行更加疾速的起因是什么呢？
JavaScript 目前的性能如何？
在了解 JavaScript 和 WebAssembly 的性能差别之前，咱们须要了解 JS 引擎在做什么。
上面我通过图示粗略形容一下现今应用程序的启动。
JS 引擎 花在每一项工作上的工夫 取决于 页面上应用的 JavaScript 代码。图示不是在准确示意性能数据。正相反，图示会提供一个 高阶模型 来比照 JS 和 WebAssembly 实现雷同性能 的 不同性能体现。
这些横条代表实现特定工作所需的工夫。
- 解析 — 源代码被转换成解释器能够运行的货色 破费的工夫。
- 编译 + 优化 — 花在 优化编译器 和 基线编译器 上的工夫。优化编译器 的某些工作 并不在主线程上做，所以这里没有将这些工作蕴含进来。
- 再优化（Re-optimizing）— 如果 JIT 发现自己假如（assumption）失败，用于从新调整的工夫。这里的调整包含 再优化 和 去优化（将 优化后的代码 回退到 基线代码）。
- 执行 — 用于运行代码的工夫。
- 垃圾回收 — 用于清理内存的工夫。
这里有一点很重要：这些工作执行并不是齐全离散的，也不会遵循特定的程序。正相反，它们是交织在一起的。做些解析，而后做些编译，接着再解析更多，执行更多，等等。
这样的 工作细分 曾经为 JavaScript 带来了微小的性能晋升，晚期的 JavaScript 可能相似这样：
晚期运行 JavaScript 只依附 解释器，执行速度是十分慢的。引入 JIT 当前，执行速度失去了十分大的晋升。
衡量之后，尽管须要领取监控和编译的开销，但开发者能够在代码不变的状况下，缩短 解析和编译的工夫。不过，性能的晋升会驱使开发者创立出更大的 JavaScript 应用程序。
这意味着仍然有晋升的空间。
WebAssembly 比照起来如何？
我估算了一个传统 web 应用程序 应用 WebAssembly 后的比照状况。
不同的浏览器解决这些阶段可能会有一些轻微的差别。我这里会以 SpiderMonkey 为例。
拉取
这个阶段没有在图示里展现进去，但其实从服务器上拉取文件是很费时间的一件事。
因为 WebAssembly 相比 JavaScript 压缩率更高，拉取就会更快。就算通过压缩算法显著升高 JavaScript 的包大小，也不会比 WebAssembly 压缩后的二进制示意 更小。
这意味着在服务器和客户端之间可能更快的传输。这一点在慢速网络下尤为显著。
解析
JavaScript 源码被拉取到浏览器后，会被转换成 AST（形象语法树）。
浏览器总是会惰性执行，只解析那些首要的货色，而对未被调用的函数创立“桩代码”（stub）。
之后，AST 会被转换成 针对 JS 引擎特化的 IR（被称为 字节码）。
与此相反，WebAssembly 无需这种转换，因为它曾经是 IR 了。只须要对它进行 解码 并 校验其中是否存在谬误。
编译 + 优化
我在 JIT 的那篇文章中解释过，JavaScript 会在执行代码的过程中进行编译。根据 运行时 应用的类型，可能须要编译 同一份代码的不同版本。
不同的浏览器在编译 WebAssembly 的形式是不同的。某些浏览器会在开始执行 WebAssembly 之前，先对它做一次 基线编译（baseline compilation），而别的浏览器会应用 JIT。
无论如何，WebAssembly 从一开始就更靠近 机器码。以程序中蕴含的 类型为例。更快的起因是：
- 编译器 在开始编译优化代码之前，无需破费工夫执行代码来观测正在应用的类型。
- 编译器 无需基于观测到的不同类型 对同一份代码的不同版本进行编译。
- LLVM 中曾经做了另外一些优化。所以加重了编译和优化代码的工作。
再优化
有时 JIT 不得不抛弃优化版本的代码 并 从新优化。
如果 JIT 基于执行中的代码发现自己的假如是谬误的，就会呈现这种状况。例如，进入循环的变量在某次迭代中产生扭转，或者有函数插入到原型链中时，会产生去优化。
去优化会带来两个代价。第一，放弃优化代码 并 回退到基线版本 须要破费一些工夫。第二，如果该函数仍然被调用了屡次，JIT 可能会抉择再次将该函数代码发送到 优化编译器 再次编译，这样的二次编译就是另一个代价。
在 WebAssembly 中，类型这种的货色是很明确的，所以 JIT 不须要基于运行时的数据做出假如。这意味着 WebAssembly 不须要经验 再优化 的循环。
执行
写出高性能的 JavaScript 是可行的。你须要理解 JIT 做出的优化能力做到这一点。例如，你须要理解如何写代码能力让编译器可能特定类型，正如我在 JIT 那篇文章中说的。
然而，大多数开发者不理解 JIT 的外部细节。甚至对于那些理解 JIT 外部细节的开发者，也很难把程序调整到最佳状态。很多帮忙代码晋升可读性的编程范式（例如，将通用业务形象成能够跨类型的函数）会妨碍编译器优化代码。
而且，不同浏览器应用 JIT 进行的优化形式是不同的，所以针对一种浏览器的外部细节进行优化可能会让你的代码在另一个浏览器中性能升高。
因而，执行 WebAssembly 代码通常会更快。很多 JIT 对 JavaScript 的优化（就像 类型特定化）对 WebAssembly 不是必要的。
另外，WebAssembly 被设计为一个编译器指标。换句话说，WebAssembly 被设计为了 编译器生成的产物，而不是让人类开发者去编写的。
因为人类程序员不须要间接编写 WebAssembly，WebAssembly 提供了一套对机器更加敌对的指令集。基于执行的代码类型，这些指令能够帮忙提速 10% 到 800%。
垃圾回收
在 JavaScript，开发者不必关怀从内存中清理那些不须要的老变量。而 JS 引擎会主动应用 垃圾回收器 解决这件事。
如果你想领有可预测的性能，那可能会很难。你无法控制垃圾回收器的工作，所以它有可能会在不适宜的时候开始工作。大多数浏览器都能很好的安顿清理工作，但 垃圾回收 对于代码执行仍然是一笔开销。
至多在当初，WebAssembly 还齐全不反对垃圾回收。内存是手动治理的（比方 C 和 C++）。只管这会使得开发者更难开发，但也让程序的性能变得更加稳固了。
总结
WebAssembly 因为下列因素执行更快：
- 拉取 WebAssembly 更节省时间。因为 WebAssembly 相比于 JavaScript 压缩率更高。
- WebAssembly 解码 相比 解析 JavaScript 耗时更少。
- 编译和优化工夫更短。因为 WebAssembly 相比 JavaScript 更贴近 机器码，而且 WebAssembly 在服务端曾经做过了优化。
- 再优化 不再会产生。因为 WebAssembly 在编译时就曾经内置了 类型等信息，所以 JS 引擎无需像看待 JavaScript 一样，在优化时揣测类型。
- 更短的执行工夫。因为开发者不须要为了更稳固的性能，去理解应用一些 无关编译器的 奇技淫巧，而且 WebAssembly 的指令集对机器更敌对。
- 不依赖垃圾回收。因为内存是手动治理的。
这就是我所认为的，WebAssembly 在做同一工作时 优于 JavaScript 的中央。
在某些状况下，WebAssembly 会无奈施展预期性能。另外，WebAssembly 还有一些行将产生的改变，它会因而变得更快。我会在下篇文章中聊聊这几点。
原文链接：https://zhuanlan.zhihu.com/p/422541443