JavaScript 工做原理之二－如何在 V8 引擎中书写最优代码的 5 条小技巧(译)

原文请查阅这里，略有删减。

本系列持续更新中，Github 地址请查阅这里。

这是 JavaScript 工做原理的第二章。

本章将会深刻谷歌 V8 引擎的内部结构。咱们也会为如何书写更好的 JavaScript 代码提供几条小技巧－SessionStack 开发小组在构建产品的时候所遵循的最佳实践。

概述

一个 JavaScript 引擎就是一个程序或者一个解释程序，它运行 JavaScript 代码。一个 JavaScript 引擎能够用标准解释程序或者即时编译器来实现，即时编译器即以某种形式把 JavaScript 解释为字节码。

如下是一系列实现 JavaScript 引擎的热门工程：

• V8－由谷歌开源的以 C++ 语言编写
• Rhin－由 Mozilla 基金会主导，开源的，彻底使用 Java 开发。
• SpiderMonkey－初代 JavaScript 引擎，由在以前由网景浏览器提供技术支持，如今由 Firefox 使用。
• JavaScriptCore－开源，以 Nitro 的名称来推广，并由苹果为 Safari 开发。
• KJS－KDE 引擎，起先是由 Harri Porten 为 KDE 工程的 Konqueror 浏览器所开发。
• Chakra (JScript9)－IE
• Chakra (JavaScript)－Microsoft Edge
• Nashorn－做为 OpenJDK 的一部分来开源，由 Oracle Java 语言和 Tool Group 编写。
• JerryScript－一款轻量级的物联网引擎。

V8 引擎的由来

V8 引擎是由谷歌开源并以 C++ 语言编写。Google Chrome 内置了这个引擎。而 V8 引擎不一样于其它引擎的地方在于，它也被应用于时下流行的 Node.js 运行时中。

起先 V8 是被设计用来优化网页浏览器中的 JavaScript 的运行性能。为了达到更快的执行速度，V8 把 JavaScript 代码转化为更加高效的机器码而不是使用解释程序。它经过实现一个即时编译器在运行阶段把 JavaScript 代码编译为机器码，就像诸如 SpiderMonkey or Rhino (Mozilla) 等许多现代 JavaScript 引擎所作的那样。主要的区别在于 V8 不产生字节码或者任何的中间码。

V8 曾经拥有两个编译器

在 V8 5.9诞生(2017 年初) 以前，引擎拥有两个编译器：

• full-codegen－一个简单且快速的编译器用来产出简单且运行相对缓慢的机器码。
• Crankshaft－一个更复杂(即时)优化的编译器用来产生高效的代码。

V8 引擎内部也使用多个线程：

• 主线程作你所指望的事情－抓取代码，编译后执行
• 有独立的线程来编译代码，因此主线程能够保持执行而前者正在优化代码
• 一个用于性能检测的线程会告诉运行时咱们在哪一个方法上花了太多的时间，以便于让 Crankshaft 来优化这些代码
• 有几个线程用来处理垃圾回收器的清理工做。

当第一次执行 JavaScript 代码的时候，V8 使用 full-codegen 直接把解析的 JavaScript 代码解释为机器码，中间没有任何转换。这使得它一开始很是快速地运行机器码。注意到 V8 没有使用中间字节码来表示，这样就不须要解释器了。

当代码已经执行一段时间后，性能检测器线程已经收集了足够多的数据来告诉 Crankshaft 哪一个方法能够被优化。

接下来，在另外一个线程中开始进行 Crankshaft 代码优化。它把 JavaScript 语法抽象树转化为一个被称为 Hydrogen 的高级静态单赋值而且试着优化这个 Hydrogen 图表。大多数的代码优化是发生在这一层。

内联

第一个优化方法便是提早尽量多地内联代码。内联指的是把调用地址(函数被调用的那行代码)置换为被调用函数的函数体的过程。这个简单的步骤使得接下来的代码优化更有意义。

隐藏类

JavaScript 是基于原型的语言：当进行克隆的时候不会有建立类和对象。JavaScript 也是一门动态编程语言，这意味着在它实例化以后，能够任意地添加或者移除属性。

大多数的 JavaScript 解释器使用类字典的结构(基于哈希函数)在内存中存储对象属性值的内存地址(即对象的内存地址)。这种结构使得在 JavaScript 中获取属性值比诸如 Java 或者 C# 的非动态编程语言要更耗费时间。在 Java 中，全部的对象属性都在编译前由一个固定的对象布局所决定而且不可以在运行时动态添加或者删除(嗯， C# 拥有动态类型，这是另一个话题)。所以，属性值(指向这些属性的指针)以连续的缓冲区的形式存储在内存之中，彼此之间有固定的位移。位移的长度能够基于属性类型被简单地计算出来，然而在 JavaScript 中这是不可能的，由于运行时能够改变属性类型。

因为使用字典在内存中寻找对象属性的内存地址是很是低效的，V8 转而使用隐藏类。隐藏类工做原理和诸如 Java 语言中使用的固定对象布局(类)类似，除了它们是在运行时建立的之外。如今，让咱们看看他们的样子：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

var p1 = new Point(1, 2);
复制代码

一旦 "new Point(1,2)" 调用发生，V8 他建立一个叫作 "C0" 的隐藏类。

由于尚未为类 Point 建立属性，因此 "C0" 是空的。

一旦第一条语句 "this.x = x" 开始执行(在 Point 函数中), V8 将会基于 "C0" 建立第二个隐藏类。"C1" 描述了能够找到 x 属性的内存地址(相对于对象指针)。本例中，"x" 存储在位移 0 中，这意味着当之内存中连续的缓冲区来查看点对象的时候，位移起始处即和属性 "x" 保持一致。V8 将会使用 "类转换" 来更新 "C0"，"类转换" 即表示属性 "x" 是否被添加进点对象，隐藏类将会从 "C0" 转为 "C1"。如下的点对象的隐藏类如今是 "C1"。

每当对象添加新的属性，使用转换路径来把旧的隐藏类更新为新的隐藏类。隐藏类转换是重要的，由于它们使得以一样方式建立的对象能够共享隐藏类。若是两个对象共享一个隐藏类而且两个对象添加了相同的属性，转换会保证两个对象收到相同的新的隐藏类而且全部的优化过的代码都会包含这些新的隐藏类。

当运行 "this.y = y" 语句的时候，会重复一样的过程(仍是在 Point 函数中，在 "this.x = x" 语句以后)。

一个被称为 "C2" 的隐藏类被创造出来，一个类转换被添加进 "C1" 中表示属性 "y" 是否被添加进点对象(已经拥有属性 "x")以后隐藏会更改成 "C2"，而后点对象的隐藏类会更新为 "C2"。

隐藏类转换依赖于属性被添加进对象的顺序。看以下的代码片断：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

var p1 = new Point(1, 2);
p1.a = 5;
p1.b = 6;

var p2 = new Point(3, 4);
p2.b = 7;
p2.a = 8;
复制代码

如今，你会觉得 p1 和 p2 会使用相同的隐藏类和类转换。然而，对于 "p1"，先添加属性 "a" 而后再添加属性 "b"。对于 "p2"，先添加属性 "b" 而后是 "a"。这样，由于使用不一样的转换路径，"p1" 和 "p2" 会使用不一样的隐藏类。在这种状况下，更好的方法是以相同的顺序初始化动态属性以便于复用隐藏类。

内联缓存

V8 利用了另外一项优化动态类型语言的技术叫作内联缓存。内联缓存依赖于对于一样类型的对象的一样方法的重复调用的观察。这里有一份深刻阐述内联缓存的文章。

咱们将会接触到内联缓存的大概概念(万一你没有时间去通读以上的深刻理解内联缓存的文章)。

它是如何工做的呢？V8 会维护一份传入最近调用方法做为参数的对象类型的缓存，而后使用这份信息假设在将来某个时候这个对象类型将会被传入这个方法。若是 V8 可以很好地预判即将传入方法的对象类型，它就能够绕过寻找如何访问对象属性的过程，代之以使用储存的来自以前查找到的对象隐藏类的信息。

因此隐藏类的概念和内联缓存是如何联系在一块儿的呢？每当在一个指定的对象上调用方法的时候，V8 引擎不得不执行查找对象隐藏类的操做，用来取得访问指定属性的位移。在两次对于相同隐藏类的相同方法的成功调用以后，V8 忽略隐藏类的查找而且只是简单地把属性的位移添加给对象指针自身。在以后全部对这个方法的调用，V8 引擎假设隐藏类没有改变，而后使用以前查找到的位移来直接跳转到指定属性的内存地址。这极大地提高了代码运行速度。

