当前位置:首页 > 前端技术 > 8条关于Web前端性能的优化建议

8条关于Web前端性能的优化建议

2022年08月05日 14:16:16前端技术4

一般网站优化都是优化后台,如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下,对前端web优化也是非常重要的。

下面说说几种常见的优化措施。

1、HTML CSS JS位置

一般需要将CSS放页面最上面,即HEAD部分,而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染,而JS如果不是在页面加载之前就要执行就要放到页面最底部,以免在页面展示之前因JS过多加载而影响页面渲染速度。

2、引用文件位置

有一些插件需要引用到远程的图片、CSS、JS、图标等,如果远程的资源连接网速不佳,如国外的某些资源,会造成网页阻塞,同样也会造成页面展示问题,尽量能把引用远程的资源能本地化。

3、减少后台请求

每个请求都是耗费资源影响系统性能的,所以,能减少后台请求就减少。如,尽量的将同一个资源(图片、JS、CSS等)合并成一个文件,页面只要请求一次即可,这样就节省了很多http连接的开销及往返的时间损耗。

另外一方面,如果是关于抽奖、摇一摇、秒杀等功能,可以限制发往后台的频率,如前端操作10次才往后端发一次请求,这样从前端就做到了后台的流量控制,把流量控制到访问的最外层是最好的,尽量不要让请求落到底层。

4、压缩传输

http压缩可以对纯文本可以压缩至原内容的40%, 从而节省了60%的数据传输,GZIP是一种常用的压缩编码。因此,对文本类型的资源如CSS、JS、HTML启用GZIP压缩加速http传输速度。

5、减少cookie传输

cookie会包含在每次请求和响应中,如果cookie过多会影响http响应速度,所以高并发情况下尽量控制cookie的传输量,nginx对cookie传输默认是做了限制的。另外,像CSS、JS、图片等静态资源可以启用单独域名,禁用cookie对静态资源的传输,这样就能大大提高效率。

6、浏览器缓存

高并发情况下,可以将一些不怎么变动的东西缓存到浏览器cache中,或者一些活动内容可以提前将内容在客户端缓存起来,以免活动开始大量请求涌入服务器。

7、CDN

之前的文章有讲过CDN的概念,它就是一个静态内容分发网络,本质就是静态资源的缓存,可以将静态资源放到CDN上,这样,用户就能离自己最近的地方获取到资源,大大提高了用户访问速度。

8、反向代理

常用的反向代理nginx除了负载均衡功能,它也可以通过配置缓存功能来加速请求响应速度,当用户第一次访问的时候静态资源就可以被缓存到反向代理服务器上,这样其他用户的请求就能直接从反向代理服务器直接获取返回,这样也就直到了静态资源缓存的作用。

我大概列了这些,其实还有很多优化手段,大家有更好的建议的话,可以在下方留言。

推荐阅读

干货:2TB架构师四阶段视频教程

面经:史上最全Java多线程面试题及答案

面经:史上最全阿里高级Java面试题

面经:史上最全Spring面试题

教程:最全Spring Boot全套视频教程

书籍:进阶Java架构师必看的15本书

工具:推荐一款在线创作流程图、思维导图软件

分享Java干货,高并发编程,热门技术教程,微服务及分布式技术,架构设计,区块链技术,人工智能,大数据,Java面试题,以及前沿热门资讯等。
8条关于Web前端性能的优化建议 _ JavaClub全栈架构师技术笔记

作者:栈长
来源链接:https://www.cnblogs.com/java-stack/p/11952658.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17875.html

标签: 高级面试题
分享给朋友:

“8条关于Web前端性能的优化建议” 的相关文章

day19-异常和File

1:异常(理解) (1)程序出现的不正常的情况。 (2)异常的体系 Throwable |--Error 严重问题,我们不处理。 |--Exception |--RuntimeException 运行期异常,我们需要修正代码 |--非RuntimeException 编译期异常,必须处...

Redis高频面试题整理(含答案解析)

Redis高频面试题整理(含答案解析)

1、什么是Redis?简述它的优缺点? 2、Redis相比memcached有哪些优势? (1) memcached所有的值均是简单的字符串,redis作为其替代者,支持更为丰富的数据类型 (2) redis的速度比memcach...

遇到的面试题记录

1、面试题题目相关的问题,有一张订单表,有个订单日期字段,其他有订单id、下单人、金额信息,要统计每天的总金额,需求查询4月25到6月5号之间的数据,要求:中间没有日期的也要有展示数据,都是0 2、常量问题a = new Integer(2)b = new Integer(2)a...

【面试题】MySQL常见面试题合集

【面试题】MySQL常见面试题合集

备战实习,会定期的总结常考的面试题,大家一起加油! 🎯 往期文章: 【面试题】计算机网络篇-10道常见面试题p1 【面试题】JVM篇-10道常见面试题p1 【面试题】Java并发篇-10道常见面试题p1...

Android 高级开发面试题以及答案整理

Android 高级开发面试题以及答案整理

如今安卓开发不像前几年那么热门,但是高级人才依然紧缺,大家看着这句话是不是很熟悉,因为 web 高级人才也紧缺,c++ 高级人才一样紧缺,那么到了人工智能时代,人工智能时代的高级人才也同样会紧缺!似乎是高级人才的人在其他领域也是高级人才,而不是因为选择了...

多线程常见的面试题

多线程常见的面试题

多线程常见的面试题: 1. 什么是线程和进程? 线程与进程的关系,区别及优缺点? 进程是程序的一次执行过程,是系统运行程序的基本单位,因此进程是动态的。系统运行一个程序即是一个进程从创建,运行到消亡的过程。 在 Java 中,当我们启动...

高级工程师->架构师

高级工程师->架构师

1. 分解等级 技术人员典型的发展路径基本上都是下面的这个模式: 1) 0 ~1年:菜鸟,需要别人手把手来教 2)1 ~ 3年:初级,需要别人带你做 3)3 ~ 5年:高级,能独当一面,可以带初级技术人员了 4)5 ~ 8年:资深,能独挡多面 5)8...

24

  历时30天的腾讯Android研发岗面试血泪史!最终拿到offer25K+16薪_chuhe1989的博客-CSDN博客  高级工程师调优秘籍;使用SparseArray代替HashMap_chuhe1989的博客-CSDN博客  A...

SaaS,PaaS,IaaS都是什么鬼?

SaaS,PaaS,IaaS都是什么鬼?

IaaS Infrastructure as a Service,基础设施即服务。 假如你现在要做一个网站,你肯定要有一台服务器或者虚拟机,要么自己搭建,要么买服务器运营商的。说白了,IaaS就是解决企业硬件问题的,包括服务器、存储设备、网络设备等...

为什么 String 是不可变的?

为什么 String 是不可变的?

作者:Yujiaao https://segmentfault.com/a/1190000019962661 我最喜欢的 Java 面试问题,不好回答,但同时也非常有用。一些面试者也常问这个问题,为什么 String 在 Java 中是 final&n...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。