作為面試題解析我們在這里就著重點到 強制緩存 和協(xié)商緩存。
瀏覽器緩存分為強緩存和協(xié)商緩存
- 強緩存命中緩存的情況下會直接從瀏覽器里面拿數(shù)據(jù) 不經(jīng)過服務(wù)器。
- 協(xié)商緩存會先訪問服務(wù)器看緩存是否過期，再決定是否從瀏覽器里面拿數(shù)據(jù)。
強制緩存
1.如果命中緩存，直接從緩存中拿數(shù)據(jù)，請求不會經(jīng)過服務(wù)器，返回的http狀態(tài)碼為200(from disk cache)
2.下面給一張流程圖來說明強緩存的請求過程
由此我們可以看出，強制緩存的最大特點就是在緩存命中的時候不會經(jīng)過服務(wù)器。而是直接返回。
3.設(shè)置強緩存
控制強緩存的字段有：Http頭Expires/Cache-Control設(shè)置強緩存
-
Cache-Control里面存在多個屬性來控制緩存，設(shè)置強緩存即設(shè)置資源的有效期，屬性為max-age.
image.png - Expires和max-age都是用于控制緩存的生命周期。不同的是Expires指定的是過期的具體時間，例如Sun, 21 Mar 2027 08:52:14 GMT，而max-age指定的是生命時長秒數(shù)315360000。
區(qū)別在于Expires是 HTTP/1.0 的中的標(biāo)準，而max-age是屬于Cache-Control的內(nèi)容，是 HTTP/1.1 中的定義的。但為了想向前兼容，這兩個屬性仍然要同時存在。max-age是要優(yōu)先于Expires的。
協(xié)商/對比緩存
1.定義
協(xié)商緩存與強制緩存的不同之處在于，協(xié)商緩存每次讀取數(shù)據(jù)時都需要跟服務(wù)器通信，并且會增加緩存標(biāo)識。
在第一次請求服務(wù)器時，服務(wù)器會返回資源，并且返回一個資源的緩存標(biāo)識，一起存到瀏覽器的緩存數(shù)據(jù)庫。
當(dāng)?shù)诙握埱筚Y源時，瀏覽器會首先將緩存標(biāo)識發(fā)送給服務(wù)器，服務(wù)器拿到標(biāo)識后判斷標(biāo)識是否匹配，如果不匹配，表示資源有更新，服務(wù)器會將新數(shù)據(jù)和新的緩存標(biāo)識一起返回到瀏覽器。
如果緩存標(biāo)識匹配，表示資源沒有更新，并且返回 304 狀態(tài)碼，瀏覽器就讀取本地緩存服務(wù)器中的數(shù)據(jù)。
協(xié)商緩存的最大特點是要經(jīng)過服務(wù)器驗證的，下面我們來講解協(xié)商緩存的驗證流程。
2.流程圖
3.如何驗證
第一次請求將response header的Last-Modified和Etag存起來，在第二次請求通過request header的If-Modified-Since和If-None-Match傳到服務(wù)端進行驗證，如果命中緩存，返回304，不帶返回的數(shù)據(jù)，瀏覽器自動從緩存中獲取數(shù)據(jù)資源，若未命中緩存返回200，帶上數(shù)據(jù)資源。
Last-Modified:
服務(wù)器在響應(yīng)請求時，告訴瀏覽器資源的最后修改時間。
Etag：
服務(wù)器響應(yīng)請求時，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識（生成規(guī)則由服務(wù)器決定）。
If-Modified-Since：
- 再次請求服務(wù)器時，通過此字段通知服務(wù)器上次請求時，服務(wù)器返回的資源最后修改時間。
- 服務(wù)器收到請求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請求資源的最后修改時間進行比對。
- 若資源的最后修改時間大于If-Modified-Since，說明資源又被改動過，則響應(yīng)整片資源內(nèi)容，返回狀態(tài)碼200；
- 若資源的最后修改時間小于或等于If-Modified-Since，說明資源無新修改，則響應(yīng)HTTP 304，告知瀏覽器繼續(xù)使用所保存的cache。
image.png
If-None-Match： - 再次請求服務(wù)器時，通過此字段通知服務(wù)器客戶段緩存數(shù)據(jù)的唯一標(biāo)識。
- 服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match 則與被請求資源的唯一標(biāo)識進行比對，
- 不同，說明資源又被改動過，則響應(yīng)整片資源內(nèi)容，返回狀態(tài)碼200；
- 相同，說明資源無新修改，則響應(yīng)HTTP 304，告知瀏覽器繼續(xù)使用所保存的cache。
再次請求服務(wù)器時，通過此字段通知服務(wù)器客戶段緩存數(shù)據(jù)的唯一標(biāo)識。
服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match 則與被請求資源的唯一標(biāo)識進行比對，
不同，說明資源又被改動過，則響應(yīng)整片資源內(nèi)容，返回狀態(tài)碼200；
相同，說明資源無新修改，則響應(yīng)HTTP 304，告知瀏覽器繼續(xù)使用所保存的cache。
4.設(shè)置協(xié)商緩存
在強緩存那一節(jié)說到使用Cache-Control的max-age來設(shè)置資源過期時間，那么當(dāng)max-age=0的時候呢，自然瀏覽器第一時間發(fā)現(xiàn)資源過期，request header就會帶著If-Modified-Since和If-None-Match去服務(wù)端驗證。
所以設(shè)置response header為：
Cache-Control: max-age=0 就可以觸發(fā)協(xié)商緩存了must-revalidate的意義為必須進行驗證，但是它一般是和max-age一起使用的，不會單獨使用，
Cache-Control: must-revalidate, max-age=600如果要不緩存，每次都請求新的資源應(yīng)該使用
Cache-Control: no-store
更多緩存知識就不多說了（作者我也是現(xiàn)學(xué)現(xiàn)賣哈哈哈）
加油奧里給???♀?
原文詳見：
https://www.linuxidc.com/linux/2019-08/160265.htm
