JavaScript 引擎基础：Shapes 和 Inline Caches

JavaScript 引擎基础：Shapes 和 Inline Caches

hijiangtao

​

中国科学院大学 计算机应用技术硕士

260 人赞同了该文章

前言：本文也能够被称作 “JavaScript Engines: The Good Parts™”，其来自 Mathias 和 Benedikt 在 JSConf EU 2018 上为本文主题演讲所起的题目，更多 JSconf EU 2018 上有趣的主题分享能够参考这个答案。

本文就全部 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不只仅局限于 V8 引擎。做为一名 JavaScript 开发者，深刻了解 JavaScript 引擎是如何工做的将有助于你了解本身所写代码的性能特征。

译者注：更多关于 V8 引擎、Chrome 浏览器以及 Node 源码与背后细节的内容，推荐你们能够关注 

@justjavac

 大大的知乎专栏 V八、Chrome、Node.js 。

回到本文的内容，全文共由五个部分组成：

1. JavaScript 引擎工做流程：介绍 JavaScript 引擎的处理流水线，这一部分会涉及到解释器／编译器的内容，且会分点介绍不一样引擎间的差异与共同点；
2. JavaScript 对象模型；
3. 属性访问的优化：经过 Shapes、Transistion 链与树、ICs 等概念的穿插介绍引擎是如何优化获取对象属性的；
4. 高效存储数组；
5. Take-aways：对全文内容作了一个小结，并给了两点建议。

原文 JavaScript engine fundamentals: Shapes and Inline Caches，做者 @Benedikt 和 @Mathias，译者 hijiangtao，如下开始正文。

若是你倾向看视频演讲，请移步  YouTube  查看更多。

1. JavaScript 引擎工做流程

这一切都得从你所写的 JavaScript 代码开始提及。JavaScript 引擎在解析源码后将其转换为抽象语法树（AST）。基于 AST，解释器即可以开始工做并产生字节码。很是棒！此时引擎正在执行 JavaScript 代码。

为了使它执行得更快，能够将字节码与分析数据（profiling data）一块儿发给优化编译器。优化编译器根据已有的分析数据作出特定假设，而后生成高度优化的机器码。

若是在某点上一个假设被证实是不正确的，那么优化编译器会去优化并回退至解释器部分。

1.1 JavaScript 引擎中的解释器/编译器流程

如今，让咱们关注实际执行 JavaScript 代码的这部分流程，即代码被解释和优化的地方，并讨论其在主要的 JavaScript 引擎之间存在的一些差别。

通常来讲，（全部 JavaSciript 引擎）都有一个包含解释器和优化编译器的处理流程。其中，解释器能够快速生成未优化的字节码，而优化编译器会须要更长的时间，以便最终生成高度优化的机器码。

这个通用流程几乎与在 Chrome 和 Node.js 中使用的 V8 引擎工做流程一致：

V8 中的解释器被称做 Ignition，它负责生成并执行字节码。当它运行字节码时会收集分析数据，而它以后能够被用于加快（代码）执行的速度。当一个函数变得 hot，例如它常常被调用，生成的字节码和分析数据则会被传给 TurboFan——咱们的优化编译器，它会依据分析数据生成高度优化的机器码。

SpiderMonkey，在 Firefox 和 SpiderNode 中使用的 Mozilla 的 JavaScript 引擎，则有一些不一样的地方。它们有两个优化编译器。解释器将代码解释给 Baseline 编译器，该编译器能够生成部分优化的代码。 结合运行代码时收集的分析数据，IonMonkey 编译器能够生成高度优化的代码。 若是尝试优化失败，IonMonkey 将回退到 Baseline 阶段的代码。

Chakra，用于 Edge 和 Node-ChakraCore 两个项目的微软 JavaScript 引擎，也有相似两个优化编译器的设置。解释器将代码优化成 SimpleJIT——其中 JIT 表明 Just-In-Time 编译器——它能够生成部分优化的代码。 结合分析数据，FullJIT 能够生成更深刻优化的代码。

JavaScriptCore（缩写为JSC），Apple 的 JavaScript 引擎，被用于 Safari 和 React Native 两个项目中，它经过三种不一样的优化编译器使效果达到极致。低级解释器 LLInt将代码解释后传递给 Baseline 编译器，而（通过 Baseline 编译器）优化后的代码便传给了 DFG 编译器，（在 DFG 编译器处理后）结果最终传给了 FTL 编译器进行处理。

