本文轉(zhuǎn)載地址 :
https://blog.csdn.net/cominglately/article/details/77685214
通過HTTP的META設(shè)置expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
指令不區(qū)分大小寫，并且具有可選參數(shù)，可以用令牌或者帶引號的字符串語法。多個指令以逗號分隔。
緩存請求指令
客戶端可以在HTTP請求中使用的標(biāo)準(zhǔn) Cache-Control 指令。
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached
緩存響應(yīng)指令
服務(wù)器可以在響應(yīng)中使用的標(biāo)準(zhǔn) Cache-Control 指令。
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>
拓展Cache-Control指令
拓展緩存指令不是HTTP緩存標(biāo)準(zhǔn)的一部分，使用前請注意檢查 兼容性！
Cache-control: immutable
Cache-control: stale-while-revalidate=<seconds>
Cache-control: stale-if-error=<seconds>
可緩存性
public
表明響應(yīng)可以被任何對象（包括：發(fā)送請求的客戶端，代理服務(wù)器，等等）緩存。
private
表明響應(yīng)只能被單個用戶緩存，不能作為共享緩存（即代理服務(wù)器不能緩存它）。
no-cache
強制所有緩存了該響應(yīng)的緩存用戶，在使用已存儲的緩存數(shù)據(jù)前，發(fā)送帶驗證器的請求到原始服務(wù)器
only-if-cached
表明如果緩存存在，只使用緩存，無論原始服務(wù)器數(shù)據(jù)是否有更新
到期設(shè)置
max-age=<seconds>
設(shè)置緩存存儲的最大周期，超過這個時間緩存被認為過期(單位秒)。與Expires相反，時間是相對于請求的時間。
s-maxage=<seconds>
覆蓋max-age 或者 Expires 頭，但是僅適用于共享緩存(比如各個代理)，并且私有緩存中它被忽略。
max-stale[=<seconds>]
表明客戶端愿意接收一個已經(jīng)過期的資源。 可選的設(shè)置一個時間(單位秒)，表示響 應(yīng)不能超過的過時時間。
min-fresh=<seconds>
表示客戶端希望在指定的時間內(nèi)獲取最新的響應(yīng)。
重新驗證和重新加載
must-revalidate
緩存必須在使用之前驗證舊資源的狀態(tài)，并且不可使用過期資源。
proxy-revalidate
與must-revalidate作用相同，但它僅適用于共享緩存（例如代理），并被私有緩存忽略。
immutable
表示響應(yīng)正文不會隨時間而改變。資源（如果未過期）在服務(wù)器上不發(fā)生改變，因此客戶端不應(yīng)發(fā)送重新驗證請求頭（例如If-None-Match或If-Modified-Since）來檢查更新，即使用戶顯式地刷新頁面。在Firefox中，immutable只能被用在 https:// transactions.
禁止緩存
發(fā)送如下指令可以關(guān)閉緩存。此外，可以參考Expires 和 Pragma 標(biāo)題。
Cache-Control: no-cache, no-store, must-revalidate
緩存靜態(tài)資源
對于應(yīng)用程序中不會改變的文件，你通?？梢栽诎l(fā)送響應(yīng)頭前添加積極緩存。這包括例如由應(yīng)用程序提供的靜態(tài)文件，例如圖像，CSS文件和JavaScript文件。另請參閱Expires標(biāo)題。
Cache-Control:public, max-age=31536000
緩存策略介紹
緩存主要兩個策略 強制緩存 ，協(xié)商緩存
強制緩存就是設(shè)置本地資源html img js等等緩存多長時間 超過時間就去服務(wù)器端取。
協(xié)商緩存就是每次都詢問服務(wù)器資源是否已經(jīng)過期 沒有過期就使用緩存 已經(jīng)過期就從服務(wù)器上重新取。
緩存流程總結(jié)
緩存流程可以分三個階段 本地緩存，協(xié)商緩存 ，緩存失敗
本地緩存
就是查看響應(yīng)頭返回的緩存時間是多久 超過了就失效 進入?yún)f(xié)商階段，相關(guān)控制字
段是 cache-control: max-age， public ，private ， exprice 超時時間協(xié)商緩存
本地緩存失敗后 就查看響應(yīng)頭字段 Etag(資源的唯一標(biāo)識) 是否有值 ，如果有 就發(fā)一個帶 If-None-Match(值等于Etag) 字段請求頭過去詢問 資源是否已經(jīng)變更 變更了就發(fā)新資源過來。
如果無Etag就檢查 last-modify是否有值 ，如果有 就發(fā)送一個帶有 If-Modified-Since 字段的請求頭去詢問資源是否已經(jīng)更新，返回對應(yīng)結(jié)果緩存失敗
就是指通過檢查上面的各個字段 都失效了 就返回新的資源
結(jié)語
現(xiàn)在的vue項目里都不是這樣緩存的 我個人感覺這是在靜態(tài)頁面時的緩存辦法
現(xiàn)在都是webpack打包時通過 hash chunkhash contenthash來決定緩存方式 主要就是在請求的文件名稱后面加一個id 來判斷文件是否已經(jīng)更新。
