上海网站制作培训班,如何建设营销型的网站,四川蓉合建设公司网站,设计软件有哪些软件免费通过这个简单的技巧让我们的 JavaScript 代码变得异常快
秘诀#xff1a;了解JavaScript 虚拟机(VM)的内部工作原理。
首先#xff0c;我们来谈谈像 V8 这样的JavaScript 虚拟机(VM)。可以把它想象成我们的操作的大脑 —— 它将我们简洁的代码变成计算机可以理解和执行的东…通过这个简单的技巧让我们的 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 应用程序中很常见因为有时元素尚未渲染或元素渲染顺序不正确。
