提升頁面性能的方法有哪些？
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：
一、Last-Modified (上次修改時間)， If-Modified-Since
二、 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="https://www.cnblogs.com//host_name_to_prefetch.com"> 當我們從某個 URL 請求一個資源時，用rel="dns-prefetch" 做到 dns 預決議，就不再需要等待 DNS 決議的程序，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/14437.html
標籤：其他
上一篇：JavaScript復習