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

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

一般网站优化都是优化后台,如接口的响应时间、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除了负载均衡功能,它也可以通过配置缓存功能来加速请求响应速度,当用户第一次访问的时候静态资源就可以被缓存到反向代理服务器上,这样其他用户的请求就能直接从反向代理服务器直接获取返回,这样也就直到了静态资源缓存的作用。


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


相关文章
|
4月前
|
Web App开发 SQL 缓存
Web优化躬行记(6)——优化闭环实践
Web优化躬行记(6)——优化闭环实践
|
7月前
|
JavaScript 前端开发 UED
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能2
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
115 0
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能2
|
7月前
|
Web App开发 缓存 监控
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
111 0
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
|
7月前
|
前端开发 关系型数据库 MySQL
彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-项目结构优化EP05
前文再续,上一回我们完成了用户管理模块的CURD(增删改查)功能,功能层面,无甚大观,但有一个结构性的缺陷显而易见,那就是项目结构过度耦合,项目的耦合性(Coupling),也叫耦合度,进而言之,模块之间的关系,是对项目结构中各模块间相互联系紧密程度的一种量化。耦合的强弱取决于模块间调用的复杂性、调用模块之间的方式以及通过函数或者方法传送数据对象的多少。模块间的耦合度是指模块之间的依赖关系,包括包含关系、控制关系、调用关系、数据传递关系以及依赖关系。项目模块的相互依赖越多,其耦合性越强,同时表明其独立性越差,愈加难以维护。
彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-项目结构优化EP05
|
8月前
|
中间件
基于Gin封装Web框架 - 7. 控制器优化 - 更好用的控制器模式
基于Gin封装Web框架 - 7. 控制器优化 - 更好用的控制器模式
264 0
基于Gin封装Web框架 - 7. 控制器优化 - 更好用的控制器模式
|
8月前
|
Web App开发 测试技术 索引
Flutter Web网站之ScrollView+GridView优化
Flutter Web网站之ScrollView+GridView优化
110 0
Flutter Web网站之ScrollView+GridView优化
|
9月前
|
前端开发
|
9月前
|
移动开发 Dart JavaScript
Flutter for Web 首次首屏优化——JS 分片优化
Flutter for Web 首次首屏优化——JS 分片优化
791 1
Flutter for Web 首次首屏优化——JS 分片优化
|
10月前
|
缓存 安全 前端开发
LNMP架构下WEB服务器如何管理及优化内存?
Ngnix+PHP-FPM的工作方式,似乎是LNMP架构最节省系统资源的工作方式。当然,具体的技术选型更多的应该参考自己想要实现的业务需求。
102 0
|
编解码 缓存 监控
WEB图像优化
图像是网站或者WEB应用重要的组成部分,随着现在终端设备及5G的普及,用户对于图像的要求越来越高,为了提供更加速度体验,可以对图像进行优化。
126 0
WEB图像优化
推荐文章
更多