Javascript 引擎的工作流程 (pipeline)

这一切都要从你写的 Javascript 代码开始。Javascript 引擎解析源代码并将其转换为抽象语法树（AST）。基于 AST，解释器便可以开始工作并生成字节码。就在此时，引擎开始真正地运行 Javascript 代码。除了 [[Value]] 本身，规范还定义了这些属性：

• [[Writable]] 决定该属性是否能被重新赋值，
• [[Enumerable]] 决定属性是否出现在 for in 循环中，
• [[Configurable]] 决定属性是否能被删除。

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

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

这就是 Javascript 定义对象的方式，那么数组呢？

你可以把数组看成是一个特殊的对象，其中的一个区别就是数组会对数组索引进行特殊的处理。这里的数组索引是 ECMAScript 规范中的一个特殊术语。在 Javascript 中限制数组最多有 2³²−1个元素，数组索引是在该范围内的任何有效索引，即 0 到 2³²−2 的任何整数。

另一个区别是数组还有一个特殊的 length 属性。

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

在该例中，数组被创建时 length 为 2。当我们给索引为 2 的位置分配另一个元素时，length 自动更新了。

Javascript 定义数组的方式和对象类似。例如，所有的键值, 包括数组的索引, 都明确地表示为字符串。数组中的第一个元素，就是存储在键值 &＃39;0&＃39; 下。“length” 属性是另一个不可枚举且不可配置的属性。 当一个元素被添加到数组中时, Javascript 会自动更新 “length“ 属性的 [[value]] 属性。

优化属性访问

知道了对象在 Javascript 中是如何定义的, 那么就让我们来深入地了解一下 Javascript 引擎是如何高效地使用对象的。 总体来说，访问属性是至今为止 Javascript 程序中最常见的操作。因此，Javascript 引擎是否能快速地访问属性是至关重要的。

Shapes

在 Javascript 程序中，多个对象有相同的键值属性是非常常见的。可以说，这些对象有相同的 shape。

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

访问拥有相同 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 引擎可以基于对象的 shape 来优化对象的属性访问。下面我们就来介绍其原理。

假设我们有一个具有属性 x 和 y 的对象，它使用我们前面讨论过的字典数据结构：它包含字符串形式的键，这些键指向它们各自的属性值。当我们有多个对象时，好处就显而易见了。不管有多少个对象，只要它们有相同的 shape，我们只需要存储 shape 和属性信息一次！

所有的 Javascript 引擎都使用了 shapes 作为优化，但称呼各有不同：

• 学术论文称它们为 Hidden Classes（容易与 Javascript 中的 class 混淆）
• V8 称它们为 Maps （容易与 Javascript 中的 Map 混淆）
• Chakra 称它们为 Types （容易与 Javascript 中的动态类型以及 typeof 混淆）
• JavascriptCore 称它们为 Structures
• SpiderMonkey 称它们为 Shapes

本文中，我们将继续使用术语 shapes.

转换链和树

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

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

这些 shapes 在 Javascript 引擎中形成所谓的转换链（transition chains）。下面是一个例子：

如果你在 Javascript 代码中写 o.x，Javascript 引擎会沿着转换链去查找属性 "x"，直到找到引入属性 "x" 的 Shape。

但是如果没有办法创建一个转换链会怎么样呢？例如，如果有两个空对象，并且你为每个对象添加了不同的属性，该怎么办？

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

在这种情况下，我们必须进行分支操作，最终我们会得到一个转换树而不是转换链。

这里，我们创建了一个空对象 a，然后给它添加了一个属性 ‘x’。最终，我们得到了一个包含唯一值的 JSObject 和两个 Shape ：空 shape 以及只包含属性 x 的 shape。

第二个例子也是从一个空对象 b 开始的，但是我们给它添加了一个不同的属性 ‘y’。最终，我们得到了两个 shape 链，总共 3 个 shape。

