谈谈页面性能的那些事

前言：一般页面访问的“258”原则，在2s内响应，很快，在2-5s内响应，速度还行，5-8s内响应，速度较慢，但还能接受，超过8s，槽糕透了。所以，页面的性能首先决定了用户的体验，只有用户体验好才能给网站带来更多的用户，除此之外，好的前端优化还能降低企业成本，提高公司利益。

优化方向

• 加快页面展示
• 减少服务器带宽流量
• 降低服务器压力

一般优化方案

一、将静态资源（例如js,css,html）打包压缩,http请求开启gzip压缩，可以节约服务器带宽流量，加快资源加载

二、能使用雪碧图的就是用雪碧图，将较小的js,css等打包合并，减少http请求的数量，降低服务器的压力

三、使用http缓存，合适的缓存，可以大大降低服务器的压力和服务器带宽流量

四、非核心代码异步加载，加快页面的展示

• 使用script标签动态加载，使用DOM API创建script标签动态插入页面
• defer     

  <script  defer  src="xxxx.js"></script>

  并行加载，不会阻塞DOM Tree的构建，页面渲染完后才执行，执行顺序与加载顺序有关

• async   

  <script  defer  src="xxxx.js"></script>

  并行加载，加载时不会阻塞DOM Tree的构建，加载完立马执行，执行时会阻塞DOM Tree的构建，执行顺序与加载顺序无关，谁先加载完谁先执行。

五、使用CDN加速

• 全称Content Delivery Network（内容分发网络）
• 通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络"边缘"的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度

六、DNS预解析：当浏览器加载页面的时候，会对页面的域名进行预解析（例如a链接里的地址），这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。一般情况，对于http来说，浏览器会默认对网页中的a链接域名进行预解析，但对于https协议来说，浏览器不会对网页做DNS预解析。

• meta标签强制开启DNS预解析

<meta http-equiv="x-dns-prefetch-control" content="on" />

• 使用link标签对指定域名进行DNS预解析

<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />