深入分析 `V8` 的 `Hidden Classes` / `Maps` 机制如何影响对象属性访问性能。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位朋友，大家好！我是老码，今天咱们来聊聊V8引擎里的一个关键角色——隐藏类（Hidden Classes）/ Maps。这东西听起来有点神秘，但实际上它在很大程度上决定了你的JavaScript代码跑得快不快。别怕，我会用最简单的方式，保证你们听完之后，感觉自己也能和V8引擎“谈笑风生”。

开场白：JavaScript对象，其实没那么自由

我们都知道，JavaScript的对象是动态的，可以随时添加、删除属性。这给人一种错觉，好像JavaScript对象在内存里就是一块随意涂鸦的画布，想怎么画就怎么画。但实际上，V8引擎为了性能，对这种“自由”做了一些约束。

想想看，如果每次访问对象属性，V8都得去遍历整个对象，查找属性的位置，那性能就太差了。就像你在一个巨大的图书馆里找一本书，每次都得从头开始找，效率简直低到令人发指。

所以，V8引入了隐藏类（Hidden Classes）/ Maps的概念，来优化对象属性的访问。它可以理解成图书馆里的图书分类系统，有了它，找书就快多了。

什么是隐藏类（Hidden Classes）/ Maps？

简单来说，隐藏类/ Maps就是V8引擎为具有相同“形状”的对象创建的蓝图。这里的“形状”指的是对象属性的顺序和类型。

举个例子，我们创建两个对象：

const obj1 = { x: 10, y: 20 };
const obj2 = { x: 5, y: 15 };

这两个对象都有 x 和 y 属性，而且属性的顺序也一样。那么，V8引擎就会为它们创建一个相同的隐藏类/ Map。也就是说，obj1 和 obj2 共享同一个蓝图。

那如果再创建一个对象呢？

const obj3 = { y: 30, x: 40 };

obj3 也有 x 和 y 属性，但是属性的顺序和 obj1 和 obj2 不一样。这时候，V8引擎就会为 obj3 创建一个新的隐藏类/ Map。

隐藏类/ Maps 如何优化属性访问？

有了隐藏类/ Maps，V8引擎就可以像查字典一样快速访问对象的属性。

当V8引擎第一次遇到某个“形状”的对象时，它会创建一个隐藏类/ Map，并记录下每个属性在内存中的偏移量（offset）。也就是说，它会记住 x 属性在对象内存的哪个位置，y 属性在哪个位置。

以后再访问具有相同“形状”的对象时，V8引擎就可以直接通过隐藏类/ Map 中记录的偏移量来访问属性，而不需要遍历整个对象。

这就好比，图书馆的图书分类系统告诉你，某本书在第几排第几列，你就可以直接走到那个位置，拿到书，而不需要从头开始找。

隐藏类/ Maps 的转换（Transitions）

JavaScript对象的动态性意味着，对象的“形状”可能会发生变化。比如，我们给 obj1 添加一个 z 属性：

obj1.z = 30;

这时候，obj1 的“形状”就发生了变化，它不再和 obj2 共享同一个隐藏类/ Map了。 V8引擎会为 obj1 创建一个新的隐藏类/ Map，这个新的隐藏类/ Map会继承之前的隐藏类/ Map，并记录下 z 属性的偏移量。

这个过程叫做隐藏类/ Maps的转换（Transitions）。每次对象的“形状”发生变化，V8引擎都会创建一个新的隐藏类/ Map。

案例分析：属性顺序的影响

我们来看一个例子，演示属性顺序对性能的影响：

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

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

// 创建大量对象
const points = [];
const pointsReversed = [];
for (let i = 0; i < 1000000; i++) {
  points.push(new Point(i, i + 1));
  pointsReversed.push(new PointReversed(i + 1, i));
}

// 测试访问属性的性能
console.time('Point');
for (let i = 0; i < points.length; i++) {
  const x = points[i].x;
  const y = points[i].y;
}
console.timeEnd('Point');

console.time('PointReversed');
for (let i = 0; i < pointsReversed.length; i++) {
  const x = pointsReversed[i].x;
  const y = pointsReversed[i].y;
}
console.timeEnd('PointReversed');

在这个例子中，我们创建了两个构造函数 Point 和 PointReversed。它们的区别在于属性的顺序不同。然后，我们创建了大量 Point 和 PointReversed 的对象，并测试访问属性的性能。

你会发现，访问 Point 对象的属性比访问 PointReversed 对象的属性要快得多。这是因为 Point 对象的属性顺序是一致的，它们共享同一个隐藏类/ Map。而 PointReversed 对象的属性顺序不同，每个对象都有自己的隐藏类/ Map。

案例分析：动态添加属性的影响

再来看一个例子，演示动态添加属性对性能的影响：

function createPoint(x, y) {
  const point = {};
  point.x = x;
  point.y = y;
  return point;
}

function createPointWithZ(x, y, z) {
  const point = {};
  point.x = x;
  point.y = y;
  point.z = z;
  return point;
}

// 创建大量对象
const points = [];
const pointsWithZ = [];
for (let i = 0; i < 1000000; i++) {
  points.push(createPoint(i, i + 1));
  pointsWithZ.push(createPointWithZ(i, i + 1, i + 2));
}

