前言

一直以來都對(duì)瀏覽器緩存很感興趣达皿，但總是一知半解天吓，只是很碎片化的了解一些相關(guān)知識(shí)，這次就打算把所有的碎片整合一下峦椰，基于我目前的理解整理一份總結(jié)龄寞。等以后認(rèn)識(shí)的更全面了，再逐步添加修改汤功。
轉(zhuǎn)載至我的個(gè)人博客

瀏覽器緩存的作用

合理使用瀏覽器的緩存物邑，可以有效的減少請(qǐng)求的訪問次數(shù)，一個(gè)是減小服務(wù)器壓力滔金，更重要的是能夠降低頁面的加載時(shí)間色解。

HTTP緩存的幾種形式及實(shí)現(xiàn)

Pragma

這是一種比較古老的請(qǐng)求頭，只建議在向下兼容http1.0的時(shí)候使用餐茵，當(dāng)值為Pragma:no-cache科阎，效果和Cache-Control:no-cache一樣。

res.setHeader('Pragma', 'no-cache');

以nodejs為例忿族，文件每次都會(huì)向服務(wù)器重新發(fā)起請(qǐng)求锣笨，哪怕設(shè)置了其他緩存方式，具體優(yōu)先級(jí)待會(huì)會(huì)詳細(xì)介紹道批。

Expires

Exprires也是兼容http1.0的一項(xiàng)請(qǐng)求頭错英。

通過服務(wù)端設(shè)置，給Response Headers添加一個(gè)GMT（格林尼治時(shí)間）作為Express的響應(yīng)頭隆豹，客戶端在發(fā)請(qǐng)求前椭岩，判斷Express的時(shí)間是否已經(jīng)過期來決定是否向服務(wù)端發(fā)送請(qǐng)求。

// 過期時(shí)間在當(dāng)前時(shí)間下添加5秒
const expires = new Date(Date.parse(new Date())+5000);
res.setHeader("Expires", expires.toUTCString());

image

其中Date為上一次請(qǐng)求的時(shí)間

由于客戶端在做判斷的時(shí)候取的是自己電腦的時(shí)間璃赡，所以當(dāng)用戶的電腦時(shí)間出現(xiàn)問題時(shí)簿煌，會(huì)影響到緩存的正常使用。

Cache-Control

當(dāng)http發(fā)展到1.1時(shí)鉴吹，簡(jiǎn)單的請(qǐng)求頭已經(jīng)無法覆蓋所有的操作，所以需要更加靈活的Cache-Control來充實(shí)瀏覽器緩存的形式惩琉。

客戶端可以在HTTP請(qǐng)求中使用的標(biāo)準(zhǔn)Cache-Control

//告訴服務(wù)端豆励，愿意接收一個(gè)請(qǐng)求時(shí)間為seconds秒的資源
Cache-Control: max-age=<seconds>
//告訴服務(wù)端，愿意接收一個(gè)超出緩存時(shí)間seconds秒的資源，如果未定義良蒸，則允許超出任意時(shí)間
Cache-Control: max-stale[=<seconds>]
//告訴服務(wù)端技扼，希望接收一個(gè)seconds秒內(nèi)被更新過的資源
Cache-Control: min-fresh=<seconds>
//告訴服務(wù)端，不直接使用緩存嫩痰，跳過強(qiáng)緩存的步驟
Cache-control: no-cache
//告訴服務(wù)端剿吻，所有內(nèi)容都不被緩存到瀏覽器中
Cache-control: no-store
//告訴服務(wù)端，希望獲取實(shí)體數(shù)據(jù)沒有被轉(zhuǎn)換過（如壓縮）的資源
Cache-control: no-transform
//告訴服務(wù)端串纺，希望獲取緩存的內(nèi)容（若有）
Cache-control: only-if-cached

服務(wù)器可以在響應(yīng)中使用的標(biāo)準(zhǔn)Cache-Control

