管理Web緩存的最常用和最有效的方法之一是通過Cache-Control HTTP標(biāo)頭，由于此標(biāo)頭適用于Web頁面的緩存，這意味著我們頁面上的所有內(nèi)容都可以具有非常精細(xì)化的緩存策略。通過各種自定義策略，我們控制的策略就可以變得非常復(fù)雜和強(qiáng)大。

[[259935]]

Cache-Control

管理Web緩存的最常用和最有效的方法之一是通過Cache-Control HTTP標(biāo)頭，由于此標(biāo)頭適用于Web頁面的緩存，這意味著我們頁面上的所有內(nèi)容都可以具有非常精細(xì)化的緩存策略。通過各種自定義策略，我們控制的策略就可以變得非常復(fù)雜和強(qiáng)大。

Cache-Control標(biāo)頭可能如下所示：

Cache-Control: public, max-age=31536000 

Cache-Control是標(biāo)頭，public和max-age=31536000都是指令。 Cache-Control標(biāo)頭可以接受一個(gè)或多個(gè)指令，我想在本文中討論的就是這些指令，比如它們的真正含義以及它們的***用例。

public和private緩存

public意味著任何緩存都可以存儲(chǔ)響應(yīng)的副本，其中就包括CDN、代理服務(wù)器等。public指令通常是多余的，因?yàn)槠渌噶?比如max-age)的存在是隱式指令，緩存可能會(huì)存儲(chǔ)一個(gè)副本。

另一方面，private是一個(gè)顯式指令，只有響應(yīng)的最終接收者（客戶端或?yàn)g覽器）才可以存儲(chǔ)該文件的副本。雖然private本身不是具有安全功能，但是它的目的是防止public緩存(例如CDN)存儲(chǔ)包含一個(gè)用戶唯一信息的響應(yīng)。

max-age

max-age定義了一個(gè)以秒為單位的時(shí)間單位(相對于請求的時(shí)間)，該單位的響應(yīng)被認(rèn)為是‘fresh’。

Cache-Control: max-age=60 

此Cache-Control標(biāo)頭會(huì)告訴瀏覽器，它可以在接下來的60秒內(nèi)使用緩存中的此文件，而不必?fù)?dān)心重新被驗(yàn)證。 不過60秒后，瀏覽器將返回服務(wù)器以重新驗(yàn)證文件。

如果服務(wù)器有一個(gè)新文件供瀏覽器下載，它將以200響應(yīng)進(jìn)行響應(yīng)，下載新文件后，舊文件將從HTTP緩存中彈出，新文件將替換它，并將成為新的緩存標(biāo)頭。

如果服務(wù)器沒有需要下載的更新副本，則服務(wù)器將以200響應(yīng)進(jìn)行響應(yīng)，不需要下載任何新文件，并將使用新的標(biāo)頭更新緩存副本。這意味著，如果仍然存在Cache-Control：max-age = 60標(biāo)頭，則緩存文件在60秒后將再次啟動(dòng)。算下來，一個(gè)文件的總緩存時(shí)間為120秒。

注意：max-age會(huì)有自動(dòng)警告的屬性，如果瀏覽器過于陳舊，則max-age會(huì)提醒用戶，但用戶可以選擇忽略此警告。瀏覽器可能會(huì)使用自己的試探法來決定是否在不重新驗(yàn)證文件的情況下發(fā)布文件的陳舊副本。這種行為有些不確定，所以很難確切地知道瀏覽器將實(shí)際做什么。為此，我們有一系列顯式指令，可以用它們來擴(kuò)充max-age。

s-maxage

s-maxage將優(yōu)先于max-age指令，但僅限在共享緩存的上下文中使用。將max-age和s-maxage結(jié)合使用，你可以分別為private和public緩存（例如代理、CDN）提供不同的啟動(dòng)時(shí)間。

no-store

Cache-Control: no-store 

如果我們不想緩存文件怎么辦？如果文件包含敏感信息怎么辦？也許這是一個(gè)包含銀行詳細(xì)信息的HTML頁面？或許這些信息對時(shí)間至關(guān)重要？也許是一個(gè)包含實(shí)時(shí)股票價(jià)格的頁面？其實(shí)我們并不想在緩存中存儲(chǔ)或提供任何類似的響應(yīng)：我們總是希望丟棄敏感信息并獲取***的實(shí)時(shí)信息。這時(shí)，我們就要用到no-store指令。

