Web 緩存大致可以分為：數(shù)據(jù)庫(kù)緩存、服務(wù)器端緩存（代理服務(wù)器緩存完域、CDN 緩存）昼浦、瀏覽器緩存。
瀏覽器緩存也包含很多內(nèi)容： HTTP 緩存筒主、indexDB关噪、cookie、localstorage 等等乌妙。
瀏覽器緩存分為強(qiáng)緩存和協(xié)商緩存使兔，瀏覽器加載一個(gè)頁(yè)面的簡(jiǎn)單流程如下：
1.瀏覽器先根據(jù)這個(gè)資源的http頭信息來(lái)判斷是否命中強(qiáng)緩存。如果命中則直接加在緩存中的資源藤韵，并不會(huì)將請(qǐng)求發(fā)送到服務(wù)器虐沥。
2.如果未命中強(qiáng)緩存，則瀏覽器會(huì)將資源加載請(qǐng)求發(fā)送到服務(wù)器泽艘。服務(wù)器來(lái)判斷瀏覽器本地緩存是否失效欲险。若可以使用，則服務(wù)器并不會(huì)返回資源信息匹涮，瀏覽器繼續(xù)從緩存加載資源天试。
3.如果未命中協(xié)商緩存，則服務(wù)器會(huì)將完整的資源返回給瀏覽器然低，瀏覽器加載新資源喜每，并更新緩存。
強(qiáng)緩存
命中強(qiáng)緩存時(shí)雳攘，瀏覽器并不會(huì)將請(qǐng)求發(fā)送給服務(wù)器带兜。在Chrome的開(kāi)發(fā)者工具中看到http的返回碼是200，但是在Size列會(huì)顯示為(from cache)吨灭。
強(qiáng)緩存是利用http的返回頭中的Expires或者Cache-Control兩個(gè)字段來(lái)控制的刚照，用來(lái)表示資源的緩存時(shí)間。
Expires
緩存過(guò)期時(shí)間喧兄，用來(lái)指定資源到期的時(shí)間无畔，是服務(wù)器端的具體的時(shí)間點(diǎn)。也就是說(shuō)繁莹，Expires=max-age + 請(qǐng)求時(shí)間檩互，需要和Last-modified結(jié)合使用。但在上面我們提到過(guò)咨演，cache-control的優(yōu)先級(jí)更高闸昨。 Expires是Web服務(wù)器響應(yīng)消息頭字段，在響應(yīng)http請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無(wú)需再次請(qǐng)求饵较。
該字段會(huì)返回一個(gè)時(shí)間拍嵌，比如Expires:Thu,31 Dec 2037 23:59:59 GMT。這個(gè)時(shí)間代表著這個(gè)資源的失效時(shí)間循诉，也就是說(shuō)在2037年12月31日23點(diǎn)59分59秒之前都是有效的横辆，即命中緩存。這種方式有一個(gè)明顯的缺點(diǎn)茄猫，由于失效時(shí)間是一個(gè)絕對(duì)時(shí)間狈蚤，所以當(dāng)客戶端本地時(shí)間被修改以后，服務(wù)器與客戶端時(shí)間偏差變大以后划纽，就會(huì)導(dǎo)致緩存混亂脆侮。于是發(fā)展出了Cache-Control。
Cache-Control
Cache-Control是一個(gè)相對(duì)時(shí)間勇劣，例如Cache-Control:3600靖避，代表著資源的有效期是3600秒。由于是相對(duì)時(shí)間比默，并且都是與客戶端時(shí)間比較幻捏，所以服務(wù)器與客戶端時(shí)間偏差也不會(huì)導(dǎo)致問(wèn)題。
Cache-Control與Expires可以在服務(wù)端配置同時(shí)啟用或者啟用任意一個(gè)命咐，同時(shí)啟用的時(shí)候Cache-Control優(yōu)先級(jí)高篡九。
Cache-Control 可以由多個(gè)字段組合而成，主要有以下幾個(gè)取值：
1. max-age
指定一個(gè)時(shí)間長(zhǎng)度侈百，在這個(gè)時(shí)間段內(nèi)緩存是有效的瓮下，單位是s翰铡。例如設(shè)置 Cache-Control:max-age=31536000钝域，也就是說(shuō)緩存有效期為（31536000 / 24 / 60 * 60）天，第一次訪問(wèn)這個(gè)資源的時(shí)候锭魔，服務(wù)器端也返回了 Expires 字段例证，并且過(guò)期時(shí)間是一年后。
在沒(méi)有禁用緩存并且沒(méi)有超過(guò)有效時(shí)間的情況下迷捧，再次訪問(wèn)這個(gè)資源就命中了緩存织咧，不會(huì)向服務(wù)器請(qǐng)求資源而是直接從瀏覽器緩存中取。
s-maxage 同 max-age漠秋，覆蓋 max-age笙蒙、Expires，但僅適用于共享緩存庆锦，在私有緩存中被忽略捅位。
public 表明響應(yīng)可以被任何對(duì)象（發(fā)送請(qǐng)求的客戶端、代理服務(wù)器等等）緩存。
private 表明響應(yīng)只能被單個(gè)用戶（可能是操作系統(tǒng)用戶艇搀、瀏覽器用戶）緩存尿扯，是非共享的，不能被代理服務(wù)器緩存焰雕。
no-cache 強(qiáng)制所有緩存了該響應(yīng)的用戶衷笋，在使用已緩存的數(shù)據(jù)前，發(fā)送帶驗(yàn)證器的請(qǐng)求到服務(wù)器矩屁。不是字面意思上的不緩存辟宗。
no-store 禁止緩存，每次請(qǐng)求都要向服務(wù)器重新獲取數(shù)據(jù)吝秕。
7慢蜓、must-revalidate指定如果頁(yè)面是過(guò)期的，則去服務(wù)器進(jìn)行獲取郭膛。這個(gè)指令并不常用晨抡，就不做過(guò)多的討論了。
協(xié)商緩存
若未命中強(qiáng)緩存则剃，則瀏覽器會(huì)將請(qǐng)求發(fā)送至服務(wù)器耘柱。服務(wù)器根據(jù)http頭信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match來(lái)判斷是否命中協(xié)商緩存。如果命中棍现，則http返回碼為304调煎，瀏覽器從緩存中加載資源。
Last-Modify/If-Modify-Since
ETag/If-None-Match
總結(jié)
瀏覽器第一次發(fā)送請(qǐng)求：
之后再次發(fā)送請(qǐng)求：