// 测试访问属性的性能
console.time('Point');
for (let i = 0; i < points.length; i++) {
  const x = points[i].x;
  const y = points[i].y;
}
console.timeEnd('Point');

console.time('PointWithZ');
for (let i = 0; i < pointsWithZ.length; i++) {
  const x = pointsWithZ[i].x;
  const y = pointsWithZ[i].y;
  const z = pointsWithZ[i].z;
}
console.timeEnd('PointWithZ');

//动态添加z属性
console.time('dynamicPoint');
const dynamicPoints = [];
for (let i = 0; i < 1000000; i++) {
    const point = {x: i, y: i + 1};
    point.z = i + 2;
    dynamicPoints.push(point);
}

console.timeEnd('dynamicPoint');

console.time('accessDynamicPoint');
for (let i = 0; i < dynamicPoints.length; i++) {
    const x = dynamicPoints[i].x;
    const y = dynamicPoints[i].y;
    const z = dynamicPoints[i].z;
}
console.timeEnd('accessDynamicPoint');

在这个例子中，createPoint 创建的对象只有 x 和 y 属性，而 createPointWithZ 创建的对象有 x、y 和 z 属性。你会发现，创建 PointWithZ 对象并访问属性的速度，比创建 Point 对象并访问属性的速度慢一些，原因在于PointWithZ 有更多的属性，需要更多的隐藏类来管理。

重点是dynamicPoint的例子。我们先创建只有x,y属性的对象，然后动态添加z属性。这会导致V8频繁创建新的隐藏类，性能会更差。创建对象的时间和访问对象属性的时间都会变长。

如何优化代码，利用隐藏类/ Maps？

了解了隐藏类/ Maps 的原理，我们就可以通过一些技巧来优化代码，提高性能：

保持对象“形状”一致：尽量让具有相同属性的对象共享同一个隐藏类/ Map。比如，在构造函数中初始化所有属性，避免动态添加属性。
避免属性顺序变化：尽量保持对象属性的顺序一致。比如，在构造函数中按照固定的顺序初始化属性。
使用构造函数：构造函数可以帮助 V8 引擎更好地推断对象的“形状”，从而创建更有效的隐藏类/ Map。
预分配对象：如果你知道对象需要哪些属性，可以提前分配好，避免动态添加属性。
避免删除属性：删除属性会导致对象的“形状”发生变化，V8引擎需要创建一个新的隐藏类/ Map。

总结

隐藏类/ Maps 是 V8 引擎为了优化对象属性访问而引入的一种机制。了解隐藏类/ Maps 的原理，可以帮助我们编写更高效的 JavaScript 代码。

记住，尽量保持对象“形状”一致，避免动态添加属性，保持属性顺序一致，使用构造函数，预分配对象，避免删除属性。

一些补充说明

V8 引擎的隐藏类/ Maps 机制非常复杂，这里只是做了简化介绍。
不同的 V8 版本，隐藏类/ Maps 的实现细节可能会有所不同。
除了隐藏类/ Maps，V8 引擎还有很多其他的优化技术，比如内联缓存（Inline Caches）、即时编译（JIT）等。
隐藏类这个概念在不同的引擎中叫法可能不一样。比如SpiderMonkey (Firefox) 中称之为 Shapes。但本质是一样的，都是为了提升对象属性访问效率。

表格总结

优化技巧	说明	例子	影响
保持对象“形状”一致	尽量让具有相同属性的对象共享同一个隐藏类/ Map。避免动态添加属性。	避免：`const obj = {}; obj.x = 1; obj.y = 2;` 推荐： `const obj = {x: 1, y: 2};` 或使用构造函数	减少隐藏类/ Maps 的创建，提高属性访问速度。
避免属性顺序变化	尽量保持对象属性的顺序一致。在构造函数中按照固定的顺序初始化属性。	避免： `const obj1 = {x: 1, y: 2}; const obj2 = {y: 2, x: 1};` 推荐：所有对象都按照 `x, y` 的顺序定义属性。	避免为属性顺序不同的对象创建不同的隐藏类/ Maps，提高属性访问速度。
使用构造函数	构造函数可以帮助 V8 引擎更好地推断对象的“形状”，从而创建更有效的隐藏类/ Map。	使用： `function Point(x, y) { this.x = x; this.y = y; }` 避免：直接创建对象字面量。	允许 V8 引擎更好地优化对象的属性访问，减少隐藏类/ Maps 的转换。
预分配对象	如果你知道对象需要哪些属性，可以提前分配好，避免动态添加属性。	如果知道对象需要 `x`, `y`, `z` 属性，一开始就分配好，即使某些值暂时为空。	减少运行时隐藏类/ Maps 的转换，提高性能。
避免删除属性	删除属性会导致对象的“形状”发生变化，V8引擎需要创建一个新的隐藏类/ Map。	尽量避免使用 `delete` 关键字删除属性。如果需要标记属性为无效，可以设置为 `null` 或 `undefined`。	避免不必要的隐藏类/ Maps 创建，提高性能。

Q&A环节

大家有什么问题可以提出来，我会尽力解答。别客气，大胆地问！

（停顿一下，假装有人提问）

好，看来大家对隐藏类/ Maps 机制已经有了比较深入的了解。今天的分享就到这里，希望对大家有所帮助。谢谢大家！

（鞠躬）

发表回复 取消回复

发表回复取消回复