no-store是一個(gè)非常強(qiáng)大的指令，不會(huì)將任何信息保存到任何緩存中，無論是private或其他緩存。

no–cache

Cache-Control: no-cache 

這是讓大多數(shù)人誤解的指令，no – cache存并不意味著“沒有緩存”。這只是意味著“在你使用服務(wù)器重新驗(yàn)證緩存之前，不需要從緩存中提供副本就可以使用以前的緩存副本”。

no-cache實(shí)際上是一種非常聰明的緩存更新策略，這樣就可以始終保證***的緩存副本。除非服務(wù)器響應(yīng)更快，否則no-cache將始終must-revalidate服務(wù)器才能釋放瀏覽器的緩存副本，但如果服務(wù)器響應(yīng)速度一般，網(wǎng)絡(luò)傳輸只有一個(gè)文件的標(biāo)頭，則可以直接從緩存中抓取正文而不是重載。

因此，這是一種結(jié)合更新策略，并快速從緩存中獲取文件的智能方法，但前提是它至少要獲得一個(gè)HTTP標(biāo)頭響應(yīng)。

無緩存的一個(gè)很好的用例幾乎就是動(dòng)態(tài)HTML頁面，想想新聞網(wǎng)站的主頁：它不是實(shí)時(shí)的，也不包含任何敏感信息，但理想情況下我們希望頁面始終顯示***鮮的內(nèi)容。我們可以使用cache-control：no-cache來指示瀏覽器首先檢查服務(wù)器，如果服務(wù)器沒有更新的東西（304），就會(huì)重用緩存的版本。如果服務(wù)器確實(shí)有一些更新鮮的內(nèi)容，它會(huì)響應(yīng)（200）并發(fā)送更新的文件。

提示：沒有必要發(fā)送max-age指令和no-cache指令，因?yàn)橹匦买?yàn)證的時(shí)間限制為零秒。

must-revalidate

更令人困惑的是，盡管上面的代碼聽起來應(yīng)該稱為must-revalidate，但事實(shí)證明，must-revalidate仍然具有自己的特點(diǎn)。

Cache-Control: must-revalidate, max-age=600 

must-revalidate需要一個(gè)相關(guān)的max-age指令，如上所示，我們把它設(shè)置為十分鐘。此時(shí)，no-cache將立即與服務(wù)器重新驗(yàn)證，只有在服務(wù)器允許時(shí)才使用緩存副本時(shí)，must-revalidate才類似于一個(gè)寬限期no-cache。具體過程是這樣的，在前十分鐘，瀏覽器不會(huì)與服務(wù)器重新驗(yàn)證，但十分鐘過后，它又返回服務(wù)器。如果服務(wù)器沒有任何新內(nèi)容，它將以304響應(yīng)并且新的Cache-Control標(biāo)頭應(yīng)用于緩存文件。然后再以十分鐘為單位，如果在十分鐘之后，服務(wù)器上有一個(gè)較新的文件，我們會(huì)收到200響應(yīng)及其正文，并且本地緩存會(huì)更新。

proxy-revalidate

與s-maxage類似，proxy-revalidate是must-revalidate的public緩存的自定義版本，它只是被private緩存忽略了。

immutable

immutable是一個(gè)非常新的且非常簡潔的指令，它告訴瀏覽器關(guān)于我們發(fā)送的文件類型的更多信息，該指令可以解決以下問題:用戶刷新會(huì)導(dǎo)致瀏覽器重新驗(yàn)證文件，無論其新鮮度如何，用戶刷新通常意味著以下任意情況必定發(fā)生：頁面看起來不完整或者內(nèi)容還和原來一樣。

所以，我們有必要檢查服務(wù)器上是否有更新的內(nèi)容。

如果服務(wù)器上有更新的文件，我們肯定希望下載它。因此，我們將得到200響應(yīng)，即一個(gè)新文件出現(xiàn)。但是，如果服務(wù)器上沒有新文件，我們將得到304響應(yīng)，即沒有新文件，如果是專業(yè)，則整個(gè)延遲反應(yīng)就沒有意義了。如果我們重新驗(yàn)證許多導(dǎo)致延遲反應(yīng)304的文件，可能會(huì)增加數(shù)百毫秒不必要的等待。

