WEB前端性能优化的7大手段详解

2020-06-16 06:43:10易采站长站整理

开启gzip

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

优化网络连接
使用CDN

CDN全称是Content Delivery Network,即内容分发网络,它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度

使用DNS预解析

当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址。在解析过程中,按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序,逐步读取缓存,直到拿到IP地址

DNS Prefetch,即DNS预解析就是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度

方法是在 head 标签里面写上几个 link 标签


<link rel="dns-prefecth" href="https://www.jb51.net">

<link rel="dns-prefecth" href="https://www.jb51cs.net" rel="external nofollow" >

对以上几个网站提前解析 DNS,由于它是并行的,不会堵塞页面渲染,这样可以缩短资源加载的时间

并行连接

由于在HTTP1.1协议下,chrome每个域名的最大并发数是6个。使用多个域名,可以增加并发数

持久连接

使用keep-alive或presistent来建立持久连接,持久连接降低了时延和连接建立的开销,将连接保持在已调谐状态,而且减少了打开连接的潜在数量

管道化连接

在HTTP2协议中,可以开启管道化连接,即单条连接的多路复用,每条连接中并发传输多个资源,这里就不需要添加域名来增加并发数了

优化资源加载
资源加载位置

通过优化资源加载位置,更改资源加载时机,使尽可能快地展示出页面内容,尽可能快地使功能可用

1、CSS文件放在head中,先外链,后本页

2、JS文件放在body底部,先外链,后本页

3、处理页面、处理页面布局的JS文件放在head中,如babel-polyfill.js文件、flexible.js文件

4、body中间尽量不写style标签和script标签

资源加载时机

1、异步script标签

defer:  异步加载,在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似