提升JavaScript性能的10大实用技巧与窍门

发表时间: 2023-04-19 13:04

转载说明:原创不易,未经授权,谢绝任何形式的转载

消除JavaScript中的瓶颈,加速网页加载速度

JavaScript 在网页开发中非常重要,它控制了大部分网页上的活动和动画效果。但是,如果代码编写不当,JavaScript 可能会导致网站速度变慢。代码的不足可能导致网页加载缓慢,渲染速度也会变慢。

按照以下策略来提高您网站的速度和性能:

  1. 理解变量的作用域
  2. 异步加载JavaScript
  3. 避免不必要的循环
  4. 最小化JavaScript代码
  5. 使用Gzip压缩大文件
  6. 减少DOM操作
  7. 延迟不必要的JavaScript加载
  8. 使用CDN加载JavaScript
  9. 减少内存泄漏
  10. 利用问题检测工具

遵循这些策略,您可以提高网站的速度和性能,从而获得更好的用户体验和更高的搜索引擎排名。

1、理解变量的作用域

作为一名程序员,您必须了解作用域的工作原理。JavaScript中的变量分为两类:局部变量和全局变量。在函数块内定义的变量称为局部变量。它们的作用域限定在定义它们的函数内部。全局变量是可以在整个脚本中使用的变量。全局变量的作用域在整个程序中都是恒定的。当您尝试访问变量时,浏览器会进行作用域查询。它会在最近的作用域中搜索该变量,并继续查找,直到找到它为止。因此,访问当前作用域外的变量所需的作用域链越长,代码中的作用域链就越多。因此,最好将变量定义在更接近执行上下文的位置。仅在极少数情况下使用全局变量,例如存储在整个脚本中使用的数据。这样可以减少代码中的作用域数量,从而提高性能。

2、异步加载JavaScript

JavaScript是一种单线程编程语言。这意味着一旦一个函数被执行,它必须完成后才能执行另一个函数。这种结构可能会导致代码阻塞线程,导致程序挂起。为了使线程顺畅运行,您应该异步执行耗时的活动。当任务异步运行时,它不会使用线程的整个处理能力。相反,该函数被添加到一个事件循环中,在执行所有其他代码后被调用。由于API请求需要时间来解决,它们非常适合异步模式。使用基于Promise的库(例如fetch API)来异步获取信息,而不是冻结线程。这样,浏览器获取API数据时,其他代码可以同时运行。异步编程的复杂性可以帮助您提高应用程序的速度。

3、避免不必要的循环

如果不小心使用循环,JavaScript中的循环可能会导致性能问题。循环遍历各种对象可能会对浏览器产生负担。在您的代码中,无法避免使用循环,因此应尽可能少地使用它们。可以使用一些策略来避免必须循环遍历集合。例如,可以将数组的长度存储在不同的变量中,而不是在每个循环迭代中读取它。如果从循环中获取所需内容,请尽快退出循环,减少循环次数。

4、最小化JavaScript代码

代码最小化是优化JavaScript代码的一种强大技术。最小化器是将您的原始源代码转换为较小的生产文件的程序。它们删除不必要的注释,缩短过长的变量名称,并切掉不必要的语法。它们还删除不必要的代码,并改进现有的例程以使用更少的代码行。Google Closure Compiler、UglifyJS和Microsoft AJAX minified都是最小化器的示例。您还可以通过查看和寻找改进方法来自行最小化代码。例如,您可以简化代码中的if语句。

5、使用Gzip压缩大文件

Gzip通常由客户端用于压缩和解压大型JavaScript文件当浏览器请求资源时,服务器可以将其压缩以在响应中传递更小的文件。客户端接收文件后会进行解码。总的来说,这种策略可以节省数据并减少延迟,从而提高应用程序的性能。

6、减少DOM操作

因为浏览器每次更新DOM都需要刷新,访问DOM可能会影响应用程序的性能。最好将DOM访问限制在一定范围内。一种方法是保存对浏览器对象的引用。您还可以使用像React这样的库,在将更改推送到真正的DOM之前对虚拟DOM进行更改。因此,浏览器刷新需要更新的程序元素,而不是刷新整个页面。

7、延迟不必要的JavaScript加载

虽然您的网站加载速度很重要,但并不是所有功能都必须在第一次加载时运行。假设您有一个可点击的按钮和一个选项卡菜单,两者都引用JavaScript代码;可以将两者都延迟到页面加载时。这种策略释放了计算资源,使您能够及时呈现所需的页面元素。您可以推迟生成可能会阻塞页面首次显示的代码。当网站加载完成后,您可以开始加载这些功能。因此,用户可以享受快速的加载时间,并开始与内容互动。您还可以在<head>元素中尽可能添加少量CSS和JavaScript,以确保它们快速加载。然后,次要代码可以存储在单独的.css和.js文件中。这种策略需要对DOM的工作原理有扎实的理解。

8、利用CDN加载JavaScript

使用内容分发网络可以帮助加快页面加载时间,但并不总是成功的。例如,如果您选择的CDN在访问者所在的国家没有本地服务器,他们将无法受益。为了解决这个问题,您可以使用工具评估许多CDN,并决定哪一个为您的用例提供最佳性能。访问cdnjs网站以了解哪个CDN最适合您的库。

9、减少内存泄漏

内存泄漏可能会影响应用程序的性能。当加载的页面使用越来越多的内存时,泄漏就会出现。当您长时间使用程序后,浏览器开始变慢时,就会发生内存泄漏。使用Chrome开发人员工具可以检测应用程序中的内存泄漏。该工具在性能选项卡下记录时间轴。当DOM元素被删除时,以下信息泄漏会发生。当不再使用这些项的所有变量不再在作用域内时,垃圾回收器将释放内存。

10、利用检测工具

Lighthouse、Google PageSpeed Insights和Chrome都可以帮助您检测问题。

  • Lighthouse寻找可访问性、性能和SEO方面的问题。
  • Google PageSpeed可以帮助您减少JavaScript代码,以提高网站的加载时间。
  • Chrome浏览器具有开发人员工具功能,您可以通过在键盘上按F12来激活它。

您可以使用它的性能分析功能打开和关闭网络,并检查CPU使用情况。它还检查其他统计数据以修复您网站的问题。如何使用Google开发人员工具进行故障排除作为Web开发人员,您将花费大量时间在浏览器上。大多数浏览器都有一组开发人员功能,可以帮助您解决网站错误。Google Chrome中的开发人员工具功能可以帮助您完成各种任务。

结束

优化JavaScript代码可以提高网页的性能和用户体验。通过这10个小技巧,您可以最小化代码、减少DOM访问、延迟不必要的JavaScript加载,以及利用CDN等工具来提高网页性能。此外,使用问题检测工具可以帮助您找到并解决性能问题。请牢记这些技巧并应用于您的项目中,以确保您的网页可以以最佳状态展示给用户,提高搜索引擎排名和用户满意度。

在文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注我,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。

原文:
https://pinjarirehan.medium.com/unlock-the-full-potential-of-javascript-10-tips-tricks-for-ultimate-performance-71b2c2ccec6e

作者:Rehan Pinjari

非直接翻译,有自行改编和添加部分,翻译水平有限,难免有疏漏,欢迎指正