一、概述
瀏覽器的快取機制也就是我們說的http快取機制，其機制是根據http報文的快取標識進行的，所以在分析瀏覽器快取機制之前，我們先使用**簡單介紹一下http報文，http報文分為兩種：http請求(request)報文和http響應(response)報文
二、快取過程分析
瀏覽器與伺服器通訊的方式為應答模式，即是：瀏覽器發起http請求 – 伺服器響應該請求。那麼瀏覽器第一次向伺服器發起該請求後拿到請求結果，會根據響應報文中http頭的快取標識，決定是否快取結果，是則將請求結果和快取標識存入瀏覽器快取中，簡單的過程如下圖：
由上圖我們可以知道
1、瀏覽器每次發起請求，都會先在瀏覽器快取中查詢該請求的結果以及快取標識
2、瀏覽器每次拿到返回的請求結果都會將該結果和快取標識存入瀏覽器快取中
以上兩點結論就是瀏覽器快取機制的關鍵，他確保了每個請求的快取存入與讀取，只要我們再理解瀏覽器快取的使用規則，那麼所有的問題就迎刃而解了，本文也將圍繞著這點進行詳細分析。
為了方便大家理解，這裡我們根據是否需要向伺服器重新發起http請求將快取過程分為兩個部分，分別是強制快取和協商快取 。
2.1強制快取
強制快取就是向瀏覽器快取查詢該請求結果，並根據該結果的快取規則來決定是否使用該快取結果的過程，強制快取的情況主要有三種(暫不分析協商快取過程)，如下：
（1）不存在該快取結果和快取標識，強制快取失效，則直接向伺服器發起請求（跟第一次發起請求一致），如下圖：
（2）存在該快取結果和快取標識，但是結果已經失效，強制快取失效，則使用協商快取（暫不分析），如下圖
（3）存在該快取結果和快取標識，且該結果沒有還沒有失效，強制快取生效，直接返回該結果，如下圖：
那麼強制快取的快取規則是什麼？
答：當瀏覽器向伺服器傳送請求的時候，伺服器會將快取規則放入http響應的報文的http頭中和請求結果一起返回給瀏覽器，控制強制快取的字段分別是expires和cache-control，其中cache-conctrol的優先順序比expires高。
2.1.1expires
expires是http/1.0控制網頁快取的字段，其值為伺服器返回該請求的結果快取的到期時間，即再次傳送請求時，如果客戶端的時間小於expires的值時，直接使用快取結果。
expires是http/1.0的字段，但是現在瀏覽器的預設使用的是http/1.1，那麼在http/1.1中網頁快取還是否由expires控制？
到了http/1.1，expires已經被cache-control替代，原因在於expires控制快取的原理是使用客戶端的時間與服務端返回的時間做對比，如果客戶端與服務端的時間由於某些原因（時區不同；客戶端和服務端有一方的時間不準確）發生誤差，那麼強制快取直接失效，那麼強制快取存在的意義就毫無意義。、
那麼cache-control又是如何進行控制的？
2.1.2cache-control
在http/1.1中，cache-control是最重要的規則，主要用於控制網頁快取，主要取值為：
（1）public：所有內容都將被快取（客戶端和**伺服器都可快取）
（2）private：所有內容只有客戶端可以快取，cache-control的預設取值
（3）no-cache：客戶端快取內容，但是是否使用快取則需要經過協商快取來驗證決定
（4）no-store：所有內容都不會被快取，即不使用強制快取，也不使用協商快取
（5）max-age=*** (*** is numeric)：快取內容將在***秒後失效
接下來，我們直接看乙個例子，如下：
由上面的例子我們可以知道：
（1）http響應報文中expires的時間值，是乙個絕對值
（2）http響應報文中cache-control為max-age=600，是相對值
由於cache-control的優先順序比expires，那麼直接根據cache-control的值進行快取，意思就是說在600秒內再次發起該請求，則會直接使用快取結果，強制快取生效。
注：在無法確定客戶端的時間是否與服務端的時間同步的情況下，cache-control相比於expires是更好的選擇，所以同時存在時，只有cache-control生效。
2.2協商快取
協商快取就是強制快取失效後，瀏覽器攜帶快取標識向伺服器發起請求，由伺服器根據快取標識決定是否使用快取的過程，主要有以下兩種情況：
（1）協商快取生效，返回304，如下
（2）協商快取失敗，返回200和請求結果，如下
同樣，協商快取的標識也是在響應報文的http頭中和請求結果一起返回給瀏覽器的，控制協商快取的字段分別有：last-modified / if-modified-since和etag / if-none-match，其中etag / if-none-match的優先順序比last-modified / if-modified-since高。
2.2.1last-modified / if-modified-since
（1）last-modified是伺服器響應請求時，返回該資源檔案在伺服器最後被修改的時間，如下：
（2）if-modified-since則是客戶端再次發起該請求時，攜帶上次請求返回的last-modified值，通過此字段值告訴伺服器該資源上次請求返回的最後被修改時間。伺服器收到該請求，發現請求頭含有if-modified-since欄位，則會根據if-modified-since的字段值與該資源在伺服器的最後被修改時間做對比，若伺服器的資源最後被修改時間大於if-modified-since的字段值，則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用快取檔案，如下。
（1）etag是伺服器響應請求時，返回當前資源檔案的乙個唯一標識(由伺服器生成)，如下：
（2）if-none-match是客戶端再次發起該請求時，攜帶上次請求返回的唯一標識etag值，通過此字段值告訴伺服器該資源上次請求返回的唯一標識值。伺服器收到該請求後，發現該請求頭中含有if-none-match，則會根據if-none-match的字段值與該資源在伺服器的etag值做對比，一致則返回304，代表資源無更新，繼續使用快取檔案；不一致則重新返回資源檔案，狀態碼為200，如下。
注：etag / if-none-match優先順序高於last-modified / if-modified-since，同時存在則只有etag / if-none-match生效。
三、使用者行為和快取
瀏覽器快取行為還有使用者的行為有關，如果大家對 強制重新整理（ctrl + f5） 還有印象的話應該能立刻明白我的意思~
四、總結
強制快取優先於協商快取進行，若強制快取(expires和cache-control)生效則直接使用快取，若不生效則進行協商快取(last-modified / if-modified-since和etag / if-none-match)，協商快取由伺服器決定是否使用快取，若協商快取失效，那麼代表該請求的快取失效，重新獲取請求結果，再存入瀏覽器快取中；生效則返回304，繼續使用快取，主要過程如下：
http快取 瀏覽器快取
如果以下題目都能快速回答，那此文章也就沒有必要要看啦 1.講一下http快取 強快取，協商快取 2.如何控制強 協商快取 expires，cache control，etag if none match，if modified sine last modified 3.cache control有哪...
瀏覽器http快取
強快取 強快取命中不會傳送請求到伺服器端，直接從本地快取中獲取資源，狀態碼200 from cache 協商快取 協商快取會傳送請求到伺服器，伺服器通過請求頭部欄位來驗證資源是否命中協商快取，如果命中，則返回狀態碼304 not modified 通知瀏覽器從快取中獲取資源 4.1 last mod...
瀏覽器快取機制 http快取頭
重用已獲取的資源能夠有效的提公升 與應用的效能。web 快取能夠減少延遲與網路阻塞，進而減少顯示某個資源所用的時間。借助 http 快取，web 站點變得更具有響應性。快取作為加快頁面載入速度的方法，可以說是必不可少的乙個方法，如何能更好地運用快取來服務客戶，首先我們就得了解清楚快取 先上一張從se...