瀏覽器緩存對於前端一點都不陌生，最常見的就是，新版本上線了，測試卻說這怎么還沒有變化呢？使用 ctr + F5 強制刷新之后，立馬就好了。或者清除瀏覽器緩存，按住ctr+shift+delete，彈出如圖：
我們會發現目前瀏覽器緩存的圖片和文件的大小。或者進入chrome://chrome-urls/找到chrome://cache/ 就可以看到所有緩存的地址列表。對於瀏覽器緩存，前端對它是又愛又恨，有時想保留，有時想禁掉，所以看看瀏覽器緩存到底是怎樣的？
一、什么是瀏覽器緩存？
瀏覽器緩存就是瀏覽器根據 url 第一次訪問網站之后，將網站的 html、css、js、圖片等文件復制一份保留到瀏覽器中，當你二次訪問這個 url 的網站時，如果網站沒有明確表示有更新時，瀏覽器直接在緩存中查找內容，不會再次請求網頁內容，只有網頁明確表示有更新時，瀏覽器才會向服務器發起網路請求，再次下載網頁。
如上圖，百度首頁就是使用了緩存機制，首次訪問之后 web資源被緩存，在后面重復請求中，資源直接在緩存中讀取，而不是向服務器請求資源。
二、為什么使用緩存？
2.1、為什么很多網站二次打開速度很快？
網頁二次打開很快，主要原因是第一次加載頁面過程中，緩存了部分耗時數據，這一現象，對於單頁面應用開發非常明顯。
上一篇文章《瀏覽器工作原理》中，瀏覽器工作流程介紹，輸入網址回車以后瀏覽器向服務器發起服務之前，會現在瀏覽器緩存中查詢是否有需要的文件？如果有則直接在緩存中獲取文件，避免向服務器請求和下載文件，所以節省了一部分時間。
2.2、瀏覽器緩存優點
1、減少網絡帶寬消耗
對於網站運營者或者訪問網頁的用戶，帶寬就代表着 money ，過多的消耗帶寬，我們服務器配置就得升級，使用瀏覽器緩存之后，就會減少網絡流量，降低運營成本。
2、降低服務器壓力
使用瀏覽器緩存之后，除第一次訪問需要向服務器請求網站全部資源，后續訪問可以重復使用瀏覽器本地緩存，減少對服務器的請求，間接降低服務器的壓力，同時，搜索引擎的爬蟲也會根據緩存過期機制降低抓取的頻率，也可以降低服務器壓力。
3、減少網絡延遲，加快網頁加載
瀏覽器緩存 web資源后，減少網絡請求，可以更快速地獲取到服務器返回數據，同時使用瀏覽器緩存內的文件比服務器獲取快很多，所以網頁加載速度明顯快很多。
三、瀏覽器的緩存規則
對於瀏覽器端的緩存來講，這些規則是在 http 協議和 meta 標簽中定義的。分別從兩個維度：新鮮度和校驗值，規定瀏覽器是否可以直接使用緩存中的副本，還是直接從服務器獲取最新資源。
3.1、新鮮度(過期)：瀏覽器緩存的有效期，緩存必須滿足以下兩個條件，瀏覽器才會認為是最新的，可以直接使用。
- 含有完整的過期時間控制頭信息，並在有效期內。
- 瀏覽器已經使用過這個副本，並且在會話中已經檢查過新鮮度。
3.2、校驗值(驗證)：服務器返回資源的時候，會在響應頭信息中帶上資源實體標簽 Entity Tag，可以用來作為瀏覽器再次請求過程的校驗標識，如果發現校驗標識不匹配，說明資源已經被修改過或過期，瀏覽器需要重新請求資源。
四、如何控制緩存？
緩存規則可以設置在html的meta標簽，也可以設置在http協議頭內。
4.1、前端 html 中 meta 標簽
在 html 頁面中加入緩存設置，代碼如下：
<meta http-equiv="Pragma" content="no-cache" /> <!-- Pragma是http1.0版本中給客戶端設定緩存方式之一 -->上邊代碼，禁止瀏覽器緩存，瀏覽器每次訪問網頁都要去服務器請求。事實這種禁用緩存形式作用有限：
- 只有IE瀏覽器才能標識這段 meta 的含義，其他主流瀏覽器僅認識 “Cache-Control:no-store” 的 meta 標簽。
- 在IE瀏覽器中，並不一定添加 pragma，但是會讓當前網頁每次都會向服務器發送請求。
4.2、HTTP協議頭
http請求和響應頭中，與緩存相關的常見類型：
| 規則 |
消息報頭 |
值/示例 |
類型 |
作用 |
| 新鮮度 |
Pragma |
no-cache |
響應 |
告訴瀏覽器忽略資源的緩存副本，每次訪問都需要去服務器拉取【http1.0中存在的字段，在http1.1已被拋棄，使用Cache-Control替代，但為了做http協議的向下兼容，很多網站依舊會帶上這個字段】 |
|
|
Expires |
Mon, 15 Aug 2016 03:56:47 GMT |
響應 |
啟用緩存和定義緩存時間。告訴瀏覽器資源緩存過期時間，如果還沒過該時間點則不發請求【http1.0中存在的字段，該字段所定義的緩存時間是相對服務器上的時間而言的，如果客戶端上的時間跟服務器上的時間不一致（特別是用戶修改了自己電腦的系統時間），那緩存時間可能就沒啥意義了。在HTTP 1.1版開始，使用Cache-Control: max-age=秒替代】 |
|
|
Cache-Control |
no-cache |
響應 |
告訴瀏覽器忽略資源的緩存副本，強制每次請求直接發送給服務器，拉取資源，但不是“不緩存” |
|
|
|
no-store |
響應 |
強制緩存在任何情況下都不要保留任何副本 |
|
|
|
max-age=[秒] |
響應 |
指明緩存副本的有效時長，從請求時間開始到過期時間之間的秒數 |
|
|
|
public |
響應 |
任何路徑的緩存者（本地緩存、代理服務器），可以無條件的緩存該資源 |
|
|
|
private |
響應 |
只針對單個用戶或者實體（不同用戶、窗口）緩存資源 |
|
|
Last-Modified |
Mon, 15 Aug 2016 03:56:47 GMT |
響應 |
告訴瀏覽器這個資源最后的修改時間。服務器將資源傳遞給客戶端時，會將資源最后更改的時間以“Last-Modified: GMT”的形式加在實體首部上一起返回給客戶端【只能精確到秒級，如果某些文件在1秒鍾以內，被修改多次的話，它將不能准確標注文件的修改時間】 |
|
|
If-Modified-Since |
Mon, 15 Aug 2016 03:56:47 GMT |
請求 |
其值為上次響應頭的Last-Modified值，再次向web服務器請求時帶上頭If-Modified-Since。web服務器收到請求后發現有頭If-Modified-Since則與被請求資源的最后修改時間進行比對。若最后修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），包括更新Last-Modified的值，HTTP 200；若最后修改時間較舊，說明資源無新修改，則響應HTTP 304(無需請求，節省瀏覽)，告知瀏覽器繼續使用所保存的cache |
| 校驗值 |
ETag |
"fd56273325a2114818df4f29a628226d" |
響應 |
告訴瀏覽器當前資源在服務器的唯一標識符（生成規則由服務器決定） |
|
|
If-None-Match |
"fd56273325a2114818df4f29a628226d" |
請求 |
當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage聲明，則再次向web服務器請求時帶上頭If-None-Match（Etag的值）。web服務器收到請求后發現有頭If-None-Match則與被請求資源的相應校驗串進行比對，決定返回200或304 |
各種類型之間的關系和區別：
- Cache-Control 與 Expires：它兩作用一樣，都表明當前資源的有效期，控制瀏覽器是取緩存還是直接向服務器獲取，Cache-Control可以設置的更細致，如果同時設置，它的優先級高於Expires。
- Last-Modified / ETag 與 Cache-Control / Expires：配置Last-Modified/ETag的情況下，瀏覽器再次訪問URL的資源，還是會發送請求到服務器，詢問文件是否已經修改，如果沒有，服務器會給瀏覽器返回304，瀏覽器直接從本地緩存中取就好了，反之，服務器會直接向瀏覽器返回數據。Cache-Control / Expires 檢測本地緩存是否還在有效期內，在有效期內，直接使用本地緩存，阻止發送請求。如果同時設置，Cache-Control / Expiress 優先級更高。一般情況下，兩者配合使用，因為即使服務器設置緩存時間, 當用戶點擊“刷新”按鈕時，瀏覽器會忽略緩存繼續向服務器發送請求，這時Last-Modified/ETag將能夠很好利用304，從而減少響應開銷。
- Last-Modified 與 ETag：ETag主要是為了解決Last-Modified比較難解決的問題：1、Last-Modified標注的最后修改只能精確到秒級，如果某些文件在1秒鍾以內，被修改多次的話，它將不能准確標注文件的新鮮度。2、如果某些文件會被定期生成，當有時內容並沒有任何變化，但Last-Modified卻改變了，導致文件沒法使用緩存。3、有可能存在服務器沒有准確獲取文件修改時間，或者與代理服務器時間不一致等情形。ETag是服務器自動生成或開發者生成對應資源在服務器的唯一標識符，能夠更加精准控制緩存。兩者可以一起使用，服務器優先驗證ETag，一致時，才會繼續比對Last-Mofifed，才決定是否要返回304。
五、不能緩存的請求
並不是所有的請求都能被緩存，無法被緩存的有：
- post 請求無法被緩存。
- 需要根據cookie、認證信息等決定輸入內容的動態請求不能被緩存。
- http響應頭中不包含Last-Modified/ETag，也不包含Cache-Control/Expiress的請求無法被緩存。
- http信息頭明確設置Cache-Control:no-cache,pragma:no-cache或Cache-Control:max-age=0瀏覽器不緩存時。