为何有些引擎会拥有更多的优化编译器呢？这彻底是一些折衷的取舍。解释器能够快速生成字节码，但字节码一般不够高效。另外一方面，优化编译器处理须要更长的时间，但最终会生成更高效的机器码。究竟是快速获取可执行的代码（解释器），仍是花费更多时间但最终以最佳性能运行代码（优化编译器），这其中包含一个平衡点。一些引擎选择添加具备不一样耗时/效率特性的多个优化编译器，以更高的复杂性为代价来对这些折衷点进行更细粒度的控制。

咱们刚刚强调了每一个 JavaScript 引擎中解释器和优化编译器流程中的主要区别。除了这些差别以外，全部 JavaScript 引擎都有相同的架构：那就是拥有一个解析器和某种解释器/编译器流程。

2. JavaScript 对象模型

经过关注一些方面的具体实现，让咱们来看看 JavaScript 引擎间还有哪些共同之处。

例如，JavaScript 引擎是如何实现 JavaScript 对象模型的，以及他们使用了哪些技巧来加快获取 JavaScript 对象属性的速度？事实证实，全部主要引擎在这一点上的实现都很类似。

ECMAScript 规范基本上将全部对象定义为由字符串键值映射到 property 属性 的字典。

除 [[Value]] 外，规范还定义了以下属性：

• [[Writable]] 决定该属性是否能够被从新赋值；
• [[Enumerable]] 决定该属性是否出如今 for-in 循环中；
• [[Configurable]] 决定该属性是否可被删除。

[[双方括号]]的符号表示看上去有些特别，但这正是规范定义不能直接暴露给 JavaScript 的属性的表示方法。在 JavaScript 中你仍然能够经过 Object.getOwnPropertyDescriptor API 得到指定对象的属性值：

const object = { foo: 42 }; Object.getOwnPropertyDescriptor(object, 'foo'); // → { value: 42, writable: true, enumerable: true, configurable: true } 

JavaScript 就是这个定义对象的，那么数组呢？

你能够将数组想象成一组特殊的对象。二者的一个区别即是数组会对数组索引进行特殊的处理。这里所指的数组索引是 ECMAScript 规范中的一个特殊术语。在 JavaScript 中，数组被限制最多只能拥有2^32-1项。数组索引是指该限制内的任何有效索引，即从0到2^32-2的任何整数。

另外一个区别是数组还有一个充满魔力的 length 属性。

const array = ['a', 'b']; array.length; // → 2 array[2] = 'c'; array.length; // → 3 

在这个例子中，array 在生成时长度单位为2。接着咱们向索引为2的位置分配了另外一个元素，length 属性便自动更新。

JavaScript 在定义数组的方式上和对象相似。例如，包括数组索引的全部键值都明确地表示为字符串。 数组中的第一个元素存储在键值为 ‘0’ 的位置下。

'length' 属性刚好是另外一个不可枚举且不可配置的属性。

一个元素一旦被添加到数组中，JavaScript 便会自动更新 'length' 属性的 [[Value]] 属性值。

通常来讲，数组的行为与对象也很是类似。

3. 属性访问的优化

让咱们深刻了解下 JavaScript 引擎是如何有效地应对对象相关操做的。

观察 JavaScript 程序，访问属性是最多见的一个操做。使得 JavaScript 引擎可以快速获取属性便相当重要。

const object = { foo: 'bar', baz: 'qux', }; // Here, we’re accessing the property `foo` on `object`: doSomething(object.foo); // ^^^^^^^^^^ 

3.1 Shapes

在 JavaScript 程序中，多个对象具备相同的键值属性是很是常见的。这些对象都具备相同的形状。

const object1 = { x: 1, y: 2 }; const object2 = { x: 3, y: 4 }; // `object1` and `object2` have the same shape. 

访问具备相同形状对象的相同属性也很常见：

