“緩存一直是前端優(yōu)化的主戰(zhàn)場(chǎng)，利用好緩存就成功了一半。本篇從HTTP請(qǐng)求和響應(yīng)的頭域入手，讓你對(duì)瀏覽器緩存有個(gè)整體的概念。最終你會(huì)發(fā)現(xiàn)強(qiáng)緩存，協(xié)商緩存 和 啟發(fā)式緩存是如此的簡(jiǎn)單。”

　　導(dǎo)讀

　　瀏覽器對(duì)于請(qǐng)求資源，擁有一系列成熟的緩存策略。按照發(fā)生的時(shí)間順序分別為存儲(chǔ)策略、過期策略、協(xié)商策略，其中存儲(chǔ)策略在收到響應(yīng)后應(yīng)用，過期策略、協(xié)商策略在發(fā)送請(qǐng)求前應(yīng)用。流程圖如下所示：

　　廢話不多說，我們先來看兩張表格。

　　1. HTTP Header中與緩存有關(guān)的Key：

　　key描述存儲(chǔ)策略過期策略協(xié)商策略

　　Cache-Control指定緩存機(jī)制，覆蓋其它設(shè)置????

　　Pragmahttp1.0字段，指定緩存機(jī)制??

　　Expireshttp1.0字段，指定緩存的過期時(shí)間??

　　Last-Modified資源最后一次的修改時(shí)間??

　　ETag唯一標(biāo)識(shí)請(qǐng)求資源的字符串??

　　2. 緩存協(xié)商策略用于重新驗(yàn)證緩存資源是否有效，有關(guān)的Key如下：

　　key描述

　　If-Modified-Since緩存校驗(yàn)字段，值為資源最后一次的修改時(shí)間，即上次收到的Last-Modified值

　　If-Unmodified-Since同上，處理方式與之相反

　　If-Match緩存校驗(yàn)字段，值為唯一標(biāo)識(shí)請(qǐng)求資源的字符串，即上次收到的ETag值

　　If-None-Match同上，處理方式與之相反

　　各個(gè)頭域（key）的作用

　　Cache-Control

　　瀏覽器緩存里，Cache-Control是金字塔頂尖的規(guī)則，它藐視一切其他設(shè)置，只要其他設(shè)置與其抵觸，一律覆蓋之。

　　不僅如此，它還是一個(gè)復(fù)合規(guī)則，包含多種值，橫跨存儲(chǔ)策略、過期策略兩種，同時(shí)在請(qǐng)求頭和響應(yīng)頭都可設(shè)置。

　　語法為：“Cache-Control ： cache-directive”。

　　Cache-directive共有如下12種（其中請(qǐng)求中指令7種，響應(yīng)中指令9種）：

　　Cache-directive描述存儲(chǔ)策略過期策略請(qǐng)求字段響應(yīng)字段

　　public資源將被客戶端和代理服務(wù)器緩存????

　　private資源僅被客戶端緩存，代理服務(wù)器不緩存????

　　no-store請(qǐng)求和響應(yīng)都不緩存??????

　　no-cache相當(dāng)于max-age:0，must-revalidate即資源被緩存，但是緩存立刻過期，同時(shí)下次訪問時(shí)強(qiáng)制驗(yàn)證資源有效性????????

　　max-age緩存資源，但是在指定時(shí)間（單位為秒）后緩存過期????????

　　s-maxage同上，依賴public設(shè)置，覆蓋max-age，且只在代理服務(wù)器上有效。??????

　　max-stale指定時(shí)間內(nèi)，即使緩存過時(shí)，資源依然有效????

　　min-fresh緩存的資源至少要保持指定時(shí)間的新鮮期????

　　must-revalidation / proxy-revalidation如果緩存失效，強(qiáng)制重新向服務(wù)器（或代理）發(fā)起驗(yàn)證（因?yàn)閙ax-stale等字段可能改變緩存的失效時(shí)間）????

　　only-if-cached僅僅返回已經(jīng)緩存的資源，不訪問網(wǎng)絡(luò)，若無緩存則返回504??

　　no-transform強(qiáng)制要求代理服務(wù)器不要對(duì)資源進(jìn)行轉(zhuǎn)換，禁止代理服務(wù)器對(duì) Content-Encoding，Content-Range，Content-Type字段的修改（因此代理的gzip壓縮將不被允許）????

　　假設(shè)所請(qǐng)求資源于4月5日緩存，且在4月12日過期。

　　當(dāng)max-age 與 max-stale 和 min-fresh 同時(shí)使用時(shí)，它們的設(shè)置相互之間獨(dú)立生效，最為保守的緩存策略總是有效。這意味著，如果max-age=10 days，max-stale=2 days，min-fresh=3 days，那么：

　　根據(jù)max-age的設(shè)置，覆蓋原緩存周期， 緩存資源將在4月15日失效（5+10=15）;

　　根據(jù)max-stale的設(shè)置，緩存過期后兩天依然有效，此時(shí)響應(yīng)將返回110（Response is stale）狀態(tài)碼，緩存資源將在4月14日失效（12+2=14）；

　　根據(jù)min-fresh的設(shè)置，至少要留有3天的新鮮期，緩存資源將在4月9日失效（12-3=9）；

　　由于客戶端總是采用最保守的緩存策略，因此，4月9日后，對(duì)于該資源的請(qǐng)求將重新向服務(wù)器發(fā)起驗(yàn)證。

相關(guān)電子資料下載

• 常用于緩存處理的機(jī)制總結(jié) 如何避免緩存雪崩問題？ 24
• 如何保證緩存一致性 115
• fpga跨時(shí)鐘域通信時(shí)，慢時(shí)鐘如何讀取快時(shí)鐘發(fā)送過來的數(shù)據(jù)？ 153
• 研揚(yáng)科技BOXER-6617-ADN提供堅(jiān)固耐用的無風(fēng)扇工業(yè)迷你PC支持 340
• AMD Radeon RX 6750 GRE顯卡參數(shù) 62
• Boltons：超過230個(gè)的純Python實(shí)用工具庫 79
• 緩存的好處和類型 84
• 華為云分布式緩存服務(wù)DCS，它與開源Redis有哪些差異，快來一探究竟！ 119
• 密碼算法實(shí)現(xiàn)的FIA防護(hù) 45
• java如何處理圖片水印 66