JavaScript是如何工做的：深刻V8引擎&编写优化代码的5个技巧

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

---

为了保证的可读性，本文采用意译而非直译。

本系列的 第一篇文章 主要介绍引擎、运行时和调用堆栈。第二篇文章将深刻谷歌 V8 的JavaScript引擎的内部。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

概述

JavaScript引擎是执行 JavaScript 代码的程序或解释器。JavaScript引擎能够实现为标准解释器，或者以某种形式将JavaScript编译为字节码的即时编译器。

觉得实现JavaScript引擎的流行项目的列表：

• V8 — 开源，由 Google 开发，用 C ++ 编写
• Rhino — 由 Mozilla 基金会管理，开源，彻底用 Java 开发
• SpiderMonkey — 是第一个支持 Netscape Navigator 的 JavaScript 引擎，目前正供 Firefox 使用
• JavaScriptCore — 开源，以Nitro形式销售，由苹果为Safari开发
• KJS — KDE 的引擎，最初由 Harri Porten 为 KDE 项目中的 Konqueror 网页浏览器开发
• Chakra (JScript9) — Internet Explorer
• Chakra (JavaScript) — Microsoft Edge
• Nashorn, 做为 OpenJDK 的一部分，由 Oracle Java 语言和工具组编写
• JerryScript —  物联网的轻量级引擎

为何要建立V8引擎?

由谷歌构建的V8引擎是开源的，使用c++编写。这个引擎是在谷歌Chrome中使用的，可是，与其余引擎不一样的是 V8 也用于流行的 node.js。

V8最初被设计用来提升web浏览器中JavaScript执行的性能。为了得到速度，V8 将 JavaScript 代码转换成更高效的机器码，而不是使用解释器。它经过实现 JIT (Just-In-Time) 编译器将 JavaScript 代码编译为执行时的机器码，就像许多现代 JavaScript 引擎(如SpiderMonkey或Rhino (Mozilla)) 所作的那样。这里的主要区别是 V8 不生成字节码或任何中间代码。

V8 曾有两个编译器

在 V8 的 5.9 版本出来以前，V8 引擎使用了两个编译器：

• full-codegen — 一个简单和很是快的编译器，产生简单和相对较慢的机器码。
• Crankshaft — 一种更复杂（Just-In-Time）的优化编译器，生成高度优化的代码。

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

• 主线程执行你所指望的操做：获取代码、编译代码并执行它
• 还有一个单独的线程用于编译，所以主线程能够在前者优化代码的同时继续执行
• 一个 Profiler 线程，它会告诉运行时咱们花了不少时间，让 Crankshaft 能够优化它们
• 一些线程处理垃圾收集器

当第一次执行 JavaScript 代码时，V8 利用 full-codegen 编译器，直接将解析的 JavaScript 翻译成机器代码而不进行任何转换。这使得它能够很是快速地开始执行机器代码。请注意，V8 不使用中间字节码，从而不须要解释器。

当代码已经运行一段时间后，分析线程已经收集了足够的数据来判断应该优化哪一个方法。

接下来，Crankshaft  从另外一个线程开始优化。它将 JavaScript 抽象语法树转换为被称为 Hydrogen 的高级静态单分配（SSA）表示，并尝试优化 Hydrogen 图，大多数优化都是在这个级别完成的。

内联代码

第一个优化是提早内联尽量多的代码。内联是用被调用函数的主体替换调用点（调用函数的代码行）的过程。这个简单的步骤容许下面的优化更有意义。

隐藏类

JavaScript是一种基于原型的语言：没有使用克隆过程建立类和对象。JavaScript也是一种动态编程语言，这意味着能够在实例化后轻松地在对象中添加或删除属性。

大多数 JavaScript 解释器使用相似字典的结构（基于哈希函数）来存储对象属性值在内存中的位置，这种结构使得在 JavaScript 中检索属性的值比在 Java 或 C＃ 等非动态编程语言中的计算成本更高。

在Java中，全部对象属性都是在编译以前由固定对象布局肯定的，而且没法在运行时动态添加或删除（固然，C＃具备动态类型，这是另外一个主题）。

所以，属性值（或指向这些属性的指针）能够做为连续缓冲区存储在存储器中，每一个缓冲区之间具备固定偏移量， 能够根据属性类型轻松肯定偏移的长度，而在运行时能够更改属性类型的 JavaScript 中这是不可能的。

因为使用字典查找内存中对象属性的位置效率很是低，所以 V8 使用了不一样的方法：隐藏类。隐藏类与 Java 等语言中使用的固定对象（类）的工做方式相似，只是它们是在运行时建立的。如今，让咱们看看他们实际的例子：

一旦 “new Point（1，2）” 调用发生，V8 将建立一个名为 “C0” 的隐藏类。

