瀏覽器緩存主要指HTTP的緩存--即協(xié)議層，協(xié)議層緩存可以被分為強(qiáng)制緩存和對(duì)比緩存。

強(qiáng)制緩存

強(qiáng)制緩存時(shí)，瀏覽器會(huì)直接找緩存，如果緩存過期再找服務(wù)器。

強(qiáng)制緩存時(shí)序圖

協(xié)議中可以造成強(qiáng)制緩存的字段有：

Expires：該字段標(biāo)識(shí)緩存到期時(shí)間，是一個(gè)絕對(duì)時(shí)間---服務(wù)器時(shí)間+緩存有效時(shí)間
缺點(diǎn)：如果客戶端修改了本地時(shí)間，會(huì)造成緩存失效。如果本地時(shí)間與服務(wù)器時(shí)間不一致，也會(huì)導(dǎo)致緩存失效。

Cache-Control：該字段表示緩存最大有效時(shí)間，該時(shí)間是一個(gè)相對(duì)時(shí)間。
使用相對(duì)時(shí)間的話，即使本地時(shí)間與服務(wù)器時(shí)間不一致，也不會(huì)導(dǎo)致緩存失效。
下面列舉一下Cache-Control的字段可以帶的值：

• max-age：即最大有效時(shí)間
• no-cache：表示沒有緩存，即告訴瀏覽器該資源并沒有設(shè)置緩存
• s-maxage：同max-age，但是僅用于共享緩存，如CDN緩存
• public：多用戶共享緩存，默認(rèn)設(shè)置
• private：不能夠多用戶共享，HTTP認(rèn)證之后，字段會(huì)自動(dòng)轉(zhuǎn)換成private。

對(duì)比緩存

對(duì)比緩存時(shí)，瀏覽器緩存中獲取對(duì)應(yīng)的數(shù)據(jù)標(biāo)識(shí)，然后向服務(wù)器發(fā)送請(qǐng)求，確認(rèn)數(shù)據(jù)是否更新，如果更新，則返回新數(shù)據(jù)和新緩存；反之，則返回304狀態(tài)碼，告知客戶端緩存未更新，可繼續(xù)使用。

對(duì)比緩存時(shí)序圖

協(xié)議中可以造成對(duì)比緩存的字段有：

Last-Modified：服務(wù)器告訴客戶端，資源最后一次修改的時(shí)間。
If-Modified-Since：再次請(qǐng)求時(shí)，請(qǐng)求頭中帶有該字段，服務(wù)器會(huì)將If-Modified-Since的值與Last-Modified字段值進(jìn)行對(duì)比，
如果相等，則表示未修改，響應(yīng)304狀態(tài)碼，告訴客戶端可繼續(xù)使用緩存；反之，則表示修改了，響應(yīng)200狀態(tài)碼，返回?cái)?shù)據(jù)。
缺陷：

• 如果資源更新的速度是秒以下單位，那么該緩存是不能被使用的，因?yàn)樗臅r(shí)間單位最低是秒。
• 如果文件是通過服務(wù)器動(dòng)態(tài)生成的，那么該方法的更新時(shí)間永遠(yuǎn)是生成的時(shí)間，盡管文件可能沒有變化，所以起不到緩存的作用。

Etag：該字段存儲(chǔ)的是文件的特殊標(biāo)識(shí)(一般都是hash生成的)，服務(wù)器存儲(chǔ)著文件的Etag字段，可以在與每次客戶端傳送If-no-match的字段進(jìn)行比較。
如果相等，則表示未修改，響應(yīng)304；反之，則表示已修改，響應(yīng)200狀態(tài)碼，返回?cái)?shù)據(jù)。

Etag原理圖

其他

補(bǔ)充：一些瀏覽器行為會(huì)造成什么樣的結(jié)果？

• 刷新網(wǎng)頁：直接讀取緩存，如果緩存失效，再找服務(wù)器。
• F5手動(dòng)刷新網(wǎng)頁：瀏覽器會(huì)認(rèn)為緩存失效，請(qǐng)求服務(wù)器時(shí)帶上Cache-Control：max-age：0字段，詢問瀏覽器緩存是否失效。
• Ctrl+F5強(qiáng)制刷新網(wǎng)頁：瀏覽器會(huì)忽略緩存，請(qǐng)求服務(wù)器時(shí)帶上Cache-Control：no-cache字段，重新請(qǐng)求數(shù)據(jù)。

參考：瀏覽器緩存篇