1.HTTP緩存分類
- 強(qiáng)緩存： 使用本地緩存，不請(qǐng)求服務(wù)器?？梢允褂胏ache-control和expires進(jìn)行驗(yàn)證是否命中，cache-control和expires同時(shí)設(shè)置時(shí)，cache-control優(yōu)先級(jí)高于expires。
- 協(xié)商緩存：由服務(wù)器判斷是否可以使用本地緩存。使用LastModified / IF-Modified-Since或者ETag / IF-NONE-MATCH進(jìn)行校驗(yàn)。
2.強(qiáng)緩存
2.1Expires
它是一個(gè)時(shí)間戳，服務(wù)器返回資源時(shí)，會(huì)在返回頭上添加該信息，客戶端再次請(qǐng)求該資源時(shí)會(huì)將客戶端時(shí)間與該時(shí)間戳進(jìn)行對(duì)比。如果當(dāng)前時(shí)間大于Expires時(shí)間戳，表示緩存已過期，則不能命中強(qiáng)緩存。
由于客戶端時(shí)間可能與服務(wù)器時(shí)間不一致，或者手動(dòng)修改了客戶端時(shí)間，這就導(dǎo)致Expires信息可靠性不好。cache-control則解決了這個(gè)問題。
2.2cache-control
cache-control 主要有以下幾種值：
- max-age： 有效期，是一個(gè)時(shí)間長度，不會(huì)依賴于客戶端的時(shí)間
- s-maxage: 和max-age的作用一樣，只在代理服務(wù)器中生效，優(yōu)先級(jí)高于max-age。
- public: 所有內(nèi)容都會(huì)被緩存，客戶端和代理服務(wù)器都可緩存。
- private：所有內(nèi)容只有客戶端可以緩存。
- no-cache: 客戶端跳過強(qiáng)緩存校驗(yàn)，直接使用協(xié)商緩存來驗(yàn)證決定。
- no-store: 不緩存，不使用強(qiáng)緩存也不使用協(xié)商緩存。
3.協(xié)商緩存
3.1Last-Modified 和 If-Modified-Since
瀏覽器第一次訪問資源時(shí)，服務(wù)器返回資源的同時(shí)，在response header中添加Last-Modified的header信息，值是資源在服務(wù)器上最后一次修改的時(shí)間，瀏覽器接收到資源后緩存文件和header；瀏覽器下一次請(qǐng)求該資源時(shí)會(huì)設(shè)置If-Modified-Since的header信息，值為緩存中的Last_Modified的值。服務(wù)器接收到請(qǐng)求之后將收到的If-Modified-Since與服務(wù)器資源最后一次修改事件進(jìn)行比較，若一致，則返回304，且不返回資源信息，直接使用本地緩存。若不一致，則返回200以及新的資源文件。
弊端：文件的更新時(shí)間是按照秒來計(jì)算的，如果一個(gè)文件在1秒內(nèi)進(jìn)行了修改，last-modified不會(huì)發(fā)生變化，下次瀏覽器發(fā)送請(qǐng)求時(shí)還是會(huì)命中協(xié)商緩存，導(dǎo)致獲取的信息并不是最新的。于是產(chǎn)生了ETag/If-None-Match。
3.2ETag/If-None-Match
ETag是服務(wù)器響應(yīng)請(qǐng)求是，返回的當(dāng)前資源文件的唯一標(biāo)識(shí)。資源文件只要發(fā)生變化，便會(huì)生成新的ETag。下一次瀏覽器請(qǐng)求該資源文件時(shí)，會(huì)設(shè)置請(qǐng)求頭If-None-Match,值為緩存的ETag。服務(wù)器會(huì)將請(qǐng)求頭中的ETag和服務(wù)器的ETag進(jìn)行比較，若一致，則返回304，且不返回資源信息，直接使用本地緩存。若一致，則返回200以及新的資源文件。
4.緩存位置
緩存的位置一般分為三種：
- 代理服務(wù)器（Service Worker）：服務(wù)器與客戶端之間的代理服務(wù)器。舉個(gè)栗子：之前還不能在網(wǎng)頁上購買火車票時(shí)，用戶只能通過售票廳（服務(wù)器）購票，后來為了用戶（客戶端）方便，則在鄉(xiāng)鎮(zhèn)設(shè)置了代理售票點(diǎn)（代理服務(wù)器），這樣用戶就可以直接和代理售票點(diǎn)進(jìn)行交互了。
- 內(nèi)存緩存（Memory Cache）：將資源緩存到內(nèi)存中，短期緩存。一般一些腳本、字體、圖片會(huì)存在內(nèi)存中。
- 磁盤緩存（Disk Cache）：將資源緩存到硬盤中，絕大多數(shù)緩存都是存到磁盤中的。一些非腳本會(huì)存在磁盤中，比如css等。
三級(jí)緩存原理：內(nèi)存，存在直接加載，否在到下一步 -> 磁盤，存在則直接加載，否則到下一步 -> 服務(wù)器
第一次的訪問資源，返回200 -> 退出瀏覽器再次訪問資源，返回200（from disk cache）-> 刷新，返回200（from memory cache）(附原作者鏈接https://segmentfault.com/a/1190000011286027)
用戶行為
- 地址欄輸入地址：使用強(qiáng)緩存 -> 協(xié)商緩存
- 普通刷新：沒有關(guān)閉tab標(biāo)簽頁，memory cache可用，會(huì)被優(yōu)先使用，其次是disk cache。
- 強(qiáng)制刷新：瀏覽器不使用緩存，服務(wù)器直接返回200和最新資源。
