先用一張圖來展示瀏覽器緩存機(jī)制：
瀏覽器緩存分兩種：強(qiáng)制緩存和協(xié)商緩存逢唤。
強(qiáng)制緩存
強(qiáng)制緩存主要是通過Expires和Cache-Control掐松。
Cache-Control字段
cache-control: no-store：不緩存侮腹，這個(gè)會(huì)讓客戶端缓苛、服務(wù)器都不緩存嘴纺，也就沒有所謂的強(qiáng)緩存几睛、協(xié)商緩存了房轿。
cache-control: no-cache：協(xié)商緩存
cache-control: max-age=xxxx，private：只允許客戶端可以緩存該資源；代理服務(wù)器不允許緩存囱持；客戶端在xxx秒內(nèi)直接讀取緩存, statu code: 200
cache-control: max-age=xxxx夯接，public：客戶端和代理服務(wù)器都可以緩存該資源；客戶端在xxx秒的有效期內(nèi)纷妆，如果有請求該資源的需求的話就直接讀取緩存, statu code: 200盔几；
所以想設(shè)置強(qiáng)制緩存，可通過設(shè)置cache-control字段:
cache-control： max-age=xxxx掩幢，private
或者
cache-control: max-age=xxxx逊拍，s-maxage=xxx，public
max-age,s-maxage設(shè)置的是相對時(shí)間际邻，s-maxage多用于公共緩存服務(wù)器
用戶操作瀏覽器的行為也會(huì)決定cache-control有沒有效果
還可以通過設(shè)置Expires：xxxx芯丧，expires設(shè)置的是絕對時(shí)間
協(xié)商緩存
當(dāng)服務(wù)器響應(yīng)頭cache-control: no-cache，或者設(shè)置強(qiáng)緩存但是當(dāng)緩存過期之后世曾，未必緩存就不能使用缨恒，所以要和服務(wù)器協(xié)商判斷緩存是否能使用，這些情況都涉及到協(xié)商緩存轮听。
協(xié)商緩存通過Etag/If-None-Match,last-Modified/If-Modified-Since骗露。
Etag/If-None-Match：
都是服務(wù)器為資源分配到唯一標(biāo)識(shí)。當(dāng)客戶端請求資源時(shí)血巍，服務(wù)器會(huì)在http響應(yīng)頭設(shè)置Etag椒袍，資源變化Etag也會(huì)隨之變化。再次請求資源時(shí)藻茂，請求頭帶上If-None-Match。如果Etag和If-None-Match一致玫恳，則返回狀態(tài)碼為304的響應(yīng)辨赐，繼續(xù)使用緩存。如果不一致則獲取更新后的資源返回給前端京办。
last-Modified/If-Modified-Since：
文件的修改時(shí)間(絕對時(shí)間)掀序，精確到秒。
當(dāng)客戶端請求資源時(shí)惭婿，服務(wù)器會(huì)在http響應(yīng)頭設(shè)置last-Modified不恭，資源變化last-Modified也會(huì)隨之變化。再次請求資源時(shí)财饥，請求頭帶上If-Modified-Since换吧，如果last-Modified和If-Modified-Since一致，則返回狀態(tài)碼為304的響應(yīng)钥星，繼續(xù)使用緩存沾瓦。如果不一致則獲取更新后的資源返回給前端。
Etag/If-None-Match較之 last-Modified/If-Modified-Since的優(yōu)勢：
a、last-Modified精確到的時(shí)間是秒贯莺，所以如果資源在秒內(nèi)即是變化了last-Modified也不會(huì)改變风喇，那么其實(shí)協(xié)商緩存判斷的結(jié)果就不準(zhǔn)確了。
b缕探、一些服務(wù)器的資源可能會(huì)周期性的更改魂莫，但是其實(shí)內(nèi)容是沒有變的，但last-Modified變了爹耗，就得重新從服務(wù)器加載資源耙考。
c、某些服務(wù)器不能精確的得到服務(wù)器的修改時(shí)間鲸沮。
緩存機(jī)制的應(yīng)用場景
讀多寫少的數(shù)據(jù)琳骡。
備注：如有不準(zhǔn)確，后續(xù)會(huì)進(jìn)行改進(jìn)讼溺。參考文章https://www.cnblogs.com/cckui/p/11506514.html楣号、https://segmentfault.com/a/1190000015816331、https://www.cnblogs.com/skylar/p/browser-http-caching.html
