通過最近一段時(shí)間的pc開發(fā), 總結(jié)一下自己對瀏覽器緩存的認(rèn)知, 熟練的掌握瀏覽器緩存, 可以加快頁面加載速度, 提升用戶體驗(yàn).在開始前, 大家需要對以下知識點(diǎn)了解:

http status:200,200(from disk/memory cache),304,404等
強(qiáng)緩存（Pragma湿颅、Expires虫给，cache-control）
對比緩存（If-None-Match/Etag ,If-Modified-Since/Last-Modified)

Pragma與Expires是http1.0時(shí)，用來控制強(qiáng)緩存:
Pragma:no-cache,代表此資源不會(huì)被瀏覽器從緩存中取曲秉，每次從服務(wù)器獲取惯疙，返回狀態(tài)碼為 200欺旧；(現(xiàn)在瀏覽器基本上全在用http1.1昔汉，所以此屬性基本上不再用)
Expires: Wed, 12 Jul 2017 06:23:33 GMT,值為一個(gè)格林時(shí)間，代表著此資源過期時(shí)間嘁灯，瀏覽器會(huì)比較當(dāng)前時(shí)間與此時(shí)間（此時(shí)間是相對服務(wù)器時(shí)間泻蚊，如果修改了客戶端時(shí)間,則這個(gè)比較就不準(zhǔn)確），如果沒有超過旁仿，則使用緩存藕夫，返回200（from cache）
cache-control是http1.1時(shí)孽糖，用來控制強(qiáng)緩存枯冈，更好的解決Expires不嚴(yán)謹(jǐn)?shù)膯栴}。
cache-control:public办悟，代表此資源可以緩存在代理服務(wù)器上尘奏，供多個(gè)客戶端共享
cache-control:private,代表此資源只能供客戶端緩存
cache-control:max-age=3600，代表3600秒后再次請求此資源病蛉，此資源緩存失效
cache-control:no-cache炫加，強(qiáng)緩存失效瑰煎，需要去判斷對比緩存
cache-control:no-store,強(qiáng)緩存與對比緩存均失效，需要請求服務(wù)器資源
以上3個(gè)字段優(yōu)先級：Pragma>cache-control>Expires

If-None-Match/Etag ,If-Modified-Since/Last-Modified俗孝，是用來控制對比緩存的酒甸，
其中：
If-Modified-Since/Last-Modified值為一個(gè)格林時(shí)間，Last-Modified代表此資源在服務(wù)器上最后一次修改時(shí)間赋铝，If-Modified-Since存著上一次請求服務(wù)器獲取該資源插勤，該資源的最后一次修改時(shí)間，當(dāng)我們進(jìn)行對比緩存的時(shí)候革骨，就會(huì)比較If-Modified-Since/Last-Modified這2個(gè)時(shí)間农尖，如果Last-Modified大于If-Modified-Since，說明資源又發(fā)生了新的改變良哲，此時(shí)獲取最新資源盛卡，并返回200，反之代表資源未發(fā)生改變返回304筑凫，繼續(xù)使用緩存的資源滑沧。（需要注意可能資源在1秒內(nèi)發(fā)生了多次改變，那么就會(huì)出現(xiàn)服務(wù)器認(rèn)為資源未發(fā)生改變繼續(xù)返回304漏健，或者資源定期生成嚎货，但內(nèi)容未發(fā)生改變，這個(gè)時(shí)候服務(wù)器就會(huì)認(rèn)為發(fā)生改變蔫浆，重新請求）殖属。
If-None-Match/Etag值是基于對應(yīng)資源生成的唯一標(biāo)識符，更好的解決If-Modified-Since/Last-Modified不嚴(yán)謹(jǐn)?shù)膯栴}瓦盛。If-None-Match存著上一次請求服務(wù)器獲取該資源洗显，該資源對應(yīng)的Etag值，當(dāng)我們進(jìn)行對比緩存的時(shí)候原环，就會(huì)比較If-None-Match與Etag值是否相等挠唆，相等代表此資源未發(fā)生改變，返回304嘱吗，反之重新請求此資源返回200玄组。(但是需要注意如果服務(wù)器采用分布式負(fù)載均衡時(shí)，每臺服務(wù)器對同一個(gè)資源生成的Etag值可能會(huì)不相同谒麦，導(dǎo)致比較Etag與If-None-Match不相同俄讹，重新請求資源)。
以上2組優(yōu)先級：If-None-Match/Etag >If-Modified-Since/Last-Modified
結(jié)合著以上內(nèi)容我們可以得到如下結(jié)論：

一． 當(dāng)瀏覽器第一次請求資源的時(shí)候绕德，因?yàn)闊o緩存患膛，所以服務(wù)器成功返回此資源，狀態(tài)碼為200耻蛇，并且此時(shí)返回Expires ,cache-control,Etag, Last-Modified

image.png

image.png

二． 當(dāng)瀏覽器第二次請求該資源時(shí)踪蹬，因?yàn)橛芯彺姘耍瑸g覽器首先會(huì)判斷強(qiáng)緩存是否有效，判斷規(guī)則如上所述跃捣，如果強(qiáng)緩存有效漱牵，返回200（from cache）,如果此時(shí)強(qiáng)緩存失效，就會(huì)進(jìn)行對比緩存疚漆，判斷對比緩存是否失效布疙，判斷規(guī)則如上所述，如果對比緩存有效愿卸，返回304（not modified）,如果失效灵临，就會(huì)請求服務(wù)器獲取最新資源，此時(shí)狀態(tài)碼為200趴荸，同時(shí)返回新的Expires ,cache-control,Etag, Last-Modified

image.png

image.png

image.png

image.png

PS：200from cache可以分為2種儒溉，(from disk/memory cache)，顧名思義我們可以得出发钝，前者是從磁盤中獲取緩存顿涣，后者是從內(nèi)存中獲取緩存，一般來說酝豪，html/js/css這類資源當(dāng)屬于200from disk cache涛碑，而像比如html中所用的圖片和字體引用資源來自于memory cache，磁盤緩存當(dāng)進(jìn)程關(guān)閉孵淘，仍會(huì)存在蒲障，而內(nèi)存緩存會(huì)在進(jìn)程關(guān)閉后清空。
如下：
Js/html/css

image.png

image.png

Img/font

image.png

image.png

image.png

image.png

當(dāng)我們第一次請求頁面后毙籽，按F5刷新，Expirse和cache-control失效毡庆，不會(huì)影響If-None-Match/Etag >If-Modified-Since/Last-Modified

image.png

image.png

image.png

image.png

image.png

以上就是本人對于瀏覽器緩存的理解, 歡迎一起討論交流.