JSConf EU 2018圆满结束, 谷歌V8的开发者Mathias Bynens以及Benedikt Meurer一起发表了《JavaScript Engines: The Good Parts™》演讲，本文将带领大家回顾一下演讲上所提到的重点。

演讲第一部分: JavaScript引擎

JavaScript引擎

JavaScript引擎解析源代码并将其转换成抽象语法树（AST）。基于AST，解释器产生字节码。此时，引擎正在运行JavaScript代码。为了加快运行速度，字节码连同分析数据一起发送到编译器。编译器根据已有的分析数据做出某些假设，然后生成优化后机器代码。

演讲第三部分：属性的访问优化

属性访问是JavaScript程序中最常见的操作。对JavaScript引擎来说，快速访问属性是至关重要的。

const object = {
	foo: 'bar',
	baz: 'qux',
};

// Here, we’re accessing the property `foo` on `object`:
doSomething(object.foo);
//          ^^^^^^^^^^

Shape

在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的对象，它使用我们前面讨论过的字典数据结构：它包含作为字符串的键，并且他们指向各自属性的描述对象。

如果你访问了一个属性，例如object.y，JavaScript引擎将在js对象中查找关键字“y”，然后加载相应的描述对象，最后返回[[Value]]属性的值。

如果每个JS对象都存储描述对象，会造成大量的重复和不必要的内存开销。JavaScript引擎会将这些对象的Shape分开存储。

但是如果没有办法创建一个过渡链怎么办？例如，如果有两个空对象，并且向每个对象添加不同的属性呢？

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

引擎对已经包含属性的对象应用了一些优化。要么从空对象开始添加“x”，要么有一个已经包含“x”的对象：

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

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

JSC还将内联缓存嵌入到get_by_id指令中，该指令由两个未初始化的槽组成。

现在假设我们使用{x：“a”}参数来调用getX。如我们所知，这个对象指向有属性“x”的Shape，并且该Shape存储了属性“x”的偏移量和描述对象。当第一次执行该函数时，get_by_id指令查找属性“x”，并发现该值被存储在偏移量0。

嵌入到get_by_id指令中的IC记住了这个属性是从哪个Shape以及偏移量中找到的：

const array = [
	'#jsconfeu',
];

如果更改数组元素的描述对象，会怎么样？

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

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

在这样的极端情况下，JavaScript引擎将整个元素后备存储区作为字典，映射描述对象到每个数组索引。