与任何其他编程语言一样，JavaScript有自己的良好实践列表，可以使程序更易于阅读和维护。JavaScript有很多棘手的部分，因此应该避免某些降低代码质量的做法。通过遵循良好实践，我们可以创建任何人都易于使用的优雅且易于管理的代码。在本文中，我们将探讨提高应用程序性能的方法，包括在变量中缓存数据、使用最快的方法循环变量、减少页面上的DOM访问和元素，以及延迟脚本加载。减少对变量和属性的访问我们应该减少应用程序中对变量和对象属性的访问次数。这是因为每次执行操作时，CPU都必须一次又一次地访问内存中的项目以计算其结果。因此，我们应该尽可能少地这样做。比如对于一个循环，不应该这样写：for(leti=0;i
我们可以编写以下代码来完成此操作：constsetText=(element,textContent)=>{returnnewPromise((resolve)=>{setTimeout(()=>{element.textContent=textContent;resolve();},3000)})}(async()=>{constfoo=document.querySelector('#foo');awaitsetText(foo,'foo');awaitsetText(foo,'bar');awaitsetText(foo,'baz');})();在上面的代码中，我们有一个函数来获取要操作的HTML元素和要设置的文本内容。setText函数返回一个承诺，并将在3秒后将文本设置为给定的元素。然后我们有一个异步函数来设置文本3次。核心部分是我们每次调用它时都将元素的引用传递给它。这样，我们就不必每次都从网页中获取元素，这是一项昂贵的操作。减少DOM大小DOM树渲染速度很慢。因此，我们必须减小树的大小。这个别无选择，只能让我们的网页尽可能简单。当DOM较小时，您可以使用querySelector、getElementById或getElementsByTagName等方法更快地搜索元素，因为要查找的内容更少。此外，由于加载的内容更少，页面呈现性能也会提高。对于手机和平板电脑等速度较慢的设备尤其如此。不要声明不必要的变量每次我们声明一个变量时，浏览器都必须为该变量分配存储空间。因此，为了减少内存使用，我们不应该声明过多的变量。例如，如果我们有以下HTML：
并且我们要设置p元素的文本内容，则不应这样写：constfoo=document。querySelector('#foo');constp=foo.querySelector('p');p.textContent='foo';由于我们这里有2个变量，这意味着我们的计算机必须存储2个额外的JavaScript变量的值。我们可以通过这样写来减少变量声明：document.querySelector('#foop').textContent='foo';如我们所见，我们可以使用querySelector方法通过CSS选择器选择任何内容。这意味着我们应该使用此方法和相关的querySelectorAll方法来选择元素，因为它们都可以使用CSS选择器来选择任何HTML元素节点。延迟加载脚本加载JavaScript文件是一项开销很大的操作。浏览器必须下载文件、解析内容、将其转换为机器码并运行。浏览器在阻止其他所有内容的同时下载文件。因此，我们应该尽可能地推迟它。我们可以通过将脚本标记放在末尾来做到这一点。或者，我们可以使用脚本标记上的defer属性来执行此操作。或者，我们可以在页面加载后动态创建脚本元素并运行脚本，如下所示：window.onload=()=>{constelement=document.createElement("script");element.src="https://code.jquery.com/jquery-1.12.4.min.js";document.body.appendChild(元素);};页面加载完成后，您可以使用此脚本的加载方法加载任何内容。总结我们可以做一些事情来加速我们的页面。首先，我们可以将数据缓存在变量中，这样我们就不用重复访问它们了。然后我们可以使用for循环更快地遍历项目。此外，我们可以减小DOM大小以减少需要加载的项目数。我们还可以通过将DOM对象分配给变量来在它们的代码中缓存DOM对象。我们也不应该声明不必要的变量，我们应该尽可能推迟脚本的加载，以免冻结我们的浏览器。