immutable是一種告訴瀏覽器文件有無可變內(nèi)容的指令，如果內(nèi)容無更新，則永遠(yuǎn)不會(huì)重新驗(yàn)證緩存。這樣，就可以完全消除延遲時(shí)間。不過，immutable所指的可變或不可變文件的具體含義是什么？

style.css：當(dāng)我們更改此文件的內(nèi)容時(shí)，即使根本不更改其名稱，這個(gè)文件也被認(rèn)為是可變的。

style.ae3f66.css：這個(gè)文件是唯一的，它以基于其具體內(nèi)容來命名的，所以一旦內(nèi)容發(fā)生變化，我們就會(huì)得到一個(gè)全新的文件，此時(shí)，這個(gè)文件就被認(rèn)為是不可變的。

我們將在Cache Busting部分中更詳細(xì)地討論這個(gè)問題。

如果我們能夠以某種方式向?yàn)g覽器發(fā)出文件是不可變的信號(hào)，則它就不需要檢查更新版本，這正是immutable指令的作用：

Cache-Control: max-age=31536000, immutable

在支持immutable指令的瀏覽器中，用戶刷新永遠(yuǎn)不會(huì)在31536000秒的新鮮度生命周期內(nèi)進(jìn)行重新驗(yàn)證。這意味著無需花費(fèi)不必要的延遲時(shí)間來檢索304響應(yīng)，這可能會(huì)在關(guān)鍵路徑（CSS blocks rendering）上節(jié)省大量的延遲時(shí)間。

注意：你不應(yīng)該將immutable應(yīng)用于任何不可變的文件，因?yàn)槟氵€應(yīng)該有一個(gè)非常強(qiáng)大的緩存破壞策略。

stale-while-revalidate

到目前為止，我們已經(jīng)談了很多關(guān)于重新驗(yàn)證的內(nèi)容，都是關(guān)于瀏覽器返回服務(wù)器以檢查是否有更新的文件的過程。在高延遲連接上，重新驗(yàn)證的持續(xù)時(shí)間會(huì)很長，并且這個(gè)時(shí)間是固定的，直到我們對服務(wù)器進(jìn)行額外的命令，否則既不能釋放緩存副本（304）也不能下載新文件（200）。

stale-while-revalidate提供的是寬限期，在此期間，當(dāng)我們檢查新版本時(shí)，允許瀏覽器使用過去的緩存。

Cache-Control: max-age=31536000, stale-while-revalidate=86400 

該指令是在告訴瀏覽器“這個(gè)文件可以使用一年，一年之后，還可以再用一個(gè)星期。在這時(shí)候，如果你要繼續(xù)使用這個(gè)舊的資源，就必須在后臺(tái)重新驗(yàn)證它”。

stale-while-revalidate對非關(guān)鍵資源是一個(gè)很好的指令，當(dāng)然，我們希望使用***的版本。但是我們知道，如果在檢查更新時(shí)再次使用過時(shí)的響應(yīng)，不會(huì)造成任何對更新的破壞。

stale-if-error

與stale-while-revalidate類似，如果重新驗(yàn)證的資源返回5xx類錯(cuò)誤，stale-if-error允許瀏覽器有一段緩沖時(shí)間，在此期間可以允許返回過時(shí)的響應(yīng)。

Cache-Control: max-age=2419200, stale-if-error=86400 

在本文中，我們指定了28天（2419200秒）以內(nèi)的緩存文件都是新的，如果我們在那之后遇到更新錯(cuò)誤，我們會(huì)多追加一天（86400秒），在此期間我們將允許過時(shí)的資源響應(yīng)。

Cache Busting（緩存破壞）

只討論緩存得正常情況而不討論緩存破壞的情況是不負(fù)責(zé)任的。在考慮你的緩存策略之前，我總是建議你解決緩存破壞策略。因?yàn)楫?dāng)開發(fā)者修改了網(wǎng)站就會(huì)發(fā)生問題，因?yàn)橛脩舯镜鼐彺娴奈募€是老文件。這樣用戶看到的不僅還是舊的功能，如果網(wǎng)站緩存了css和js文件，它們還在引用不存在的元素或者被移除的被重命名的元素，網(wǎng)站就會(huì)報(bào)錯(cuò)破壞。

