瀏覽器緩存機制精簡講解

1、認識瀏覽器緩存

瀏覽器緩存分爲：強緩存和協商緩存。
一、強緩存：瀏覽器加載資源時，第一步先判斷它是不是強緩存，若是是，瀏覽器將直接從本身的緩存中讀取，不會向服務器發送請求。
上圖，status200，Size是from memory cache就是走的強緩存。那麼什麼是強緩存呢？瀏覽器又是咋判斷的呢？

Expires字段：一、瀏覽器第一次向服務器請求，服務器返回資源並在response header加上Expires字段，是客戶端緩存有效期，是絕對時間。二、瀏覽器接收資源，把資源和相應頭緩存起來。三、待到再次請求這個資源時，先在緩存中找，找到了看Expires字段，判斷是否過時。若沒過時直接從緩存加載。若過時了，再向服務器請求。

• 可是絕對時間有時會有誤差，因此引出了Cache-Control。

Cache-Control字段：一、瀏覽器第一次向服務器請求，服務器返回資源並在response header加上Cache-Control字段，也是緩存的有效期，可是是相對時間，好比：Cache-Control:max-age=56700000。二、瀏覽器接收資源，把資源和相應頭緩存下來。三、待到瀏覽器再次請求這個資源時，先在緩存找，根據第一次的請求時間和Cache-Control相對時間算出過時時間。若沒過時，直接從緩存加載。若過時了，再向服務器請求。

• Cache-Control彌補了Expires的不足，更安全有效。

二、協商緩存：當瀏覽器判斷不是強緩存，就會發向服務器發請求，判斷是不是協商緩存。若是是，服務器會返回304Not Modified，瀏覽器從緩存中加載。那什麼又是協商緩存呢？

Last-Modified和If-Modified-Since字段：一、瀏覽器第一次向服務器發請求，服務器返回資源並在response header加上Last-Modified字段，表示資源最後修改的時間。二、瀏覽器再次請求這個資源時，請求頭會加上If-Modified-Since字段。若這兩個字段同樣，說明資源沒有修改過，返回304Not Modified，瀏覽器從緩存中獲取資源。若這兩個字段不同，說明資源修改過，服務器正常返回資源。

• 但有時候服務器上資源有變化，單最後修改時間沒更新，則引出下面兩個字段。

ETag、If-None-Match：一、瀏覽器第一次向服務器請求，服務器返回資源並在response header上加ETag字段。表示資源自己，資源有變化，則該字段有變化。二、瀏覽器再次向服務器請求這個資源時，請求頭攜帶If-None-Match字段。若這兩個字段相同，則表明資源沒有變化，服務器返回304Not Modified，瀏覽器從緩存中加載。若兩個字段不一樣，證實資源有變更，服務器正常返回資源。