瀏覽器快取和HTTP快取協商
簡單來說，瀏覽器快取就是把一個已經請求過的Web資源（如html頁面，圖片，js，資料等）拷貝一份副本儲存在瀏覽器中。快取會根據進來的請求儲存輸出內容的副本。當下一個請求來到的時候，如果是相同的URL，快取會根據快取機制決定是直接使用副本響應訪問請求，還是向源伺服器再次傳送請求。比較常見的就是瀏覽器會快取訪問過網站的網頁，當再次訪問這個URL地址的時候，如果網頁沒有更新，就不會再次下載網頁，而是直接使用本地快取的網頁。只有當網站明確標識資源已經更新，瀏覽器才會再次下載網頁。
為什麼使用快取：
（1）減少網路頻寬消耗
無論對於網站運營者或者使用者，頻寬都代表著金錢，過多的頻寬消耗，只會便宜了網路運營商。當Web快取副本被使用時，只會產生極小的網路流量，可以有效的降低運營成本。
（2）降低伺服器壓力
給網路資源設定有效期之後，使用者可以重複使用本地的快取，減少對源伺服器的請求，間接降低伺服器的壓力。同時，搜尋引擎的爬蟲機器人也能根據過期機制降低爬取的頻率，也能有效降低伺服器的壓力。
（3）減少網路延遲，加快頁面開啟速度
頻寬對於個人網站運營者來說是十分重要，而對於大型的網際網路公司來說，可能有時因為錢多而真的不在乎。那Web快取還有作用嗎？答案是肯定的，對於終端使用者，快取的使用能夠明顯加快頁面開啟速度，達到更好的體驗。
瀏覽器端的快取規則：
對於瀏覽器端的快取來講，這些規則是在HTTP協議頭和HTML頁面的Meta標籤中定義的。他們分別從新鮮度
新鮮度（過期機制）：也就是快取副本有效期。一個快取副本必須滿足以下條件，瀏覽器會認為它是有效的，足夠新的：
1. 含有完整的過期時間控制頭資訊（HTTP協議報頭），並且仍在有效期內；
2. 瀏覽器已經使用過這個快取副本，並且在一個會話中已經檢查過新鮮度；
滿足以上兩個情況的一種，瀏覽器會直接從快取中獲取副本並渲染。
校驗值（驗證機制）：伺服器返回資源的時候有時在控制頭資訊帶上這個資源的實體標籤Etag（Entity Tag），它可以用來作為瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配，說明資源已經被修改或過期，瀏覽器需求重新獲取資源內容。
瀏覽器端快取控制機制：
瀏覽器第一次請求：
瀏覽器第二次請求：
瀏覽器快取機制，其實主要就是HTTP協議定義的快取機制（如： Expires； Cache-control等）。但是也有非HTTP協議定義的快取機制，如使用HTMLMeta 標籤，Web開發者可以在HTML頁面的<head>節點中加入<meta>標籤，程式碼如下：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">下面介紹HTTP協定定義的快取機制：
可以明顯的看到上面介紹的幾個欄位。
1、Cache-Control:max-age=2592000：快取內容將在2592000秒後失效（30天）。
2、ETag:"58d48c15-f7b"：頁面編號
3、Expires:Wed, 12 Jul 2017 05:42:41 GMT：快取內容將在2017年7月12日後過時。
4、Last-Modified:Fri, 24 Mar 2017 03:01:41 GMT：服務端資源最後修改時間。Expires是Web伺服器響應訊息頭欄位，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器快取取資料，而無需再次請求。不過Expires 是HTTP 1.0的東西，現在預設瀏覽器均預設使用HTTP 1.1，所以它的作用基本忽略。
Cache-control策略（重點關注）：Cache-Control與Expires的作用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器快取取資料還是重新發請求到伺服器取資料。只不過Cache-Control的選擇更多，設定更細緻，如果同時設定的話，其優先順序高於Expires。
http協議頭Cache-Control ： |
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age 各個訊息中的指令含義如下： 1. Public指示響應可被任何快取區快取。 2. Private指示對於單個使用者的整個或部分響應訊息，不能被共享快取處理。這允許伺服器僅僅描述當用戶的部分響應訊息， 此響應訊息對於其他使用者的請求無效。 3. no-cache指示請求或響應訊息不能快取 4. no-store用於防止重要的資訊被無意的釋出。在請求訊息中傳送將使得請求和響應訊息都不使用快取。 5. max-age指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。 6. min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。 7. max-stale指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值， 那麼客戶機可以接收超出超時期指定值之內的響應訊息。 |
Last-Modified/If-Modified-Since
Last-Modified/If-Modified-Since要配合Cache-Control使用。
Last-Modified：標示這個響應資源的最後修改時間。web伺服器在響應請求時，告訴瀏覽器資源的最後修改時間。
If-Modified-Since：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Last-Modified宣告，則再次向web伺服器請求時帶上頭 If-Modified-Since，表示請求時間。web伺服器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應訊息包體內），HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所儲存的cache。
Etag/If-None-Match
Etag/If-None-Match也要配合Cache-Control使用。
Etag：web伺服器響應請求時，告訴瀏覽器當前資源在伺服器的唯一標識（生成規則由伺服器覺得）。Apache中，ETag的值，預設是對檔案的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後得到的。
If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage宣告，則再次向web伺服器請求時帶上頭If-None-Match （Etag的值）。web伺服器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。
既生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重新整理 |
無效 |
無效 |
（補充）使用：
我們可以在響應報文輸出時指定頭部 Expires:具體時間、或 Cache-Control:max-age=10 或 Etag 或 Last-modified 的方式去使瀏覽器快取生效。
當瀏覽器發現響應報文有Expires或Cache-Control，即啟用本地快取；當發現有 Etag 或 Last-modified，則下次傳送請求給伺服器時，會帶上對應的if-modified-Since 或 If-none-match首部去詢問。
nginx的話，如果指定Expires指令，則它會在響應報文中新增Expires和Cache-Control:max-age。nginx預設給靜態檔案的響應會加上 Last-modified 首部，舊版的nginx不自動帶上Etag，nginx認為使用Last-modified已經足夠了，我也認為nginx在實際使用中意義差別不大。
上述為瀏覽器快取流程
強制快取：使用者傳送的請求，直接從客戶端快取中獲取，不傳送請求到伺服器，不與伺服器發生互動行為。
- Expires欄位
- Cache-Control欄位
對比快取：使用者傳送的請求，傳送到伺服器後，由伺服器判定是否從快取中獲取資源。
- Last-Modefied欄位
- Etag標識
- 瀏覽器行為引起的快取變化