Cache busting就是強(qiáng)制瀏覽器下載新文件的一種方法，通過將新文件的名字修改成和舊文件不同的名字即可實(shí)現(xiàn)。

No Cache Busting – style.css

這是最不可取的做法：絕對沒有任何緩存破壞。這是一個(gè)可變文件，我們真的很難實(shí)現(xiàn)Cache Busting。

你應(yīng)該非常謹(jǐn)慎地緩存這些文件，因?yàn)橐坏┧鼈兂霈F(xiàn)在用戶的設(shè)備上，我們幾乎失去了對它們的所有控制權(quán)。

盡管這個(gè)例子是一個(gè)樣式表，但HTML頁面正好就是這個(gè)特性。由于我們無法更改網(wǎng)頁的文件名，網(wǎng)站就會(huì)報(bào)錯(cuò)破壞！這正是我們根本不會(huì)緩存它們的原因。

Query String – style.css?v=1.2.14

此時(shí)，我們?nèi)匀挥幸粋€(gè)可變文件，但我們在其文件路徑中添加了一個(gè)查詢字符串。雖然這比什么都不做要好，但它仍然不***。如果要?jiǎng)h除查詢字符串，我們會(huì)回到之前的類別，即完全不存在緩存破壞。許多代理服務(wù)器和CDN都不會(huì)通過配置來緩存任何帶有查詢字符串的內(nèi)容。例如，來自Cloudflare的文檔， “style.css?something”的請求將被標(biāo)準(zhǔn)化為“style.css”，或查詢字符串可能包含特定于一個(gè)特定響應(yīng)的信息。

Fingerprint – style.ae3f66.css

到目前為止，指紋識(shí)別是緩存破壞文件的***方法。每次文件的內(nèi)容發(fā)生變化時(shí)，我們都對其進(jìn)行更改，這并不會(huì)緩存任何內(nèi)容。這意味著，我們將最終得到的是一個(gè)全新的文件!且該文件不可更改。如果你可以在靜態(tài)緩存上實(shí)現(xiàn)此功能，請執(zhí)行此操作!一旦你成功地實(shí)現(xiàn)了這個(gè)非?？煽康木彺嫫茐牟呗?，你就能得到***的緩存控制指令了：

Cache-Control: max-age=31536000, immutable 

實(shí)施細(xì)節(jié)

此方法的關(guān)鍵是更改文件名，但不一定是對指紋進(jìn)行更改。以下所有示例都具有相同的效果：

•  /assets/style.ae3f66.css：使用文件內(nèi)容的哈希產(chǎn)生破壞；
• /assets/style.1.2.14.css：使用一個(gè)已發(fā)布的版本產(chǎn)生破壞；
• /assets/1.2.14/style.css：通過更改URL中的目錄產(chǎn)生破壞；

但是，***一個(gè)示例表明，我們對每個(gè)版本而不是每個(gè)單獨(dú)的文件進(jìn)行版本控制。這反過來意味著，如果我們只需要緩存樣式表，則還必須緩存該版本的所有靜態(tài)文件，所以***選項(xiàng)是前兩個(gè)。

Clear-Site-Data

目前我們正在開發(fā)一個(gè)規(guī)范，以幫助開發(fā)人員確定整個(gè)緩存的來源，并從根上徹底一次性清除，這就是Clear-Site-Data的含義，它讓W(xué)eb開發(fā)人員對瀏覽器本地存儲(chǔ)的數(shù)據(jù)有更多控制能力。

我不想在這篇文章中詳細(xì)介紹Clear-Site-Data，它不是Cache-Control指令，而是一個(gè)全新的HTTP標(biāo)頭文件。

Clear-Site-Data: "cache" 

將此標(biāo)頭應(yīng)用于你的任何一個(gè)源緩存都將讓整個(gè)源的緩存破壞，而不僅僅是它所附加的文件。這意味著，如果你需要從所有訪問者的緩存中強(qiáng)制破壞整個(gè)站點(diǎn)，則可以將上述標(biāo)頭應(yīng)用于HTML有效內(nèi)容。

在撰寫本文時(shí)，僅支持瀏覽器有Chrome，Android Webview，F(xiàn)irefox和Opera。

提示：Clear-Site-Data將接受許多指令：“cookies”，“storage”，“executionContexts”和“*” (當(dāng)然，“*”的意思是“以上所有”)。

具體示例

