前端百題斬之一文了解HTTP緩存
緩存是指代理服務器或客戶端本地磁盤內保存的資源副本，利用緩存可減少對源服務器的訪問，節省通信流量和通信時間。
瀏覽器緩存指的就是瀏覽器對之前請求過的文件進行緩存，以便在下一次訪問時重復使用，從而節省帶寬、提升訪問速度、降低服務器壓力。
今天所說的HTTP緩存機制就是利用HTTP響應頭將所請求的資源在瀏覽器中進行緩存，緩存方式主要分為兩種：強緩存、協商緩存。
3.1 強緩存
強緩存指的是在緩存時間內不會向服務器發起請求，只有過期之后才會向服務器發起請求，整個流程如下所示：
HTTP中存在兩個響應頭來表征強緩存，分別是：Expires、Cache-Control，下面對這兩個字段進行闡述。
3.1.1 Expires
Expires是HTTP1.0中的字段，是一個絕對時間，即服務器時間。瀏覽器檢查當前時間，如果還沒到失效時間就直接使用緩存文件。
3.1.2 Cache-Control
由于Expires存在服務器時間越客戶端時間不一致的問題，所以HTTP1.1中新增了Cache-Control字段(注意：如果同時存在cache-control和expires時，瀏覽器總是優先使用cache-control)，通過設置max-age來不存一個相對時間，表示其在該相對時間內容有效。對于Cache-Control字段的常見取值如下所示：
- private：默認值，表示客戶端可以緩存，中間代理、CDN等不能緩存此響應;
- public：表示客戶端和代理服務器都可緩存;
- max-age=xxx：緩存的內容將在xxx秒后失效;
- no-cache：需要使用協商緩存來驗證緩存數據;
- no-store：所有內容都不會緩存(包括協商緩存)，每次都向服務器請求最新資源;
- must-revalidate：在緩存過期前可以使用，過期后必須向服務器驗證。
3.1.3 為什么增加Cache-Control字段?
Expires字段存在一個問題，即該字段利用的是絕對時間，由于服務器時間與客戶端時間可能不一致，從而導致問題，所以新增了Cache-Control字段。
3.2 協商緩存
協商緩存都會向服務器發送請求，判斷緩存數據是否過期，過期的話會返回新的內容，沒有過期則使用本地的緩存數據。對于協商緩存主要利用兩個字段：Last-Modify、Etag，其整體流程如下所示：
注：圖片來源于(https://www.cnblogs.com/zhouwenhong/p/3928645.html)
3.2.1 Last-Modify
last-modified是HTTP1.0中的字段，是第一次請求資源時，服務器返回的字段，表示最后一次更新的時間。下一次瀏覽器請求資源時就發送if-modified-since字段。服務器用本地Last-modified時間與if-modified-since時間比較，如果不一致則認為緩存已過期并返回新資源給瀏覽器;如果時間一致則發送304狀態碼，讓瀏覽器繼續使用緩存。
3.2.2 Etag
Etag是HTTP1.1中新增的字段，是資源的實體標識(哈希字符串)，當資源內容更新時，Etag會改變。服務器會判斷Etag是否發生變化，如果變化則返回新資源，否則返回304。
3.2.3 為什么增加Etag字段?
在Last-Modify字段存在情況下又新增Etag字段的理由主要有以下幾點：
- 一些文件進行更改后，其內容并沒有發生變化，僅僅影響了修改時間，這時候不應該認為緩存過期了;
- 某些文件修改太多頻繁(秒級別以內)，但是If-Modify-Since能檢查的精度是秒級別，此時會導致問題;
- 某些服務器并不能精確得到文件的最后修改時間。
本文轉載自微信公眾號「執鳶者」，可以通過以下二維碼關注。轉載本文請聯系執鳶者公眾號。
