Web 緩存大致可以分爲：數據庫緩存、服務器端緩存（代理服務器緩存、CDN 緩存）、瀏覽器緩存。
瀏覽器緩存也包含很多內容：HTTP 緩存、indexDB、cookie、localstorage 等等。這裏我們只討論 HTTP 緩存相關內容。
在具體瞭解 HTTP 緩存之前先來明確幾個術語：
-
緩存命中率：從緩存中得到數據的請求數與所有請求數的比率。理想狀態是越高越好。
-
過期內容：超過設置的有效時間，被標記爲“陳舊”的內容。通常過期內容不能用於回覆客戶端的請求，必須重新向源服務器請求新的內容或者驗證緩存的內容是否仍然準備。
-
驗證：驗證緩存中的過期內容是否仍然有效，驗證通過的話刷新過期時間。
-
失效：失效就是把內容從緩存中移除。當內容發生改變時就必須移除失效的內容。
瀏覽器緩存主要是 HTTP 協議定義的緩存機制。HTML meta 標籤，例如
<META HTTP-EQUIV="Pragma" CONTENT="no-store">
含義是讓瀏覽器不緩存當前頁面。但是代理服務器不解析 HTML 內容，一般應用廣泛的是用 HTTP 頭信息控制緩存。
瀏覽器緩存分類
瀏覽器緩存分爲強緩存和協商緩存，瀏覽器加載一個頁面的簡單流程如下：
-
瀏覽器先根據這個資源的http頭信息來判斷是否命中強緩存。如果命中則直接加在緩存中的資源，並不會將請求發送到服務器。
-
如果未命中強緩存，則瀏覽器會將資源加載請求發送到服務器。服務器來判斷瀏覽器本地緩存是否失效。若可以使用，則服務器並不會返回資源信息，瀏覽器繼續從緩存加載資源。
-
如果未命中協商緩存，則服務器會將完整的資源返回給瀏覽器，瀏覽器加載新資源，並更新緩存。
強緩存
命中強緩存時，瀏覽器並不會將請求發送給服務器。在Chrome的開發者工具中看到http的返回碼是200，但是在Size列會顯示爲(from cache)。
強緩存是利用http的返回頭中的Expires或者Cache-Control兩個字段來控制的，用來表示資源的緩存時間。
Expires
緩存過期時間，用來指定資源到期的時間，是服務器端的具體的時間點。也就是說，Expires=max-age + 請求時間，需要和Last-modified結合使用。但在上面我們提到過，cache-control的優先級更高。Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。
該字段會返回一個時間，比如Expires:Thu,31 Dec 2037 23:59:59 GMT。這個時間代表着這個資源的失效時間，也就是說在2037年12月31日23點59分59秒之前都是有效的，即命中緩存。這種方式有一個明顯的缺點，由於失效時間是一個絕對時間，所以當客戶端本地時間被修改以後，服務器與客戶端時間偏差變大以後，就會導致緩存混亂。於是發展出了Cache-Control。
Cache-Control
Cache-Control是一個相對時間，例如Cache-Control:3600，代表着資源的有效期是3600秒。由於是相對時間，並且都是與客戶端時間比較，所以服務器與客戶端時間偏差也不會導致問題。
Cache-Control與Expires可以在服務端配置同時啓用或者啓用任意一個，同時啓用的時候Cache-Control優先級高。
Cache-Control 可以由多個字段組合而成，主要有以下幾個取值：
1. max-age 指定一個時間長度，在這個時間段內緩存是有效的，單位是s。例如設置 Cache-Control:max-age=31536000，也就是說緩存有效期爲（31536000 / 24 / 60 * 60）天，第一次訪問這個資源的時候，服務器端也返回了 Expires 字段，並且過期時間是一年後。
在沒有禁用緩存並且沒有超過有效時間的情況下，再次訪問這個資源就命中了緩存，不會向服務器請求資源而是直接從瀏覽器緩存中取。
2. s-maxage 同 max-age，覆蓋 max-age、Expires，但僅適用於共享緩存，在私有緩存中被忽略。
3. public 表明響應可以被任何對象（發送請求的客戶端、代理服務器等等）緩存。
4. private 表明響應只能被單個用戶（可能是操作系統用戶、瀏覽器用戶）緩存，是非共享的，不能被代理服務器緩存。
5. no-cache 強制所有緩存了該響應的用戶，在使用已緩存的數據前，發送帶驗證器的請求到服務器。不是字面意思上的不緩存。
6. no-store 禁止緩存，每次請求都要向服務器重新獲取數據。
7、must-revalidate指定如果頁面是過期的，則去服務器進行獲取。這個指令並不常用，就不做過多的討論了。
協商緩存
若未命中強緩存，則瀏覽器會將請求發送至服務器。服務器根據http頭信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match來判斷是否命中協商緩存。如果命中，則http返回碼爲304，瀏覽器從緩存中加載資源。
Last-Modify/If-Modify-Since
瀏覽器第一次請求一個資源的時候，服務器返回的header中會加上Last-Modify，Last-modify是一個時間標識該資源的最後修改時間，例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。
當瀏覽器再次請求該資源時，發送的請求頭中會包含If-Modify-Since，該值爲緩存之前返回的Last-Modify。服務器收到If-Modify-Since後，根據資源的最後修改時間判斷是否命中緩存。
如果命中緩存，則返回http304，並且不會返回資源內容，並且不會返回Last-Modify。由於對比的服務端時間，所以客戶端與服務端時間差距不會導致問題。但是有時候通過最後修改時間來判斷資源是否修改還是不太準確（資源變化了最後修改時間也可以一致）。於是出現了ETag/If-None-Match。
ETag/If-None-Match
與Last-Modify/If-Modify-Since不同的是，Etag/If-None-Match返回的是一個校驗碼（ETag: entity tag）。ETag可以保證每一個資源是唯一的，資源變化都會導致ETag變化*。ETag值的變更則說明資源狀態已經被修改。服務器根據瀏覽器上發送的If-None-Match值來判斷是否命中緩存。
ETag擴展說明
我們對ETag寄予厚望，希望它對於每一個url生成唯一的值，資源變化時ETag也發生變化。神祕的Etag是如何生成的呢？以Apache爲例，ETag生成靠以下幾種因子
-
文件的i-node編號，此i-node非彼iNode。是Linux/Unix用來識別文件的編號。是的，識別文件用的不是文件名。使用命令’ls –I’可以看到。
-
文件最後修改時間
-
文件大小
生成Etag的時候，可以使用其中一種或幾種因子，使用抗碰撞散列函數來生成。所以，理論上ETag也是會重複的，只是概率小到可以忽略。
既生Last-Modified何生Etag？
你可能會覺得使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新，爲什麼還需要Etag（實體標識）呢？HTTP1.1中Etag的出現主要是爲了解決幾個Last-Modified比較難解決的問題：
1. Last-Modified標註的最後修改只能精確到秒級，如果某些文件在1秒鐘以內，被修改多次的話，它將不能準確標註文件的修改時間
2. 如果某些文件會被定期生成，當有時內容並沒有任何變化，但Last-Modified卻改變了，導致文件沒法使用緩存
3.有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形
Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的唯一標識符，能夠更加準確的控制緩存。Last-Modified與ETag是可以一起使用的，服務器會優先驗證ETag，一致的情況下，纔會繼續比對Last-Modified，最後才決定是否返回304。
用戶行爲與緩存
瀏覽器緩存行爲還有用戶的行爲有關！！！
|
用戶操作 |
Expires/Cache-Control |
Last-Modified/Etag |
|
地址欄回車 |
有效 |
有效 |
|
頁面鏈接跳轉 |
有效 |
有效 |
|
新開窗口 |
有效 |
有效 |
|
前進、後退 |
有效 |
有效 |
|
F5刷新 |
無效 |
有效 |
|
Ctrl+F5刷新 |
無效 |
無效 |
總結:
瀏覽器第一次請求：
瀏覽器再次請求時：
