頁面優化---利用瀏覽器緩存

　　對於 web 應用來講，緩存是提高頁面性能同時減小服務器壓力的利器；

 

瀏覽器緩存類型：強緩存、協商緩存

　　強緩存

　　　　強緩存不會向服務器發送請求，直接從緩存中讀取資源，在 chrome 控制檯的 network 選項中能夠看到該請求返回 200 的狀態碼，而且 size 顯示 from disk cache 或者 from memory cache；

　　　　強緩存涉及到的相關的 header：expires、cache-control；

　　　　　　expires：response header 裏的過時時間，瀏覽器再次加載資源時，若是在這個過時時間內，則命中強緩存；它的值是一個絕對時間的 GMT 格式的時間字符串，好比： EXpires: Thu,21 Jan 2018 23:23:23 GMT;

　　　　　　Cache-Control：這是一個相對時間，在配置緩存的時候，以秒爲單位，用數值表示；當值設置爲 max-age=300 的時候，則表明在這個請求正確返回時間（瀏覽器也會記錄下來）的 5 分鐘內再次加載資源，就會命中強緩存；好比：Cache-Control:max-age=300

　　　　　　其實，expires 和 cache-control 的差異並非很大，區別就在於 expires 是 http1.0 的產物，cache-control 是 http1.1 的產物，二者同時存在的話，cache-control 的優先級會高於 expires ；在某些不支持 http1.1 的環境，expires 就會被用到；因此 expires 實際上是過期了的，現階段它的存在只是一種兼容的寫法；強緩存判斷是否緩存的依據來自因而否超出某個時間或者某個時間段，而不關心服務器端文件是否已經更新，這可能會致使加載文件不是服務器端最新的內容；

　　協商緩存

　　　　協商緩存向服務器發送請求，服務器會根據這個請求的 request header 的一些參數來判斷是否命中協商緩存，若是命中，則返回304 狀態碼並帶上新的 response header 通知瀏覽器從緩存中讀取資源；另外協商緩存須要與 cache-control 共同使用；

　　　　協商緩存設計到的相關的 header：Last-Modified 和 If-Modified-Since、ETag 和 If-None-Match；

　　　　　　Last-Modified 和 If-Modified-Since：當第一次請求資源時，服務器將資源傳遞給客戶端時，會將資源最後更改的時間以 Last-Modified：GMT 的形式加在實體首部上一塊兒返回給客戶端；客戶端會爲資源標記上改信息，下次再次請求時，會把該信息附帶在請求報文中一併帶給服務器去作檢查，若傳遞的時間值與服務器上該資源最終修改時間是一致的，則說明該資源沒有被修改過，直接返回 304 狀態碼，內容爲空，這樣就節省了傳輸數據量；若是兩個時間不一致，則服務器會發回該資源狀態並返回 200 狀態碼，和第一次請求時相似；這樣保證不向客戶端重複發出資源，也保證當服務器有變化時，客戶端可以獲得最新的資源；一個 304 響應比一個靜態資源一般小的多，這樣就節省了網絡帶寬；可是 last-modified 存在一些缺點：1）、某些服務端不能獲取精確的修改時間；2）、文件修改時間改了，但文件內容卻沒有變；

　　　　　　ETag 和 If-None-Match：ETag 是上一次加載資源時，服務器返回的 response header，是對該資源的一種惟一標識，只要資源有變換，ETag 就會從新生成；瀏覽器在下一次加載資源向服務器發送請求時，會將上一次返回的 ETag 值放到 request header 裏的 If-None-Match 裏，服務器只須要比較客戶端傳來的 If-None-Match 跟本身服務器上該資源的 ETag 是否一致，就能很好的判斷資源相對客戶端而言是否被修改過了；若是服務器發現 ETag 匹配不上，那麼直接以常規 GET 200 回包形式將新的資源發給客戶端，若是 ETag 是一致的，則直接返回 304 告訴客戶端直接使用本地緩存便可；

　　　　　　想比較而言，在精確度上 ETag 要優先於 Last-Modified；在性能上，ETag 要遜色於 Last-Modified；在優先級上，服務器效驗優先考慮 ETag；

 

 

緩存的機制

　　強制緩存優先於協商緩存進行，若強制緩存生效則直接使用緩存，若不生效則進行協商緩存，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那麼表明該請求的緩存失效，從新獲取請求結果，再存入瀏覽器緩存中，生效則返回 304 ，繼續使用緩存；

　　用戶行爲對瀏覽器緩存的影響：

　　　　一、地址欄訪問，連接跳轉是正經常使用戶行爲，將會觸發瀏覽器緩存機制；

　　　　二、F5 刷新，瀏覽器會設置 max-age = 0；跳過強緩存判斷，會進行協商緩存；

　　　　三、ctrl + F5 刷新，跳過強緩存和協商緩存，直接從服務器拉取資源