//緩存必須在使用之前驗(yàn)證舊資源的狀態(tài)丽旅，并且不可使用過期資源
Cache-control: must-revalidate
//不直接使用緩存，跳過強(qiáng)緩存的步驟
Cache-control: no-cache
//所有內(nèi)容都不被緩存到瀏覽器中
Cache-control: no-store
//不得對(duì)資源進(jìn)行轉(zhuǎn)換或轉(zhuǎn)變纺棺。Content-Encoding, Content-Range, Content-Type等HTTP頭不能由代理修改榄笙。例如，非透明代理可以對(duì)圖像格式進(jìn)行轉(zhuǎn)換祷蝌，以便節(jié)省緩存空間或者減少緩慢鏈路上的流量
Cache-control: no-transform
//表明響應(yīng)可以被任何對(duì)象（包括：發(fā)送請(qǐng)求的客戶端茅撞，代理服務(wù)器，等等）緩存
Cache-control: public
//表明響應(yīng)只能被單個(gè)用戶緩存巨朦，不能作為共享緩存（即代理服務(wù)器不能緩存它）,可以緩存響應(yīng)內(nèi)容
Cache-control: private
//與must-revalidate作用相同米丘，但它僅適用于共享緩存（例如代理），并被私有緩存忽略
Cache-control: proxy-revalidate
//設(shè)置緩存存儲(chǔ)的最大周期糊啡，超過這個(gè)時(shí)間緩存被認(rèn)為過期(單位秒)拄查。與Expires相反，時(shí)間是相對(duì)于請(qǐng)求的時(shí)間
Cache-Control: max-age=<seconds>
//覆蓋max-age 或者 Expires 頭悔橄，但是僅適用于共享緩存(比如各個(gè)代理)靶累，并且私有緩存中它被忽略
Cache-control: s-maxage=<seconds>

擴(kuò)展Cache-Control指令(不是核心HTTP緩存標(biāo)準(zhǔn)文檔的一部分，有兼容問題)

//表示響應(yīng)正文不會(huì)隨時(shí)間而改變癣疟。資源（如果未過期）在服務(wù)器上不發(fā)生改變挣柬，因此客戶端不應(yīng)發(fā)送重新驗(yàn)證請(qǐng)求頭（例如If-None-Match或If-Modified-Since）來檢查更新，即使用戶顯式地刷新頁面
Cache-control: immutable 
//表明客戶端愿意接受陳舊的響應(yīng)睛挚，同時(shí)在后臺(tái)異步檢查新的響應(yīng)邪蛔。秒值指示客戶愿意接受陳舊響應(yīng)的時(shí)間長度
Cache-control: stale-while-revalidate=<seconds>
//表示如果新的檢查失敗，則客戶愿意接受陳舊的響應(yīng)扎狱。秒數(shù)值表示客戶在初始到期后愿意接受陳舊響應(yīng)的時(shí)間
Cache-control: stale-if-error=<seconds>

下面是nodejs通過給Cache-Control添加了過期時(shí)間一個(gè)小時(shí)侧到，每次加載文件時(shí)，客戶端會(huì)對(duì)Date進(jìn)行比對(duì)淤击，知道過期匠抗，否則不會(huì)向服務(wù)端發(fā)送新的請(qǐng)求

res.setHeader('Cache-Control', 'max-age=3600');

image

Cache-Control的比對(duì)比較復(fù)雜，是需要響應(yīng)頭和請(qǐng)求頭同時(shí)作用的

（這里關(guān)于響應(yīng)頭和請(qǐng)求頭之間互相沖突時(shí)污抬，客戶端是如何決定緩存結(jié)果的汞贸，我在后面再找時(shí)間添加）

Last-Modified

第一次請(qǐng)求資源時(shí)绳军，會(huì)將資源最后更改的時(shí)間以Last-Modified: GMT的形式加在實(shí)體首部上一起返回給客戶端，當(dāng)再一次發(fā)起請(qǐng)求時(shí)矢腻，客戶端會(huì)帶上返回的GMT门驾，賦值給If-Modified-Since，若服務(wù)端判斷時(shí)間沒有更改多柑，則返回304 NOT MODIFIED

