通过这个简单的技巧让我们的 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 应用程序中很常见，因为有时元素尚未渲染或元素渲染顺序不正确。