瀏覽器緩存分類有兩種
- 強(qiáng)緩存
cache-control
Expires - 協(xié)商緩存
ETag
last-Modifed
通俗的講強(qiáng)緩存就是瀏覽有該類型的緩存時(shí)會(huì)直接使用緩存內(nèi)容這個(gè)過程不會(huì)與服務(wù)器通信，協(xié)商緩存就是每次使用該緩存時(shí)會(huì)與服務(wù)器通信對(duì)比來判斷是否使用當(dāng)前緩存內(nèi)容。
強(qiáng)緩存
Cache-control(http 1.1)
Cache-control的原理是設(shè)置一個(gè)時(shí)間段，在這個(gè)時(shí)間段內(nèi)資源緩存不會(huì)發(fā)送請(qǐng)求新的資源。如果想獲取新的資源就要修改請(qǐng)求的url,例如style.css?version=233,每次這個(gè)文件更新后面的version版本也改變就達(dá)到了資源更新后不用緩存重新下載的原理。
瀏覽器默認(rèn)用戶發(fā)送的第一個(gè)請(qǐng)求是不設(shè)置緩存的！！！
Expires(http 1.0)
Exprires和 Cache-control的區(qū)別就是緩存的時(shí)間，Exprires設(shè)置的時(shí)間是絕對(duì)時(shí)間，瀏覽器會(huì)根據(jù)本地時(shí)間來判斷緩存是否過期，用戶本地時(shí)間是錯(cuò)的那么緩存就會(huì)失效，而cache-control用的是一個(gè)時(shí)間長(zhǎng)度所以還是用cache-control好一點(diǎn)。
協(xié)商緩存
Last-Modified
客戶端會(huì)為資源標(biāo)記上該信息，下次再次請(qǐng)求時(shí)，會(huì)把該信息附帶在請(qǐng)求報(bào)文中一并帶給服務(wù)器去做檢查，若傳遞的時(shí)間值與服務(wù)器上該資源最終修改時(shí)間是一致的，則說明該資源沒有被修改過，直接返回304狀態(tài)碼，內(nèi)容為空，這樣就節(jié)省了傳輸數(shù)據(jù)量 。如果兩個(gè)時(shí)間不一致，則服務(wù)器會(huì)發(fā)回該資源并返回200狀態(tài)碼，和第一次請(qǐng)求時(shí)類似。這樣保證不向客戶端重復(fù)發(fā)出資源，也保證當(dāng)服務(wù)器有變化時(shí)，客戶端能夠得到最新的資源。一個(gè)304響應(yīng)比一個(gè)靜態(tài)資源通常小得多，這樣就節(jié)省了網(wǎng)絡(luò)帶寬。
ETag
作為協(xié)商緩存last-modified存在這兩個(gè)缺點(diǎn)
第一 在某些服務(wù)端不能獲取精確的修改時(shí)間。
第二 某些文件的修改非常頻繁，在秒以下的時(shí)間內(nèi)進(jìn)行修改，lastModified只能精確到秒。
第三 文件修改時(shí)間改了，但文件內(nèi)容卻沒有改。
第四 同一個(gè)文件位于多個(gè)cdn內(nèi)容一樣，但修改的時(shí)間卻不一樣。
ETag就解決了這些缺點(diǎn)。
ETag緩存的原理是在服務(wù)端設(shè)置一個(gè)類似于hash的值，當(dāng)服務(wù)端的資源改變時(shí)對(duì)應(yīng)的ETag就會(huì)改變，當(dāng)客戶端發(fā)送請(qǐng)求時(shí)會(huì)在請(qǐng)求頭帶一個(gè)IF-None-Match的字段就是上次服務(wù)端發(fā)送來的ETag的值，這個(gè)值會(huì)在服務(wù)端與當(dāng)前ETag對(duì)比，一樣的話就只返回一個(gè)304Not modifyed,如果不一樣的話就會(huì)下載新的資源。
ETag與Cache-control的區(qū)別是，ETag每次都會(huì)發(fā)送請(qǐng)求去對(duì)比兩次的ETag值，而Cache-control請(qǐng)求都不會(huì)發(fā)除非改變請(qǐng)求資源url或者緩存時(shí)間過期。
分級(jí)緩存策略
一般強(qiáng)緩存和協(xié)商緩存時(shí)搭配一起使用的，來達(dá)到一個(gè)分級(jí)緩存的策略。
200狀態(tài)
當(dāng)瀏覽器本地沒有緩存或者下一層失效時(shí)，或者用戶點(diǎn)擊了CTL + F5，瀏覽器直接去服務(wù)器下載最新數(shù)據(jù)。
304狀態(tài)
這一層由last-modified/ETag控制。當(dāng)下一層失效時(shí)或者用戶點(diǎn)擊refresh,F5時(shí)，瀏覽器就會(huì)發(fā)送請(qǐng)求給服務(wù)器，如果服務(wù)器端沒有變化，則返回304給瀏覽器，需要注意的是當(dāng)兩者同時(shí)存在時(shí)ETag的優(yōu)先級(jí)更高。
200狀態(tài)（from cache）
這一層由expires/cache-control控制。expires（http1.0版本有效）是絕對(duì)時(shí)間，cache-control（http1.1版本有效）相對(duì)時(shí)間，兩者都存在時(shí)cacahe-control覆蓋expires只要沒有失效，瀏覽器只會(huì)訪問自己的緩存。