const stats = fs.statSync(pathname);
const lastModified = stats.mtime.toUTCString();
const ifModifiedSince = "If-Modified-Since".toLowerCase();
res.setHeader("Last-Modified", lastModified);
//校驗(yàn)時(shí)判斷下當(dāng)前文件的更新時(shí)間和請(qǐng)求返回的時(shí)間是否相同
if (
  req.headers[ifModifiedSince] &&
  lastModified == req.headers[ifModifiedSince]
) {
  //返回
  res.writeHead(304, "Not Modified");
}

image

服務(wù)端比對(duì)服務(wù)器中的文件和請(qǐng)求頭中的更新時(shí)間奶是，發(fā)現(xiàn)時(shí)間一致，返回304竣灌，客戶端不再重新更新文件聂沙。

PS：一般這時(shí)候不會(huì)馬上出現(xiàn)304的情況，會(huì)發(fā)現(xiàn)瀏覽器根本沒有發(fā)送請(qǐng)求帐偎，而是直接拿了本地的緩存逐纬。

image

（此處內(nèi)容是騰訊Bugly分享截取）這是因?yàn)闉g覽器的一種緩存過期策略削樊。在沒有提供任何瀏覽器緩存過期策略的情況下豁生，瀏覽器遵循一個(gè)啟發(fā)式緩存過期策略：

根據(jù)響應(yīng)頭中2個(gè)時(shí)間字段 Date 和 Last-Modified 之間的時(shí)間差值，取其值的10%作為緩存時(shí)間周期漫贞。

以下完整的緩存策略三要素：

image

這里需要注意的點(diǎn)甸箱，根據(jù)圖中的公式可以看出，如果上次緩存的文件時(shí)間較長迅脐，加上僅僅配置了Last-Modified芍殖，有可能導(dǎo)致用戶一直無法拿到最新的文件。

ETag

服務(wù)端在第一次請(qǐng)求資源時(shí)谴蔑，會(huì)在響應(yīng)頭ETag上添加一個(gè)由某種算符得出的隨機(jī)字符串豌骏，當(dāng)客戶端再一次請(qǐng)求該項(xiàng)資源時(shí)，會(huì)將之前緩存的字符串隐锭，自動(dòng)帶上給If-None-Match窃躲，服務(wù)端將得到的字符和服務(wù)器中的進(jìn)行對(duì)比。如果不同钦睡，則重新抓取文件蒂窒，若相同，則返回304荞怒。

//文件更新時(shí)重新設(shè)置etag(模擬服務(wù)器獲取etag)
const etag = '123456789abcdef';
const ifNoneMatch = "If-None-Match".toLowerCase();
res.setHeader("Etag", etag);
if (
  req.headers[ifNoneMatch] &&
  etag == req.headers[ifNoneMatch]
) {
  res.writeHead(304, "Not Modified");
}

image

不同緩存方式的優(yōu)先級(jí)關(guān)系

我這里就不寫詳細(xì)例子洒琢，直接將他們的優(yōu)先級(jí)展示出來。

其中Pragma>Cache-Control>Exprise褐桌，優(yōu)先級(jí)從左到右衰抑。

image

強(qiáng)緩存

服務(wù)器返回200 from cache屬于強(qiáng)緩存，客戶端通過Pragma荧嵌、Cache-Control和Exprise判斷是否有緩存停士，如果有緩存挖帘，直接訪問本地的緩存，不訪問服務(wù)器恋技，能更有效的節(jié)省資源。

磁盤緩存(from cache || from disk cache)

內(nèi)存緩存(from memory cache)

協(xié)商緩存（弱緩存）

服務(wù)器返回304 Not Modified屬于協(xié)商緩存逻族，客戶端通過向服務(wù)端發(fā)請(qǐng)求驗(yàn)證資源是否過期蜻底，若發(fā)現(xiàn)已經(jīng)過期，則重新拉去聘鳞，若沒有過期薄辅，服務(wù)端返回304，客戶端則從本地緩存中獲取資源抠璃，不重新拉去站楚。

分析不同緩存方式的優(yōu)劣性