浏覽器緩存就是浏覽器根據 url 第一次通路網站之後，将網站的 html、css、js、圖檔等檔案複制一份保留到浏覽器中，當你二次通路這個 url 的網站時，如果網站沒有明确表示有更新時，浏覽器直接在緩存中查找内容，不會再次請求網頁内容，隻有網頁明确表示有更新時，浏覽器才會向伺服器發起網路請求，再次下載下傳網頁。
浏覽器緩存對于前端一點都不陌生，最常見的就是，新版本上線了，測試卻說這怎麼還沒有變化呢？使用 ctr + F5 強制重新整理之後，立馬就好了。或者清除浏覽器緩存，按住ctr+shift+delete，彈出如圖：
我們會發現目前浏覽器緩存的圖檔和檔案的大小。或者進入chrome://chrome-urls/找到chrome://cache/ 就可以看到所有緩存的位址清單。對于浏覽器緩存，前端對它是又愛又恨，有時想保留，有時想禁掉，是以看看浏覽器緩存到底是怎樣的？
一、什麼是浏覽器緩存？
如上圖，百度首頁就是使用了緩存機制，首次通路之後 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-store | 強制緩存在任何情況下都不要保留任何副本 | |||
| max-age=[秒] | 指明緩存副本的有效時長，從請求時間開始到過期時間之間的秒數 | |||
| public | 任何路徑的緩存者（本地緩存、代理伺服器），可以無條件的緩存該資源 | |||
| private | 隻針對單個使用者或者實體（不同使用者、視窗）緩存資源 | |||
| Last-Modified | 告訴浏覽器這個資源最後的修改時間。伺服器将資源傳遞給用戶端時，會将資源最後更改的時間以“Last-Modified: GMT”的形式加在實體首部上一起傳回給用戶端【隻能精确到秒級，如果某些檔案在1秒鐘以内，被修改多次的話，它将不能準确标注檔案的修改時間】 | |||
| If-Modified-Since | 請求 | 其值為上次響應頭的Last-Modified值，再次向web伺服器請求時帶上頭If-Modified-Since。web伺服器收到請求後發現有頭If-Modified-Since則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源内容（寫在響應消息包體内），包括更新Last-Modified的值，HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304(無需請求，節省浏覽)，告知浏覽器繼續使用所儲存的cache | ||
| 校驗值 | ETag | "fd56273325a2114818df4f29a628226d" | 告訴浏覽器目前資源在伺服器的唯一辨別符（生成規則由伺服器決定） | |
| If-None-Match | 當資源過期時（使用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浏覽器不緩存時。