页面性能优化办法有哪些？

引子

互联网有一个著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果加载需要太长时间，就会放弃访问。那我们如何优化页面性能，提高页面加载速度呢？这是本文主要探讨的问题，本文只关注一些核心要点。

控制资源文件加载优先级

一般情况下都是CSS在头部，JS在底部。

利用gulp工具对css、js、图片进行压缩、合并，可以减少使用宽带消耗和http请求的次数。

非核心代码异步加载

异步加载的方式---async、defer

(1)async方式是在加载完之后立即执行，如果是多个，执行顺序不分先后。
(2)defer方式是在HTML解析完之后才会执行，如果是多个，执行顺序按照加载的顺序依次执行。

屏幕快照 2019-03-22 下午5.41.39.png

利用浏览器缓存

浏览器缓存类型分为强制缓存和协商缓存

强制缓存优先于协商缓存，若强制缓存生效则直接从浏览器读取缓存(强制缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端内容较客户端是否已经发生了更新。此时我们需要协商缓存策略)，若失效则进行协商缓存，服务器会根据请求头部的一些参数来判断协商缓存是否有效，如果有效，就会从浏览器中读取缓存，如果失效就会重新请求服务器获取结果再存入浏览器缓存中。

使用CDN

浏览器缓存只是为了提升二次访问的速度，对于首次访问的加速，我们需要从那个网络层面进行优化，最常见的手段就是CDN加速。通过将静态资源(例如javascript、css、图片等)缓存到离用户最近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的宽带消耗，降低负载。

CDN是怎么做到加速的呢

CDN的工作原理就是将资源站的资源缓存到位于各地的CDN节点上，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它就会去资源站获取获取最新的资源响应给用户，并将内容缓存下来以便响应给后续访问的用户。(因此一个地区只要有一个用户先加载资源，就会在CDN中建立了缓存，该地区的其他后续用户都能受益。)

使用DNS预读取

DNS预读取是一项使浏览器主动去解析域名的功能，其范围包括文档的图片、css、url，因为预读取是在后台执行的，所以DNS可以在链接对应的东西出现之前解析完毕，减少用户点击链接时的延迟。

打开和关闭DNS预读取

你可以通过在服务器发送X-DNS-Prefetch-Control报头，或是在文档中使用值为http-equiv的标签：

 
 参数content的值为on为打开，如果为off则为关闭。 
 强制查询特定主机名 
 你可以通过使用rel属性值为link type的dns-prefetch的标签来对特定域名进行预读取 
 
 
 我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。通过DNS预解析来告诉浏览器未来我们可能从某个特定的URL获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快完成DNS解析。