还没有为 Point 定义属性，所以“C0”为空。

一旦第一个语句“this.x = x”被执行（在“Point”函数内），V8 将建立一个名为 “C1” 的第二个隐藏类，它基于“C0”。 “C1”描述了能够找到属性 x 的存储器中的位置（相对于对象指针）。

在这种状况下，“x”存储在偏移0处，这意味着当将存储器中的 point 对象视为连续缓冲区时，第一偏移将对应于属性 “x”。 V8 还将使用 “类转换” 更新 “C0” ，该类转换指出若是将属性 “x” 添加到 point 对象，则隐藏类应从 “C0” 切换到 “C1”。 下面的 point 对象的隐藏类如今是“C1”。

每次将新属性添加到对象时，旧的隐藏类都会更新为指向新隐藏类的转换路径。隐藏类转换很是重要，由于它们容许在以相同方式建立的对象之间共享隐藏类。若是两个对象共享一个隐藏类而且同一属性被添加到它们中，则转换将确保两个对象都接收相同的新隐藏类以及随其附带的全部优化代码。

当语句 “this.y = y” 被执行时，会重复一样的过程（在 “Point” 函数内部，“this.x = x”语句以后）。

一个名为“C2”的新隐藏类会被建立，若是将一个属性 “y” 添加到一个 Point 对象（已经包含属性“x”），一个类转换会添加到“C1”，则隐藏类应该更改成“C2”，point 对象的隐藏类更新为“C2”。

隐藏类转换取决于将属性添加到对象的顺序。看看下面的代码片断：

如今，假设对于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 ：on-stack replacement（堆栈替换）。在咱们开始编译和优化一个明确的长期运行的方法以前，咱们可能会运行堆栈替换。 V8 不仅是缓慢执行堆栈替换，并再次开始优化。相反，它会转换咱们拥有的全部上下文（堆栈，寄存器），以便在执行过程当中切换到优化版本上。这是一个很是复杂的任务，考虑到除了其余优化以外，V8 最初还将代码内联。 V8 不是惟一可以作到的引擎。

有一种叫去优化的安全措施来进行相反的转换，并在假设引擎无效的状况下返回未优化的代码。

垃圾收集

对于垃圾收集，V8采用传统的 mark-and-sweep 算法 来清理旧一代。 标记阶段应该中止JavaScript执行。 为了控制GC成本并使执行更稳定，V8使用增量标记：不是遍历整个堆，尝试标记每一个可能的对象，它只是遍历堆的一部分，而后恢复正常执行。下一个GC中止将从上一个堆行走中止的位置继续，这容许在正常执行期间很是短暂的暂停，如前所述，扫描阶段由单独的线程处理。

如何编写优化的 JavaScript

1. 对象属性的顺序：始终以相同的顺序实例化对象属性，以即可以共享隐藏的类和随后优化的代码。
2. 动态属性： 由于在实例化以后向对象添加属性将强制执行隐藏的类更改，并下降以前隐藏类所优化的全部方法的执行速度，因此在其构造函数中分配全部对象的属性。
3. 方法：重复执行相同方法的代码将比仅执行一次的多个不一样方法（因为内联缓存）的代码运行得更快。
4. 数组：避免稀疏数组，其中键值不是自增的数字，并无存储全部元素的稀疏数组是哈希表。这种数组中的元素访问开销较高。另外，尽可能避免预分配大数组。最好是按需增加。最后，不要删除数组中的元素，这会使键值变得稀疏。
5. 标记值：V8 使用 32 位表示对象和数值。因为数值是 31 位的，它使用了一位来区分它是一个对象（flag = 1）仍是一个称为 SMI（SMall Integer）整数（flag = 0）。那么，若是一个数值大于 31 位，V8会将该数字装箱，把它变成一个双精度数，并建立一个新的对象来存放该数字。尽量使用 31 位有符号数字，以免对 JS 对象的高开销的装箱操做。

Ignition and TurboFan

随着2017年早些时候发布V8 5.9，引入了新的执行管道。 这个新的管道在实际的JavaScript应用程序中实现了更大的性能提高和显着节省内存。

新的执行流程是创建在 Ignition（ V8 的解释器）和 TurboFan（ V8 的最新优化编译器）之上的。

自从 V8 5.9 版本问世以来，因为 V8 团队一直努力跟上新的 JavaScript 语言特性以及这些特性所须要的优化，V8 团队已经再也不使用 full-codegen 和 Crankshaft（自 2010 年以来为 V8 技术所服务）。

这意味着 V8 总体上将有更简单和更易维护的架构。

这些改进只是一个开始。 新的Ignition和TurboFan管道为进一步优化铺平了道路，这些优化将在将来几年内提高JavaScript性能并缩小V8在Chrome和Node.js中的占用空间。

原文：https://blog.sessionstack.com...

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。