服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 提高JavaScript性能技巧,以获得更快的网站

提高JavaScript性能技巧,以获得更快的网站

2022-01-11 01:26粤嵌教育 js教程

在开发应用程序时,性能是最重要的问题之一,所有软件开发人员都应该监控和改进应用程序每一层的性能。从数据库到服务器端语言,出现性能问题的时候很多,前端当然也不例外。 接下来,让我们看看如何通过七个实用技巧提

在开发应用程序时,性能是最重要的问题之一,所有软件开发人员都应该监控和改进应用程序每一层的性能。从数据库到服务器端语言,出现性能问题的时候很多,前端当然也不例外。 接下来,让我们看看如何通过七个实用技巧提高 JavaScript 代码的性能。

提高JavaScript性能技巧,以获得更快的网站

1. 删除未使用的 JavaScript 代码

提高 JavaScript 性能的一种可靠方法就是减少它。 无情地删除未使用的代码。 如果你检测到给定的函数已过时,请将其删除,这将缩短下载时间,因为文件大小将减小,浏览器将花费更少的时间来分析代码。

2.使用Gzip压缩

想象一下,如果不是向浏览器发送一个大文件,你的 Web 服务器可以发送一个压缩文件以使其更轻,这样,浏览器会更快地完成文件的下载。浏览器收到压缩文件后,就可以提取该文件并照常使用,嗯,这正是 Gzip 的用途!

Gzip 是一个用于压缩文件的应用程序,大多数 Web 服务器都支持它。当你的服务器正确配置为提供压缩内容时,它会在将响应发送到浏览器之前压缩响应。使用 Gzip 不仅可以压缩你的 JavaScript 文件,还可以压缩你的 HTML 和 CSS,这将提高你的应用程序的性能。

3. 尽量减少 DOM 交互

DOM(动态对象模型)是表示 Web 文档结构的接口。与 DOM 的交互在 JavaScript 中显然非常常见,因为该语言的主要用例之一是操作页面上的元素以创建比仅使用 HTML 可能实现的更丰富的用户体验。问题是 DOM 更改会导致性能下降,因为它们会导致浏览器回流。该怎么办?

你不能简单地消除 DOM 交互——这首先会破坏使用 JavaScript 的目的之一。你最好的做法是将 DOM 交互保持在最低限度。实现此目的的方法之一是批量处理 DOM 更改,这样你就可以避免不必要的回流。

另一种有用的技术是缓存 DOM 元素,这意味着存储对经常访问的元素的引用,并在将来再次访问同一对象时使用该引用,通过这样做,你可以获得显着的性能提升。

4. 切换到 HTTP/2

这个技巧不是特定于 JavaScript 的指南,而是更多的通用 Web 性能技巧,并且很容易理解。 它只是说你应该使用 HTTP/2 而不是它的前身 HTTP/1.1。HTTP/2 使用多路复用,这意味着可以同时发送多个请求,它的前身 HTTP/1.1 要求在开始下一个请求之前完成每个请求。 新版 HTTP 中的这一改进和其他改进将提高你网站的性能。

5. 延迟加载不必要的 JavaScript

延迟加载初始页面加载不需要的任何内容,页面首次加载时并非所有功能都需要,例如,你可以延迟加载需要用户执行给定操作的函数。这样你就可以避免加载 JS 代码,这些代码只会延迟页面的初始加载和显示,浏览器加载页面后,你可以加载其他功能,以便在用户需要时准备就绪。

为此,你可以使用将 JavaScript 分解为更小的文件并根据需要加载它们的方法。你还可以使用 async 或 defer 属性。

6. 使用适用于其他语言的性能改进策略

在使用 JavaScript 时,没有什么可以阻止你应用在其他语言中使用的性能优化。你仍然希望避免在循环内执行昂贵的任务或在不需要时依赖递归。

此外,对已知问题使用最先进的算法。更好的是,在可用的情况下使用原生 JavaScript 函数,因为它们在大多数情况下肯定会比本地代码执行得更好。

如今,正在开发的大部分应用程序都是 Web 应用程序,由于 JavaScript 是网络语言,因此优化 JavaScript 性能是一项值得进行的努力。

原文链接:https://www.toutiao.com/a7050719622466716174/

延伸 · 阅读

精彩推荐
  • js教程js实现弹框效果

    js实现弹框效果

    这篇文章主要为大家详细介绍了js实现弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    程序猿余某人3962022-02-20
  • js教程JavaScript快速实现日历效果

    JavaScript快速实现日历效果

    这篇文章主要为大家详细介绍了JavaScript快速实现日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    云杰8了10872022-02-13
  • js教程原生JS实现pc端轮播图效果

    原生JS实现pc端轮播图效果

    这篇文章主要为大家详细介绍了原生JS实现pc端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    qq_1519846510212021-12-15
  • js教程js 执行上下文和作用域的相关总结

    js 执行上下文和作用域的相关总结

    这篇文章主要介绍了js 执行上下文和作用域的相关知识总结,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    前端Serendipity11292022-01-19
  • js教程玩转 Mockjs,前端也能跑得很溜

    玩转 Mockjs,前端也能跑得很溜

    mockjs作用就是,生成随机模拟数据,拦截 ajax 请求,可以对数据进行增删改查。在生成数据时,我们就需要能够熟练使用 mock.js 的语法。...

    前端人4882022-01-05
  • js教程JS实现纸牌发牌动画

    JS实现纸牌发牌动画

    这篇文章主要为大家详细介绍了JS实现纸牌发牌动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    计算机的皇帝5432022-01-04
  • js教程javascript实现倒计时关闭广告

    javascript实现倒计时关闭广告

    这篇文章主要为大家详细介绍了javascript实现倒计时关闭广告,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    爱前端的茂茂11612022-01-20
  • js教程JS一分钟在github+Jekyll的博客中添加访问量功能的实现

    JS一分钟在github+Jekyll的博客中添加访问量功能的实现

    这篇文章主要介绍了JS一分钟在github+Jekyll的博客中添加访问量功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借...

    董哥大鸟走四方6172022-02-22