好的，讓我們來看看一些應(yīng)用場景以及我們可能采用哪種Cache-Control標(biāo)頭。

網(wǎng)上銀行頁面

Request URL: /account/ 
Cache-Control: no-store 

根據(jù)規(guī)范，這足以阻止瀏覽器在private和共享緩存中持續(xù)對磁盤的響應(yīng)。

no-store響應(yīng)指令會(huì)命令緩存不得存儲(chǔ)立即請求或響應(yīng)的任何部分，此指令適用于private和共享緩存。 “不得存儲(chǔ)”意味著緩存不得故意將信息存儲(chǔ)在非易失性存儲(chǔ)中，并且必須盡***努力盡快在轉(zhuǎn)發(fā)后從易失性存儲(chǔ)中刪除所存儲(chǔ)的信息。

但如果你想要防止緩存的發(fā)生，你可以選擇：

Request URL: /account/ 
Cache-Control: private, no-cache, no-store 

該指令將明確指示不要在public緩存（例如CDN）中存儲(chǔ)任何內(nèi)容，以始終提供***的副本。

列車時(shí)間表網(wǎng)頁

如果我們正在構(gòu)建一個(gè)顯示實(shí)時(shí)信息的頁面，則希望保證用戶始終能夠看到***的信息。此時(shí)，可以使用以下指令：

Request URL: /live-updates/ 
Cache-Control: no-cache 

這個(gè)簡單的指令意味著瀏覽器不會(huì)直接從緩存中顯示響應(yīng)，意味著頁面不會(huì)顯示過時(shí)的列車信息。

FAQ頁面

像FAQ這樣的頁面可能很少更新，因?yàn)槠渲械膬?nèi)容大多都是常識(shí)性問題，對時(shí)效性沒有要求。我們可能會(huì)暫時(shí)緩存這樣的HTML頁面，并強(qiáng)制瀏覽器定期檢查新內(nèi)容，而不是每次對緩存進(jìn)行訪問?？梢允褂靡韵轮噶睿?/p>

Request URL: /faqs/ 
Cache-Control: max-age=604800, must-revalidate 

該指令會(huì)告訴瀏覽器將HTML頁面緩存一周（604800秒），并且一周結(jié)束后，我們需要檢查服務(wù)器是否有更新。

頁面中的圖片

頁面中的圖片通常都是一篇文章的配圖，通常我們都會(huì)下載下來，所以我們想緩存它。但其實(shí)它對頁面的更新狀態(tài)并不會(huì)產(chǎn)生影響，因此我們不需要它的更新狀態(tài)?？梢允褂靡韵轮噶睿?/p>

Request URL: /content/masthead.jpg 
Cache-Control: max-age=2419200, must-revalidate, stale-while-revalidate=86400 

該指令會(huì)告訴瀏覽器將圖像存儲(chǔ)28天（2419200秒），我們要在28天的時(shí)間限制后檢查該圖像在服務(wù)器中是否有更新。

總結(jié)

1.判斷是否設(shè)置了cacheBusting屬性非常重要。在開始執(zhí)行緩存策略之前，請先制定緩存破壞策略。

2.一般來說，緩存HTML內(nèi)容是一個(gè)錯(cuò)誤的方法。 由于HTML網(wǎng)址不能被破壞，并且由于你的HTML頁面通常是其余子資源的入口點(diǎn)，因此你最終也會(huì)緩存對靜態(tài)資源的引用。

3.如果要緩存任何HTML，在站點(diǎn)上的不同類型的HTML頁面上使用不同的緩存策略可能會(huì)導(dǎo)致不一致，比如有的頁面總是***的內(nèi)容，而其他頁面的內(nèi)容有時(shí)是從緩存中獲取的。

4.如果你能夠可靠的緩存(使用指紋)的靜態(tài)資產(chǎn)，那么你還不如一次性使用一個(gè)不可變的指令緩存數(shù)年，以便更好地進(jìn)行管理。

5.非關(guān)鍵緩存內(nèi)容可以使用stale-while-revalidate等指令，增加緩存的寬限期。

6.immutable和stale-while-revalidate不僅為我們提供了緩存的傳統(tǒng)優(yōu)勢，而且還允許我們在重新驗(yàn)證時(shí)降低延遲。

7.充分了解你的緩存，并設(shè)計(jì)具有針對性的緩存策略。