分享JavaScript 性能优化小 Tip？

1条回答我要回复

百合1176天前

像任何其他编程语言一样，Javascript 也有自己的最佳实践列表，以使程序更易于阅读和维护。Javascript 有很多棘手的部分，因此应避免某些降低代码质量的做法。通过遵循最佳实践，我们可以创建优雅且易于管理的代码，让任何人都可以轻松使用。
在本文中，我们将探讨提高应用程序性能的方法，包括将数据缓存在变量中，使用最快的方法循环遍历变量，减少 DOM 访问和页面上的元素，并推迟脚本加载。

减少对变量和属性的访问
我们应该减少访问应用程序中变量和对象属性的次数。
这是因为每次执行此操作时，CPU 都必须一次又一次地访问内存中的项目以计算其结果。
因此，我们应该尽可能少地这样做。
例如，对于一个循环，不应像下面这样：



for(let i = 0; i < arr.length; i++) {
}



而应该写成：



let length = arr.length;
for (let i = 0; i < length; i++) {
}



 
这样，arr.length 在我们的循环中仅被引用一次，而不是在每次迭代中都对其进行访问。
循环遍历变量的最快方法
在 Javascript 中，有多种方法遍历可迭代对象。一种是老的 for 循环，其他方法包括 for...of 循环，数组的 forEach 方法。map 和 filter 操作也会遍历数组。还有 while 循环。
在运行循环的所有方式中，for 循环是最快的方式，无论是否像上面一样缓存 length，for 循环都是如此。但是，缓存 length 有时会使循环执行得更好。
一些浏览器引擎在不缓存 length 属性的情况下优化了 for 循环。
递减索引的 whil e循环比 for 循环慢大约 1.5 倍。
使用 forEach 循环的速度比 for 循环慢 10 倍，因此最好避免使用它，尤其是对于大型数组。
我们可以在这里看到结果。
减少 DOM 访问
访问 DOM 是一项昂贵的操作，因为浏览器必须从网页中获取元素，然后从中创建一个对象并返回它。
为了减少 DOM 访问，如果我们需要多次操作 DOM Node 对象，则应该将其赋值给变量。
例如，如果我们有以下 HTML，并且希望在几秒钟后为其设置一些文本：



<p id='foo'>
</p>



 
我们可以编写以下代码来做到这一点：



const setText = (element, textContent) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      element.textCOntent= textContent;
      resolve();
    }, 3000)
  })
}
(async () => {
  const foo = document.querySelector('#foo');
  await setText(foo, 'foo');
  await setText(foo, 'bar');
  await setText(foo, 'baz');
})();
 



 
在上面的代码中，我们有一个函数来获取我们要操作的 HTML 元素以及要设置的文本内容。
setText 函数返回一个 promise，并将在 3 秒后将文本设置为给定元素。
然后我们有一个 async 函数来设置文本 3 次。核心部分是我们在每次调用时都将元素的引用传递给它。这样，我们不必每次从网页上获取元素，这是一项昂贵的操作。