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

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

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

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

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

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

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

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

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
非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正