📜  提高 JavaScript 性能的 7 个技巧

📅  最后修改于: 2021-10-19 08:28:02             🧑  作者: Mango

当您构建网站时,对用户来说非常重要的最重要的事情是网站的性能。当用户必须等待很长时间才能重新加载网页时,这对用户来说非常令人沮丧。许多网站都是基于JavaScript构建的,加速这些网站的性能并不容易。

提高 JavaScript 性能的 7 个技巧

优化网站在加速 Web 应用程序的性能方面起着重要作用。您还可以自动化一些任务并使用各种技术来加速应用程序的性能。在一项调查中发现,47% 的访问者希望网站加载时间少于 2 秒,如果加载时间超过 3 秒,则 40% 的访问者会离开网站。

在这篇博客中,我们将讨论一些可以提高 Web 应用程序性能的有效方法。

1. 使用 Webpack 减少应用程序大小

当您在应用程序中不断添加 JavaScript 模块时,应用程序的大小会增加。此方法会在您的应用程序中增加更多文件,因此应用程序变得更慢、更庞大。这会降低应用程序的整体质量。添加更大的文件大小会在开发人员编写的内容与浏览器可以理解的内容之间产生巨大的差距。

为了解决这个问题,编码人员开始使用辅助代码 polyfills 来确保浏览器正确理解代码。

静态模块捆绑器 webpack 也被用于解决这个问题。 Webpack 使用现有模块创建依赖关系图。 Webpack 探索包并创建一个新包,其中包含运行应用程序所需的最少文件数。

2. 在浏览器中使用缓存

在浏览器中使用缓存有两种方法可以提高网站的性能。您可以使用 JavaScript 缓存 API,也可以使用 HTTP 协议缓存。您需要为 JavaScript Cache API 安装 Service Worker。

使用缓存的原因是重复使用脚本来访问应用程序中的特定对象。当您将重复对象存储在用户定义的变量以及对该对象的后续引用中时,性能会立即得到提高。

3.删除未使用的 JavaScript

删除在您的应用程序中没有用的 JavaScript 文件。它会减少传输时间,也会减少浏览器分析和编译代码所需的时间。从您的应用程序中删除所有对用户无用的功能。删除所有与之关联的 JavaScript 代码。

您的 Web 应用程序将加载得更快,用户将获得更好的体验。从您的代码中删除没有任何用途的不必要的库或依赖项。

4. 将 JavaScript 放在页面底部

这是开发人员更喜欢加快网站性能的常用技术之一。将 JavaScript 代码放在网页顶部会降低性能。把它放在底部是好的。您的网页不仅加载速度更快,而且在某些情况下还可以节省所需的代码总量

5. 使用缩小

当涉及到更快地加载网站时,这是 Web 开发中要遵循的另一种常用技术。您可以通过删除不需要的 JavaScript 文档字符(例如制表符、空格等)来减小文件的大小。执行此操作时请确保您没有更改网站的功能。

许多缩小工具可用于缩小您的文件或取消缩小您的文件。这样做可以更快地加载您的 Web 应用程序,并且用户将获得更好的体验。

6.使用Gzip压缩

JavaScript 文件可能非常大,可能会影响您网站的加载时间。 Gzip 是一款不错的软件,可以用来压缩你的 JavaScript 文件。今天大多数服务器和客户端都支持 Gzip。

当浏览器请求资源时,服务器会在将响应发送到 Web 浏览器之前压缩响应。该软件减少了 JavaScript 文件的大小,节省了带宽,并加快了网站的性能。

7. 避免对 DOM 的不必要访问

访问 DOM 会降低网站的性能。每次在 JavaScript 本机环境之外与 DOM 交互时,浏览器都必须刷新页面。如果您需要多次读取内容,最好将 DOM 访问保持在最低限度,或者在您的 Web 应用程序中,那么最好将其保存在局部变量中。

请记住,如果您删除 DOM 的值,则将该变量设置为 NULL 以避免应用程序中的内存泄漏。

结论

这些是提高网站性能的一些有用技术。尽管这些都是很好的技术,但您仍然应该遵循一些最佳实践来提高性能。避免不必要的嵌套循环和递归调用。使用搜索数组而不是使用 switch case 语句。在代码中使用位级运算符以利用更少的处理器周期。此外,避免使用全局变量和消耗过多内存。