JavaScript 引擎如何优化对象、数组和 Map（V8 性能指南）

Source: Dev.to

（请提供您想要翻译的正文内容，我将为您翻译成简体中文，并保留原始的 Markdown 格式和代码块。）

理解 V8 如何优化数据结构以避免静默的性能下降

在某个时刻，每个 JavaScript 应用都会碰到瓶颈。没有崩溃，也没有错误出现，但感觉变慢了——列表渲染需要更长时间，表单操作变得迟钝，曾经微不足道的循环现在开始显得重要。代码仍然能够正常运行，却随着应用规模的扩大而悄然降低性能。通常情况下，问题并不在业务逻辑本身，而在于 JavaScript 引擎（具体来说是 Chrome 和 Node.js 使用的 V8）对数据结构组织方式的响应。

本指南并非关于过早的微优化，而是帮助你理解为何某些数据模式能够平稳扩展，而另一些则会悄悄关闭引擎的最佳优化。

Source: …

对象与隐藏类

JavaScript 对象看起来像灵活的键‑值袋，但 V8 对它们的处理方式截然不同。为了让属性访问更快，V8 使用 隐藏类（内部称为 Maps）按对象的 形状（shape）对对象进行分组。隐藏类记录：

• 对象拥有的属性有哪些
• 这些属性被添加的顺序

当大量对象共享相同的形状时，V8 可以对属性访问进行激进的优化。

形状一致

const a = {};
a.name = "John";
a.age = 32;

const b = {};
b.age = 35;
b.name = "Michel";

两个对象最终拥有相同的隐藏类，这使得 V8 能缓存对象的隐藏类以及 name 的确切内存偏移量。只要形状保持不变，V8 就可以完全跳过属性查找。

如果形状分叉，内联缓存会变成 多态，随后 巨型多态，最终导致去优化（deoptimisation）。

基于类的实例

class User {
  constructor(name, age, role) {
    this.name = name;
    this.age = age;
    this.role = role;
  }
}

const users = [
  new User("Farhad", 32, "developer"),
  new User("Sarah", 28, "designer"),
];

所有实例共享同一个隐藏类，从而实现快速且可预测的属性访问——这对于列表、模型以及频繁创建的对象尤为理想。

一次性对象

const formData = {
  name: "Farhad",
  age: 32,
  role: "developer",
};

对于配置、API 负载或只创建一次的对象，形状复用的重要性较低。

动态添加属性（不推荐）

const user = {};
for (const key of keys) {
  user[key] = getValue(key);   // 每个新键可能会创建一个新的隐藏类
}

每添加一个新属性都会改变对象的形状，迫使 V8 创建新的隐藏类。

更安全的动态赋值

const user = {
  name: undefined,
  age: undefined,
  role: undefined,
  email: undefined,
};

for (const key of keys) {
  if (key in user) {
    user[key] = getValue(key);
  }
}

预先定义好形状可以保持隐藏类的稳定性，同时仍然允许灵活的赋值。

数组

数组的速度极快——除非你不小心让它们变慢。可以把快速数组想象成货架上一排紧密且相同的盒子。只要没有缺失且全部是同一种类型，V8 就能高效地遍历它们。出现空洞或混合类型会导致性能下降。

V8 会跟踪 元素种类（element kinds） 来决定数组的存储方式：

一旦数组转变为较慢的种类，就不会再升级回去。

稀疏数组（空洞）

const arr = new Array(3);
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;   // 初始空洞会强制使用较慢的表示方式

混合类型

const nums = [1, 2, 3];
nums.push(4.5);
nums.push("5");   // 永久降级为 ELEMENTS

删除元素

delete arr[5];    // 会产生空洞 → 变慢
// 推荐使用:
arr.splice(5, 1);

用于数值计算的 Typed Arrays

const data = new Float64Array(1024);

Typed Array 使用固定的元素类型，避免了隐藏类（hidden‑class）的开销，并提供可预测的内存布局——非常适合数学密集型或二进制数据处理。

Map 与普通对象

对象的频繁变更——动态添加和删除属性——会迫使 V8 进入 字典模式（哈希表存储）。这会导致：

• 隐式类（hidden‑class）转换（CPU 开销）
• 内联缓存失效
• 属性访问变为基于哈希

对于键集合会变化的情况，Map 是更合适的数据结构。

普通对象示例（小型、固定数据集）

const store = {};
store[userId] = data;

在键集合小且固定时可以正常工作，但随着键数量的增长效率会下降。

Map 示例（键动态）

const store = new Map();
store.set(userId, data);

对比表

何时使用哪种结构

实用指南

• 不要担心 对象或数组的优化，当代码不在热点路径、数据集很小、对象只创建一次，或是优化会影响可读性时。
• 经验法则： 先分析，再优化。

大多数 JavaScript 性能问题源于不匹配的数据结构，而不是“慢代码”。请记住：

• 具有 稳定结构 的对象
• 保持 稠密且同构 的数组
• 将动态数据存储在 Map 中

当 V8 能预测你的数据模式时，它会为你完成繁重的工作。JavaScript 性能不在于巧妙的技巧，而在于可预测、刻意设计的数据结构。

要点： 保持对象结构一致，数组稠密，将动态数据放入 Map。分析热点路径，编写易于推理的代码，让 V8 提供速度。