这是否意味着我们总是需要从空 shape 开始呢？ 不一定。引擎对已含有属性的对象字面量会进行一些优化。比方说，我们要么从空对象字面量开始添加 x 属性，要么有一个已经包含属性 x 的对象字面量：

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

在第一个例子中，我们从空 shape 开始，然后转到包含 x 的shape，这正如我们之前所见那样。

在 object2 的例子中，直接在一开始就生成含有 x 属性的对象，而不是生成一个空对象是有意义的。

包含属性 ‘x’ 的对象字面量从含有 ‘x’ 的 shape 开始，有效地跳过了空 shape。V8 和 SpiderMonkey （至少）正是这么做的。这种优化缩短了转换链并且使从字面量构建对象更加高效。

下面是一个包含属性 ‘x&＃39;、&＃39;y&＃39; 和 &＃39;z&＃39; 的 3D 点对象的示例。

const point = {};
point.x = 4;
point.y = 5;
point.z = 6; 

正如我们之前所了解的, 这会在内存中创建一个有3个 shape 的对象（不算空 shape 的话）。 当访问该对象的属性 ‘x’ 的时候，比如, 你在程序里写 point.x，Javascript 引擎需要循着链接列表寻找：它会从底部的 shape 开始，一层层向上寻找，直到找到顶部包含 ‘x’ 的 shape。

现在我们又回到字典查找了我们添加 shape 就是为了对此进行优化！那我们为什么要去纠结 shape 呢？ 原因是 shape 启用了另一种称为 Inline Caches 的优化。

Inline Caches (ICs)

shapes 背后的主要动机是 Inline Caches 或 ICs 的概念。ICs 是让 Javascript 快速运行的关键要素！Javascript 引擎使用 ICs 来存储查找到对象属性的位置信息，以减少昂贵的查找次数。

这里有一个函数 getX，该函数接收一个对象并从中加载属性 x：

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

如果我们在 JSC 中运行该函数，它会产生以下字节码：

对于后续运行，IC 只需要比较 shape，如果 shape 与之前相同，只需从存储的偏移量加载值。具体来说，如果 Javascript 引擎看到对象的 shape 是 IC 以前记录过的，那么它根本不需要接触属性信息，相反，可以完全跳过昂贵的属性信息查找过程。这要比每次都查找属性快得多。

高效存储数组

对于数组，存储数组索引属性是很常见的。这些属性的值称为数组元素。为每个数组中的每个数组元素存储属性特性是非常浪费内存的。相反，默认情况下，数组索引属性是可写的、可枚举的和可配置的，Javascript 引擎基于这一点将数组元素与其他命名属性分开存储。

思考下面的数组：

const array = [    &＃39;#jsconfeu&＃39;,
]; 

引擎存储了数组长度（1），并指向包含偏移量和 &＃39;length&＃39; 属性特性的 shape。

每个数组都有一个单独的元素备份存储区，包含所有数组索引的属性值。Javascript 引擎不必为数组元素存储任何属性特性，因为它们通常都是可写的、可枚举的和可配置的。

那么，在非通常情况下会怎么样呢？如果更改了数组元素的属性特性，该怎么办？

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

上面的代码片段定义了名为 “0” 的属性（恰好是数组索引），但将其特性设置为非默认值。

在这种边缘情况下，Javascript 引擎将整个元素备份存储区表示成一个字典，该字典将数组索引映射到属性特性。

即使只有一个数组元素具有非默认特性，整个数组的备份存储区也会进入这种缓慢而低效的模式。避免对数组索引使用Object.defineProperty！

建议

我们已经了解了 Javascript 引擎如何存储对象和数组，以及 shape 和 ICs 如何优化对它们的常见操作。基于这些知识，我们确定了一些可以帮助提高性能的实用的 Javascript 编码技巧：

• 始终以相同的方式初始化对象，这样它们就不会有不同的 shape。
• 不要弄乱数组元素的属性特性，这样可以有效地存储和操作它们。

相关免费学习推荐：Javascript（视频）

以上就是拿下Javascript引擎的基本原理的详细内容，更多请关注 第一PHP社区 其它相关文章！