function logX(object) { console.log(object.x); // ^^^^^^^^ } const object1 = { x: 1, y: 2 }; const object2 = { x: 3, y: 4 }; logX(object1); logX(object2); 

考虑到这一点，JavaScript 引擎能够根据对象的形状来优化对象的属性获取。它是这么实现的。

假设咱们有一个具备属性 x 和 y 的对象，它使用咱们前面讨论过的字典数据结构：它包含用字符串表示的键值，而它们指向各自的属性值。

若是你访问某个属性，例如 object.y，JavaScript 引擎会在 JSObject 中查找键值 'y'，而后加载相应的属性值，最后返回 [[Value]]。

但这些属性值在内存中是如何存储的呢？咱们是否应该将它们存储为 JSObject 的一部分？假设咱们稍后会遇到更多同形状的对象，那么在 JSObject 自身存储包含属性名和属性值的完整字典即是很浪费（空间）的，由于对具备相同形状的全部对象咱们都重复了一遍属性名称。 它太冗余且引入了没必要要的内存使用。 做为优化，引擎将对象的 Shape 分开存储。

Shape 包含除 [[Value]] 以外的全部属性名和其他特性。相反，Shape 包含 JSObject 内部值的偏移量，以便 JavaScript 引擎知道去哪查找具体值。每一个具备相同形状的 JSObject 都指向这个 Shape 实例。 如今每一个 JSObject 只须要存储对这个对象来讲惟一的那些值。

当咱们有多个对象时，优点变得清晰可见。不管有多少个对象，只要它们具备相同的形状，咱们只须要将它们的形状与键值属性信息存储一次！

全部的 JavaScript 引擎都使用了形状做为优化，但称呼各有不一样：

• 学术论文称它们为 Hidden Classes（容易与 JavaScript 中的类概念混淆）
• V8 将它们称为 Maps（容易与 JavaScript 中的 Map 概念混淆）
• Chakra 将它们称为 Types（容易与 JavaScript 中的动态类型和关键字 typeof 混淆）
• JavaScriptCore 称它们为 Structures
• SpiderMonkey 称他们为 Shapes

本文中，咱们会继续称它为 shapes。

3.2 Transition 链与树

若是你有一个具备特定形状的对象，但你又向它添加了一个属性，此时会发生什么？ JavaScript 引擎是如何找到这个新形状的？

const object = {}; object.x = 5; object.y = 6; 

在 JavaScript 引擎中，shapes 的表现形式被称做 transition 链。如下展现一个示例：

该对象在初始化时没有任何属性，所以它指向一个空的 shape。下一个语句为该对象添加值为 5 的属性 “x”，因此 JavaScript 引擎转向一个包含属性 “x” 的 Shape，并向 JSObject 的第一个偏移量为0处添加了一个值 5。 接下来一个语句添加了一个属性 'y'，引擎便转向另外一个包含 'x' 和 'y' 的 Shape，并将值 6 附加到 JSObject（位于偏移量 1 处）。

咱们甚至不须要为每一个 Shape 存储完整的属性表。相反，每一个 Shape 只须要知道它引入的新属性。 例如在此例中，咱们没必要在最后一个 Shape 中存储关于 'x' 的信息，由于它能够在更早的链上被找到。要作到这一点，每个 Shape 都会与其以前的 Shape 相连：

若是你在 JavaScript 代码中写到了 o.x，则 JavaScript 引擎会沿着 transition 链去查找属性 “x”，直到找到引入属性 “x”的 Shape。

可是，若是不能只建立一个 transition 链呢？例如，若是你有两个空对象，而且你为每一个对象都添加了一个不一样的属性？

const object1 = {}; object1.x = 5; const object2 = {}; object2.y = 6; 

在这种状况下咱们便必须进行分支操做，此时咱们最终会获得一个 transition 树 而不是 transition 链：

在这里，咱们建立一个空对象 a，而后为它添加一个属性 'x'。 咱们最终获得一个包含单个值的 JSObject，以及两个 Shapes：空 Shape 和仅包含属性 x的 Shape。

第二个例子也是从一个空对象 b 开始的，但以后被添加了一个不一样的属性 'y'。咱们最终造成两个 shape 链，总共是三个 shape。

这是否意味着咱们老是须要从空 shape 开始呢？ 并非。引擎对已包含属性的对象字面量会应用一些优化。比方说，咱们要么从空对象字面量开始添加 x 属性，要么有一个已经包含属性 x 的对象字面量：

const object1 = {}; object1.x = 5; const object2 = { x: 6 }; 

在第一个例子中，咱们从空 shape 开始，而后转向包含 x 的 shape，这正如咱们咱们以前所见。

在 object2 一例中，直接生成具备属性 x 的对象是有意义的，而不是从空对象开始而后进行 transition 链接。

包含属性 'x' 的对象字面量从包含 'x' 的 shape 开始，能够有效地跳过空的 shape。V8 和 SpiderMonkey （至少）正是这么作的。这种优化缩短了 transition 链，并使得从字面量构造对象更加高效。

Benedikt 的博文 surprising polymorphism in React applications 讨论了这些微妙之处是如何影响实际性能的。

3.3 Inline Caches (ICs)

Shapes 背后的主要动机是 Inline Caches 或 ICs 的概念。ICs 是促使 JavaScript 快速运行的关键因素！JavaScript 引擎利用 ICs 来记忆去哪里寻找对象属性的信息，以减小昂贵的查找次数。

这里有一个函数 getX，它接受一个对象并从中取出属性 x 的值：

function getX(o) { return o.x; } 

若是咱们在 JSC 中执行这个函数，它会生成以下字节码：

指令一 get_by_id 从第一个参数（arg1）中加载属性 'x' 值并将其存储到地址 loc0 中。 第二条指令返回咱们存储到 loc0 中的内容。

JSC 还在 get_by_id 指令中嵌入了 Inline Cache，它由两个未初始化的插槽组成。

如今让咱们假设咱们用对象 {x：'a'} 调用 getX 函数。正如咱们所知，这个对象有一个包含属性 'x' 的 Shape，该 Shape 存储了属性 x 的偏移量和其余特性。当你第一次执行该函数时，get_by_id 指令将查找属性 'x'，而后发现其值存储在偏移量 0 处。

嵌入到 get_by_id 指令中的 IC 存储该属性的 shape 和偏移量：

对于后续运行，IC 只须要对比 shape，若是它与之前相同，只需从记忆的偏移量处加载该属性值。具体来讲，若是 JavaScript 引擎看到一个对象的 shape 以前被 IC 记录过，它则再也不须要接触属性信息——而是彻底能够跳过昂贵的属性信息查找（过程）。这比每次查找属性要快得多。

4. 高效存储数组

对于数组来讲，存储属性诸如数组索引等是很是常见的。这些属性的值被称为数组元素。存储每一个数组中的每一个数组元素的属性特性（property attributes）将是一种很浪费的存储方式。相反，因为数组索引默认属性是可写的、可枚举的而且能够配置的，JavaScript 引擎利用这一点，将数组元素与其余命名属性分开存储。

考虑这个数组：

const array = [ '#jsconfeu', ]; 

引擎存储了数组长度（1），并指向包含 offset 和 'length' 特性属性的 Shape。

这与咱们以前见过的相似……但数组值存储在哪里呢？

每一个数组都有一个单独的 elements backing store，其中包含全部数组索引的属性值。JavaScript 引擎没必要为数组元素存储任何属性特性，由于它们一般都是可写的，可枚举的以及可配置的。

那么若是不是一般的状况呢？若是更改了数组元素的属性，该怎么办？

// Please don’t ever do this! const array = Object.defineProperty( [], '0', { value: 'Oh noes!!1', writable: false, enumerable: false, configurable: false, } ); 

上面的代码片断定义了一个名为 '0' 的属性（这刚好是一个数组索引），但其特性（value）被设置为了一个非默认值。

在这种边缘状况下，JavaScript 引擎会将所有的 elements backing store 表示为一个由数组下标映射到属性特性的字典。

即便只有一个数组元素具备非默认属性，整个数组的 backing store 处理也会进入这种缓慢而低效的模式。 避免在数组索引上使用 Object.defineProperty！ （我不知道为何你会想这样作。这看上去彷佛是一个奇怪的且毫无价值的事情。）

5. Take-aways

咱们已经学习了 JavaScript 引擎是如何存储对象和数组的，以及 Shapes 和 IC 是如何优化针对它们的常见操做的。基于这些知识，咱们肯定了一些有助于提高性能的实用 JavaScript 编码技巧：

• 始终以相同的方式初始化对象，以确保它们不会走向不一样的 shape 方向。
• 不要混淆数组元素的属性特性（property attributes），以确保能够高效地存储和操做它们。

（完）

---

我的公众号 - 微信搜索「黯晓」或扫这个 二维码

知乎专栏 - 初级前端工程师

生活中不免犯错，请多多指教！

编辑于 2018-06-18