几个 JavaScript 性能优化小 Tip_知识小集的专栏文章_微信文章

本文翻译自 John Au-Yeung 的 JavaScript Best Practices — Performance ，请参考原文阅读

像任何其他编程语言一样，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 次。核心部分是我们在每次调用时都将元素的引用传递给它。这样，我们不必每次从网页上获取元素，这是一项昂贵的操作。

减少DOM大小

DOM 树渲染起来很慢。因此，我们必须减小树的大小。

这个别无选择，只能使我们的网页尽可能简单。

DOM 较小时，由于查找内容较少，因此可以使用 querySelector，getElementById 或 getElementsByTagName 之类的方法更快地搜索元素。

此外，由于加载的内容更少，因此页面渲染性能也会提高。对于手机和平板电脑等速度较慢的设备尤其如此。

不要声明不必要的变量

每次我们声明变量时，浏览器都必须为变量分配存储空间。因此，为了减少内存使用，我们不应该声明太多变量。

例如，如果我们有以下 HTML：

<div id='foo'>
  <p>
  </p>
</div>
复制代码

我们想设置 p 元素的文本内容，我们不应该这样写：

几个 JavaScript 性能优化小 Tip

正文