頁面性能

提高頁面性能的方法有哪些？

1. 資源壓縮合並，減小 HTTP 請求

2. 非核心代碼異步加載

　　異步加載的方法

　　　　1）、 動態腳本加載: 利用 document.createElement() 方法，就是說用 js建立一個標籤，把這個標籤添加到 body 或者 header 上去，總之加到文檔中，實現加載，就是建立動態節點

　　　　2）、defer：異步加載方式，在後面加上 defer, 多個按需加載，執行順序按加載順序

　　　　3）、async：異步加載方式， 在後面加上 async, 執行順序與加載順序無關

　　異步加載的區別

　　　　1）、defer是在 HTML 解析完成以後纔會執行，若是是多個，按照加載順序依次執行

　　　　2）、async是在加載完以後馬上執行，若是是多個，執行順序和加載順序無關

3. 利用瀏覽器緩存：緩存指資源文件在瀏覽器中存在着備份也能夠理解爲叫副本，把資源文件放到本地文件上，存到電腦磁盤上

　　緩存的分類：

　　　　1）、 強緩存： 在必定時間內，不與服務器端通訊，直接從瀏覽器副本拿出來用

　　　　　　利用 http 響應頭中的 Expires 和 Cache-Control實現

　　　　　　瀏覽器第一次請求一個資源時，服務器在返回該資源的同時，會把上面這兩個屬性放在response header中。

　　　　　　

　　　　　　注意：這兩個response header屬性能夠只啓用一個，也能夠同時啓用。當response header中，Expires和Cache-Control同時存在時，Cache-Control的優先級高於Expires。

　　　　　　Expires：表示絕對時間，是較老的強緩存管理 response header。瀏覽器再次請求這個資源時，先從緩存中尋找，找到這個資源後，拿出它的Expires跟當前的請求時間比較，若是請求時間在Expires的時間以前，就能命中緩存，不然就不行。

若是緩存沒有命中，瀏覽器直接從服務器請求資源時，Expires Header在從新請求的時候會被更新。

　　　　　　存在的問題是：服務器的事件和客戶端的事件可能不一致。在服務器時間與客戶端時間相差較大時，緩存管理容易出現問題，好比隨意修改客戶端時間，就能影響緩存命中的結果。因此，在http1.1中，提出了一個新的response header，就是Cache-Control。

　　　　　　Cache-Control: 相對時間， 單位是秒

　　　　　　http1.1中新增的 response header。瀏覽器第一次請求資源以後，在接下來的相對時間以內，均可以利用本地緩存。超出這個時間以後，則不能命中緩存。從新請求時，Cache-Control會被更新

　　　　2）、 協商緩存：瀏覽器發現有副本可是不肯定用不用它，向服務器問一下要不要用，和服務器協商一下

　　　　當瀏覽器對某個資源的請求沒有命中強緩存（也就是說超出時間了），就會發一個請求到服務器，驗證協商緩存是否命中。

　　　　協商緩存是利用的是兩對Header：

　　　　1、Last-Modified (上次修改時間)， If-Modified-Since

　　　　2、 Etag, If-None-Match

　　　　

4. 使用 CDN

怎麼最快地讓用戶請求資源。一方面是讓資源在傳輸的過程當中變小，另外就是CDN。

要注意，瀏覽器第一次打開頁面的時候，瀏覽器緩存是起不了做任何用的，使用CDN，效果就很明顯。

5. 預解析 DNS

<meta http-equiv="x-dns-prefetch-control" content="on"> 在一些高級瀏覽器中，頁面中全部的超連接（<a>標籤），默認打開了DNS預解析。可是頁面是 https 協議開頭的不少瀏覽器是默認關閉 超連接 dns 預解析的，經過http-equiv="x-dns-prefetch-control" 這句話強制打開 dns 預解析

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">  當咱們從某個 URL 請求一個資源時，用rel="dns-prefetch"  作到 dns 預解析，就再也不須要等待 DNS 解析的過程。