内存缓存也是为何一样类型的对象共享隐藏类是如此重要的缘由。当你建立了两个一样类型的对象而使用不一样的隐藏类(正如以前的例子所作的那样)，V8 将不可能使用内存缓存，由于即便相同类型的两个对象，他们对应的隐藏类为他们的属性分派不一样的地址位移。

这两个对象基本上是同样的可是建立 "a" 和 "b" 的顺序是不一样的

编译为机器码

一旦优化了 Hydrogen 图表，Crankshaft 会把它降级为低级的展示叫作 Lithium。大多数 Lithium 的实现都是依赖于指定的架构的。寄存器分配发生在这一层。

最后，Lithium 会被编译为机器码。以后其它被称为 OSR 的事情发生了：堆栈替换。在开始编译和优化一个明显的耗时的方法以前，过去极有可能去运行它。V8 不会忘记代码执行缓慢的地方，而再次使用优化过的版本代码。相反，它会转换全部的上下文(堆栈，寄存器)，这样就能够在执行过程当中切换到优化的版本代码。这是一个复杂的任务，你只须要记住的是，在其它优化过程当中，V8 会初始化内联代码。V8 并非惟一拥有这项能力的引擎。

这里有被称为逆优化的安全防御，以防止当引擎所假设的事情没有发生的时候，能够进行逆向转换和把代码反转为未优化的代码。

垃圾回收

V8 使用传统的标记-清除技术来清理老旧的内存以进行垃圾回收。标记阶段会停止 JavaScript 的运行。为了控制垃圾回收的成本而且使得代码执行更加稳定，V8 使用增量标记法：不遍历整个内存堆，试图标记每一个可能的对象，它只是遍历一部分堆，而后重启正常的代码执行。下一个垃圾回收点将会从上一个堆遍历停止的地方开始执行。这会在正常的代码执行过程当中有一个很是短暂的间隙。以前提到过，清除阶段是由单独的线程处理的。

Ignition 和 TurboFan

随着 2017 早些时候 V8 5.9 版本的发布，带来了一个新的执行管道。新的管道得到了更大的性能提高和在现实 JavaScript 程序中，显著地节省了内存。

新的执行管道是创建在新的 V8 解释器 Ignition 和 V8 最新的优化编译器 TurboFan 之上的。

你能够查看 V8 小组的博文。

自从 V8 5.9 版本发布以来，full-codegen 和 Crankshaft(V8 从 2010 开始使用至今) 再也不被 V8 用来运行JavaScript，由于 V8 小组正努力跟上新的 JavaScript 语言功能以及为这些功能所作的优化。

这意味着接下来整个 V8 将会更加精简和更具可维护性。

网页和 Node.js benchmarks 评分的提高

这些提高只是一个开始。新的 Ignition 和 TurboFan 管道为将来的优化做铺垫，它会在将来几年内提高 JavaScript 性能和缩减 Chrome 和 Node.js 中的 V8 痕迹。

最后，这里有一些如何写出优化良好的，更好的 JavaScript 代码。你能够很容易地从以上的内容中总结出来，然而，为了方便你，下面有份总结：

如何写优化的 JavaScript 代码

• 对象属性的顺序：老是以相同的顺序实例化对象属性，这样隐藏类及以后的优化代码均可以被共享。
• 动态属性：实例化以后为对象添加属性会导致为以前隐藏类优化的方法变慢。相反，在对象构造函数中赋值对象的全部属性。
• 方法：重复执行相同方法的代码会比每次运行不一样的方法的代码更快(多亏了内联缓存)。
• 数列：避免使用键不是递增数字的稀疏数列。稀疏数列中没有包含每一个元素的数列称为一个哈希表。访问该数列中的元素会更加耗时。一样地，试着避免预先分配大型数组。最好是随着你使用而递增。最后，不要删除数列中的元素。这会让键稀疏。
• 标记值：V8 用 32 位来表示对象和数字。它使用一位来辨别是对象(flag=1)或者是被称为 SMI(小整数) 的整数(flag=0)，之因此是小整数是由于它是 31 位的。以后，若是一个数值比 31 位还要大，V8 将会装箱数字，把它转化为浮点数而且建立一个新的对象来存储这个数字。尽量试着使用 31 位有符号数字来避免建立 JS 对象的耗时装箱操做。

打个广告 ^.^

今日头条招人啦！发送简历到 likun.liyuk@bytedance.com ，便可走快速内推通道，长期有效！国际化PGC部门的JD以下：c.xiumi.us/board/v5/2H…，也可内推其余部门！

本系列持续更新中，Github 地址请查阅这里。