为什么在 JavaScript 中动态添加属性速度很慢？

JavaScript 允许在对象创建后添加属性。
这提供了很大的自由度，但同时也带来了一定的性能损失。

👉 JavaScript 的对象模型

ECMAScript 规范将所有对象定义为字典，其中字符串键映射到属性。

属性访问是现实世界程序中最常见的操作 => 需要快速访问“值”，因此形状就派上了用场。

👉 形状

如果多个对象的属性相同，则它们的形状也相同。
在这种情况下，JS 引擎会将它们的形状分别存储，然后 JSObject 指向这些形状。

形状存储的是 JSObject 中值的“偏移量”，而不是“值”本身。

👉 过渡链

当你动态地向对象添加属性时，它的形状会形成所谓的过渡链。
下次你访问对象的属性时，JS 引擎需要遍历这个过渡链。

在这种情况下，规模扩大后性能会受到影响。

👉 如何像顶尖高手一样优化它？

在 Preact 中，每次渲染都会访问 vNode 属性，因此该操作必须非常快。

为了实现这一点，Preact 开发人员预先添加所有属性，并将 undefined/null 赋值给尚未确定的值。

const vnode = {
  type,
  props,
  key,
  ref,
  _children: null,
  _parent: null,
  _depth: 0,
  _dom: null,
  _nextDom: undefined,
  _component: null,
  _hydrating: null,
  constructor: undefined,
  _original: original == null ? ++vnodeId : original
};

PS：请在Twitter上关注我，获取更多类似内容！