加快JavaScript代码执行速度的8条基本技巧

在StackOverflow调查中 ，JavaScript已连续第七年成为全球最受欢迎的语言。 随着JavaScript的日益普及，很明显，它是用于编码前端应用程序的最常用语言。 有趣的是，如果网站内容在两秒钟内未加载，网站访问者就会失去兴趣或离开您的网站。 两秒钟的基准测试很难跟上，这意味着您需要优化JavaScript代码以获得更好的性能。 在此博客文章中，我们将学习一些快速提示，您可以遵循这些快速提示来保持JavaScript代码的简洁性并提高应用程序的整体性能。 好吧，让我们潜入。

提示1：尽量减少对DOM的访问

直接访问DOM（文档对象模型）需要付费。 如果您的应用程序碰巧多次访问DOM元素，则可以改为访问一次并将其用作局部变量。 请记住，如果您从DOM中删除此值，则该变量需要设置为null，以防止内存泄漏。

React和Vue利用虚拟DOM

在像React和Vue这样的现代Web库中，它们简化了DOM访问，而是使用了所谓的虚拟DOM。 通过在实际DOM上使用虚拟DOM，React和Vue提供了出色的性能。 开发人员无需担心React或Vue中的DOM访问在幕后会发生什么。

如果您使用的是纯JavaScript，请确保您尽可能减少对DOM的访问。

提示2：删除未使用的代码和依赖项

本技巧适用于所有编程语言。 删除未使用的代码和依赖项，将确保您的代码编译速度更快，执行速度更快。 如果您遇到了用户从未使用过的功能，那么最好弃用与该功能相关的所有代码。 使用分析可以洞悉用户如何使用您的应用。 如果有些功能是绝对无法触及的，那么您随时可以与您的团队讨论并撤消这些功能。 这将确保您的Web应用加载速度更快。

我们还倾向于向我们的项目中添加大量的依赖包。 重点是要确保您的项目中没有任何不需要的依赖项。 如果您能够在没有其他依赖项的情况下对它们进行本地编码，那么也不要向第三方添加依赖项。

简洁明了的软件包将确保您的网站加载速度更快，并提高整体性能。

提示3：异步调用API

通过将异步代码用于API调用等功能，可以大大提高JavaScript代码的性能。 使用异步代码，不是阻塞JavaScript具有的单个线程，而是将异步事件推送到在所有其他代码执行之后启动的队列。 始终在代码中使用异步API。

提示4：避免使用全局变量

您将听到已经使用JavaScript进行编码一段时间的同行的标准建议，就是尽可能避免使用全局变量。 其背后的原因是，JavaScript引擎在运行时搜索全局范围中存在的变量所花费的时间更长。 避免全局变量的另一个原因是避免变量名冲突。 在javascript中，所有代码共享一个全局名称空间。 如果代码中有许多全局变量，则可能导致同一页面上的各个脚本之间发生冲突。

在下面的示例中， name是全局变量，并且具有全局范围。 它可以在任何地方使用。

	var name = "Adhithi Ravichandran" ;
	// can access name
	function myFunction >( ) {
	// can access name
	}

可以将其重写为具有本地范围。 我们可以重新编写代码并在函数中定义变量。 现在， 名称变量的范围仅在函数内。

function myFunction ( ) {
  var name = "Adhithi Ravichandran" ;
  // can access name
}

除非绝对必要，否则始终尝试在局部范围内使用变量，并避免编写全局变量。 您可以使用在JavaScript var上具有本地作用域的JavaScript let和const 。

提示5：分析您的代码并消除内存泄漏

内存泄漏是性能的杀手。 内存泄漏会占用越来越多的内存，最终会占用所有可用的内存空间，有时会使您的应用程序崩溃。 为了提高JavaScript性能，请确保代码没有内存泄漏。 这是我们开发人员都面临的普遍问题。 您可以使用Chrome开发工具来跟踪内存泄漏。 “性能”选项卡可让您深入了解任何内存泄漏。 定期当心代码中的任何泄漏。

提示6：利用缓存的力量

在浏览器中缓存文件将大大提高应用程序的性能并加快网站的加载时间。 浏览器将对在初始加载后加载的所有网页使用本地缓存的副本，而不是来回从网络中获取该副本。 这为用户提供了无缝的体验。

JavaScript服务工作程序可用于缓存用户脱机时可以使用的文件。 这是创建渐进式Web应用程序（PWA）必不可少的部分。 在离线状态下，用户仍可以使用缓存的文件访问网站。

灯塔工具

Lighthouse是一种开源的 ，自动化的工具，用于提高网页质量。 您可以在公开或需要身份验证的任何网页上运行它。 该工具对于在您的网站上进行审核非常有用，并且根据其处理脱机呈现的能力，还可以指示您的网站是否符合渐进式Web应用程序（PWA）的条件。

您可以在Chrome DevTools中，从命令行或作为Node模块运行Lighthouse。 您为Lighthouse提供一个URL进行审核，它对页面进行一系列审核，然后生成有关页面效果的报告。 从那里，将失败的审核用作改进页面的指示。 每个审核都有一个参考文档，解释了为什么审核很重要以及如何修复它。

提示7：缩小代码

在所有开发团队中，JavaScript代码的缩减都是一种常见的做法。 它是指从JavaScript源中删除所有不需要的或麻烦的元素。 缩小过程将删除注释，空格，缩短变量和函数名称等内容。

您可以使用Google Closure编译器等构建工具或JS Compress ， JS minifier等在线工具来最小化代码。

这可以显着改善您的JavaScript代码性能，因此请不要忘记此步骤。

提示8：对循环谨慎

本技巧适用于所有编程语言，尤其是JavaScript。 当我们使用大量循环或嵌套循环时，它会影响浏览器。 要记住的一点是，要在循环外保持尽可能多的状态，并且仅在循环内进行所需的操作。 循环越少，JavaScript代码就越快。 在这方面也要确保避免不必要的循环嵌套。

如果您想深入学习JavaScript，我强烈推荐Mosh的JavaScript课程。 所有课程的链接如下：

初学者的JavaScript基础

JavaScript中的面向对象编程

完整的Node JS课程

资源和进一步阅读

性能非常重要，它有助于保持用户的参与度和满意度。 您还可以考虑许多其他性能因素来优化JavaScript。

提高JavaScript性能的资源：

• https://github.com/davidmarkclements/v8-perf
• https://riptutorial.com/javascript/topic/1640/performance-tips
• https://dev.opera.com/articles/efficiency-javascript/

From: https://hackernoon.com/8-essential-tips-to-make-your-javascript-code-perform-faster-6nr320p