通过这个简单的技巧让我们的 JavaScript 代码变得异常快

通过这个简单的技巧让我们的 JavaScript 代码变得异常快

秘诀：了解JavaScript 虚拟机(VM)的内部工作原理。

首先，我们来谈谈像 V8 这样的JavaScript 虚拟机(VM)。可以把它想象成我们的操作的大脑 —— 它将我们简洁的代码变成计算机可以理解和执行的东西。

好的、坏的代码

让我们深入研究一些代码示例，看看好的、坏的和执行快的代码。

缓慢的 JavaScript 示例：

function addProperty(obj, propName, value) {obj[propName] = value; // 这会改变对象的形状
}
const responseObject = { user1: 1, user2: 2 };
addProperty(responseObject, 'user3', 3); // 添加新的属性

是什么让它变慢？

形状更改：每次调用 addProperty 函数时，都会向对象添加一个新属性。这会改变对象的“形状”，即它包含的键变了，这反过来又会颠覆 JavaScript 引擎的优化。

添加或删除属性时，引擎可能必须丢弃以前的优化信息并重新开始。这种“形状变化”就是操作缓慢的原因。

快速 JavaScript 示例：

function  createObject ( a, b, c ) { 
// 对象的形状是固定的并且VM可以预测return { a, b, c }; 
} 
const dataObject = createObject ( 212,2344,43545);

是什么让它如此快速？

可预测的形状：

该对象是使用一组固定的属性创建的。创建后没有任何变化，更容易引擎优化。

隐藏类重用：

由于每次调用 createObject 时对象的形状都是一致的，因此 JavaScript 引擎可以重用为此形状创建的隐藏类。这种重用允许非常快速的属性访问，因为引擎确切地知道每个属性在内存中的位置。

为什么对象形状很重要：

当我们访问对象的属性时，引擎不想搜索所有属性来找到它。相反，它想要直接访问该属性在内存中的位置。如果对象的形状已知，引擎可以记住每个属性所在的位置（这称为“内联缓存”）。但是，如果形状发生变化（如上面的缓慢示例），引擎必须“重新学习”属性位置，这要慢得多。

为了获得最佳性能，特别是在频繁访问属性的代码关键部分，最好：

• 创建对象时初始化所有属性：即使某些属性最初可能未定义。
• 避免添加或删除属性：这可以保持对象的形状稳定。
• 尽可能重用对象形状：创建始终生成具有相同属性集的对象的工厂函数。

通过遵循这些实践，我们可以帮助 JavaScript 引擎优化我们的代码，从而加快执行速度。

常见的用例

当处理来自外部源的对象（例如 API 响应或 DOM 元素）时，在使用这些对象之前将它们规范化为一致的形状对性能有益。这允许 JavaScript 引擎优化对这些对象的访问，因为形状（对象内的所有键）是可预测的并且不会改变。当我们频繁读取对象时，这种做法尤其有价值。

让我们来看下面两个常见的示例

通过 API 获取用户信息

慢速版本：

在慢速版本中，属性被一一添加到对象中，这可能会导致 JavaScript 引擎由于形状变化而取消对对象的访问优化。

function fetchUserProfile(url) {fetch(url).then(response => response.json()).then(user => {const userProfile = {};if (user.name) {userProfile.name = user.name;}if (user.age) {userProfile.age = user.age;}if (user.email) {userProfile.email = user.email;}// ...处理更多的属性return userProfile;});
}

快速版本：

在快速版本中，我们从一开始就创建一个具有已知形状的对象，即使某些属性可能未定义。这种一致性允许 JavaScript 引擎优化属性访问。

function fetchUserProfile(url) {return fetch(url).then(response => response.json()).then(user => {// 先定义对象中包含的所有的属性const userProfile = {name: user.name || undefined,age: user.age || undefined,email: user.email || undefined,// ... 初始化更多属性};return userProfile;});
}

在快速版本中，即使用户对象不具有我们分配给 userProfile 的所有属性，我们仍然使用其相应的值或未定义的值来定义我们期望的所有键。这样，userProfile 的形状保持一致，这有利于稍后访问其属性时的性能。

这种做法对于性能关键型应用程序至关重要，优化可以极大地提高执行速度。

如果上面的例子让我们想起了什么，那是因为这个模式看起来像工厂模式，它遵循类似于工厂函数的原则，通过创建一个具有预定义形状的对象，但它并不完全是这样。在 JavaScript 中，工厂模式通常涉及构造并返回新对象的专用函数。当创建过程复杂或需要执行一些额外的设置工作时，工厂函数特别有用。

使用工厂模式

在给定的快速示例中，我们看到了一种创建具有一致形状的对象的方法。为了使其与工厂模式更加一致，我们可以将对象创建封装在专用函数中，如下所示：

function createUserProfile(name, age, email) {
// 通过工厂模式创建对象return {name: name || undefined,age: age || undefined,email: email || undefined,// ...};}function fetchUserProfile(url) {return fetch(url).then(response => response.json()).then(user => {return createUserProfile(user.name, user.age, user.email);});
}

在这个版本中，createUserProfile 是一个工厂函数，总是创建具有相同形状的对象，这有利于优化。fetchUserProfile 函数使用此工厂创建一个新的 userProfile 对象。

使用DOM

现在让我们讨论另一个常见的示例，在使用 DOM 时，我们经常需要从 HTML 元素读取信息，然后在应用程序中使用这些数据。保持对象形状一致对于性能非常重要，尤其是当我们重复执行这些操作时。

下面的示例演示了对象形状发生变化的慢速代码示例，以及对象形状可预测且一致的快速方法。

慢速代码示例

function getUserData() {const userObject = {};const userName = document.querySelector('#input-name');if (nameElement) {userObject.name = nameElement.textContent;}const userAge = document.querySelector('#input-age');if (ageElement) {userObject.age = parseInt(ageElement.textContent);}// 每次调用此函数时，它可能会也可能不会添加新属性// 这可能会导致对象形状发生变化return userObject;
}

快速代码示例

function createUserData(name = undefined, age = undefined) {
// 始终返回具有相同形状的对象的工厂函数return { name, age };
}
function getUserData() {const userName = document.querySelector('#input-name');const userAge = parseInt(document.querySelector('#input-age')?.textContent);// 无论元素是否存在，对象的形状都是一致的return createUserData(userName?.textContent, Number.isNaN(userAge) ? undefined : userAge);
}

在上面代码中，createUserData 工厂函数确保返回的对象始终具有相同的形状，这有利于 JavaScript 引擎的优化过程。getUserData 函数使用此工厂函数来创建配置文件数据对象，并通过提供 undefined 作为默认值来处理丢失的 DOM 元素，从而维护对象的形状。

通过使用可选链接运算符 (?.) 和空合并运算符 (??)，我们可以进一步细化该函数以处理 DOM 元素可能不存在的情况：

function getUserData() {const name = document.querySelector('#input-name')?.textContent ?? undefined;const ageText = document.querySelector('#input-age')?.textContent ?? undefined;const age = ageText ? parseInt(ageText) : undefined;// 对象的形状一致return createUserData(name, age);
}

这种方法可以确保对象的形状保持不变，即使在 DOM 中找不到某些元素，这在动态 Web 应用程序中很常见，因为有时元素尚未渲染或元素渲染顺序不正确。