1分鐘，徹底弄懂瀏覽器緩存策略

者：kevinylzhao，騰訊音樂(lè)前端開(kāi)發(fā)工程師

瀏覽器緩存策略對(duì)于前端開(kāi)發(fā)同學(xué)來(lái)說(shuō)不陌生，大家都有一定的了解，但如果沒(méi)有系統(tǒng)的歸納總結(jié)，可能三言兩語(yǔ)很難說(shuō)明白，甚至說(shuō)錯(cuò)，尤其在面試過(guò)程中感觸頗深，很多候選人對(duì)這類(lèi)基礎(chǔ)知識(shí)竟然都是一知半解，說(shuō)出幾個(gè)概念就沒(méi)了，所以重新歸納總結(jié)下，溫故而知新。

Web 緩存介紹

Web 緩存是指一個(gè) Web 資源（如 html 頁(yè)面，圖片，js，數(shù)據(jù)等）存在于 Web 服務(wù)器和客戶端（瀏覽器）之間的副本。
緩存會(huì)根據(jù)進(jìn)來(lái)的請(qǐng)求保存輸出內(nèi)容的副本；當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候，如果是相同的 URL，緩存會(huì)根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問(wèn)請(qǐng)求，還是向源服務(wù)器再次發(fā)送請(qǐng)求。

Web 緩存的好處

減少網(wǎng)絡(luò)延遲，加快頁(yè)面打開(kāi)速度
減少網(wǎng)絡(luò)帶寬消耗
降低服務(wù)器壓力
...

HTTP 的緩存機(jī)制

簡(jiǎn)化的流程如下

根據(jù)什么規(guī)則緩存

新鮮度（過(guò)期機(jī)制）：也就是緩存副本有效期。一個(gè)緩存副本必須滿足以下條件，瀏覽器會(huì)認(rèn)為它是有效的，足夠新的：

含有完整的過(guò)期時(shí)間控制頭信息（HTTP 協(xié)議報(bào)頭），并且仍在有效期內(nèi)；
瀏覽器已經(jīng)使用過(guò)這個(gè)緩存副本，并且在一個(gè)會(huì)話中已經(jīng)檢查過(guò)新鮮度；

校驗(yàn)值（驗(yàn)證機(jī)制）：服務(wù)器返回資源的時(shí)候有時(shí)在控制頭信息帶上這個(gè)資源的實(shí)體標(biāo)簽 Etag（Entity Tag），它可以用來(lái)作為瀏覽器再次請(qǐng)求過(guò)程的校驗(yàn)標(biāo)識(shí)。如果發(fā)現(xiàn)校驗(yàn)標(biāo)識(shí)不匹配，說(shuō)明資源已經(jīng)被修改或過(guò)期，瀏覽器需求重新獲取資源內(nèi)容。

HTTP 緩存的兩個(gè)階段

瀏覽器緩存一般分為兩類(lèi)：強(qiáng)緩存（也稱本地緩存）和協(xié)商緩存（也稱弱緩存）。

本地緩存階段

瀏覽器發(fā)送請(qǐng)求前，會(huì)先去緩存里查看是否命中強(qiáng)緩存，如果命中，則直接從緩存中讀取資源，不會(huì)發(fā)送請(qǐng)求到服務(wù)器。否則，進(jìn)入下一步。

協(xié)商緩存階段

當(dāng)強(qiáng)緩存沒(méi)有命中時(shí)，瀏覽器一定會(huì)向服務(wù)器發(fā)起請(qǐng)求。服務(wù)器會(huì)根據(jù) Request Header 中的一些字段來(lái)判斷是否命中協(xié)商緩存。如果命中，服務(wù)器會(huì)返回 304 響應(yīng)，但是不會(huì)攜帶任何響應(yīng)實(shí)體，只是告訴瀏覽器可以直接從瀏覽器緩存中獲取這個(gè)資源。如果本地緩存和協(xié)商緩存都沒(méi)有命中，則從直接從服務(wù)器加載資源。

啟用&關(guān)閉緩存

按照本地緩存階段和協(xié)商緩存階段分類(lèi)：

使用 HTML Meta 標(biāo)簽　　 Web 開(kāi)發(fā)者可以在 HTML 頁(yè)面的節(jié)點(diǎn)中加入標(biāo)簽，如下：

上述代碼的作用是告訴瀏覽器當(dāng)前頁(yè)面不被緩存，事實(shí)上這種禁用緩存的形式用處很有限：

a. 僅有 IE 才能識(shí)別這段 meta 標(biāo)簽含義，其它主流瀏覽器僅識(shí)別“Cache-Control: no-store”的 meta 標(biāo)簽。

b. 在 IE 中識(shí)別到該 meta 標(biāo)簽含義，并不一定會(huì)在請(qǐng)求字段加上 Pragma，但的確會(huì)讓當(dāng)前頁(yè)面每次都發(fā)新請(qǐng)求（僅限頁(yè)面，頁(yè)面上的資源則不受影響）。

使用緩存有關(guān)的 HTTP 消息報(bào)頭這里需要了解 HTTP 的基礎(chǔ)知識(shí)。一個(gè) URI 的完整 HTTP 協(xié)議交互過(guò)程是由 HTTP 請(qǐng)求和 HTTP 響應(yīng)組成的。有關(guān) HTTP 詳細(xì)內(nèi)容可參考《Hypertext Transfer Protocol — HTTP/1.1》、《HTTP 權(quán)威指南》等。

在 HTTP 請(qǐng)求和響應(yīng)的消息報(bào)頭中，常見(jiàn)的與緩存有關(guān)的消息報(bào)頭有：

上圖中只是常用的消息報(bào)頭，下面來(lái)看下不同字段之間的關(guān)系和區(qū)別：

Cache-Control 與 Expires
Cache-Control：HTTP1.1 提出的特性，為了彌補(bǔ) Expires 缺陷加入的，提供了更精確細(xì)致的緩存功能。詳細(xì)了解詳細(xì)看幾個(gè)常見(jiàn)的指令：_ max-age：功能和 Expires 類(lèi)似，但是后面跟一個(gè)以“秒”為單位的相對(duì)時(shí)間，來(lái)供瀏覽器計(jì)算過(guò)期時(shí)間。_ no-cache：提供了過(guò)期驗(yàn)證機(jī)制。(在 Chrome 的 devtools 中勾選 Disable cache 選項(xiàng)，發(fā)送的請(qǐng)求會(huì)去掉 If-Modified-Since 這個(gè) Header。同時(shí)設(shè)置 Cache-Control:no-cache Pragma:no-cache，每次請(qǐng)求均為 200)

no-store：表示當(dāng)前請(qǐng)求資源禁用緩存；
public：表示緩存的版本可以被代理服務(wù)器或者其他中間服務(wù)器識(shí)別；
private：表示只有用戶自己的瀏覽器能夠進(jìn)行緩存，公共的代理服務(wù)器不允許緩存。

Expires：HTTP1.0 的特性，標(biāo)識(shí)該資源過(guò)期的時(shí)間點(diǎn)，它是一個(gè)絕對(duì)值，格林威治時(shí)間（Greenwich Mean Time, GMT），即在這個(gè)時(shí)間點(diǎn)之后，緩存的資源過(guò)期；優(yōu)先級(jí)：Cache-Control 優(yōu)先級(jí)高于 Expires，為了兼容，通常兩個(gè)頭部同時(shí)設(shè)置；瀏覽器默認(rèn)行為：其實(shí)就算 Response Header 中沒(méi)有設(shè)置 Cache-Control 和 Expires，瀏覽器仍然會(huì)緩存某些資源，這是瀏覽器的默認(rèn)行為，是為了提升性能進(jìn)行的優(yōu)化，每個(gè)瀏覽器的行為可能不一致，有些瀏覽器甚至沒(méi)有這樣的優(yōu)化。

Last-Modified 與 ETag
Last-Modified(Response Header)與 If-Modified-Since(Request Header)是一對(duì)報(bào)文頭，屬于 http 1.0。If-Modified-Since 是一個(gè)請(qǐng)求首部字段，并且只能用在 GET 或者 HEAD 請(qǐng)求中。Last-Modified 是一個(gè)響應(yīng)首部字段，包含服務(wù)器認(rèn)定的資源作出修改的日期及時(shí)間。當(dāng)帶著 If-Modified-Since 頭訪問(wèn)服務(wù)器請(qǐng)求資源時(shí)，服務(wù)器會(huì)檢查 Last-Modified，如果 Last-Modified 的時(shí)間早于或等于 If-Modified-Since 則會(huì)返回一個(gè)不帶主體的 304 響應(yīng)，否則將重新返回資源。(注意：在 Chrome 的 devtools 中勾選 Disable cache 選項(xiàng)后，發(fā)送的請(qǐng)求會(huì)去掉 If-Modified-Since 這個(gè) Header。)

ETag 與 If-None-Match 是一對(duì)報(bào)文頭，屬于 http 1.1。ETag 是一個(gè)響應(yīng)首部字段，它是根據(jù)實(shí)體內(nèi)容生成的一段 hash 字符串，標(biāo)識(shí)資源的狀態(tài)，由服務(wù)端產(chǎn)生。If-None-Match 是一個(gè)條件式的請(qǐng)求首部。如果請(qǐng)求資源時(shí)在請(qǐng)求首部加上這個(gè)字段，值為之前服務(wù)器端返回的資源上的 ETag，則當(dāng)且僅當(dāng)服務(wù)器上沒(méi)有任何資源的 ETag 屬性值與這個(gè)首部中列出的時(shí)候，服務(wù)器才會(huì)返回帶有所請(qǐng)求資源實(shí)體的 200 響應(yīng)，否則服務(wù)器會(huì)返回不帶實(shí)體的 304 響應(yīng)。
ETag 能解決什么問(wèn)題？

a. Last-Modified 標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在 1 秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的新鮮度；

b. 某些文件也許會(huì)周期性的更改，但是它的內(nèi)容并不改變(僅僅改變的修改時(shí)間)，但 Last-Modified 卻改變了，導(dǎo)致文件沒(méi)法使用緩存；

c. 有可能存在服務(wù)器沒(méi)有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形。

優(yōu)先級(jí)：ETag 優(yōu)先級(jí)比 Last-Modified 高，同時(shí)存在時(shí)會(huì)以 ETag 為準(zhǔn)。

緩存位置

瀏覽器可以在內(nèi)存、硬盤(pán)中開(kāi)辟一個(gè)空間用于保存請(qǐng)求資源副本。我們經(jīng)常調(diào)試時(shí)在 DevTools Network 里看到 Memory Cache（內(nèi)存緩存）和 Disk Cache（硬盤(pán)緩存），指的就是緩存所在的位置。請(qǐng)求一個(gè)資源時(shí)，會(huì)按照優(yōu)先級(jí)（Service Worker -> Memory Cache -> Disk Cache -> Push Cache）依次查找緩存，如果命中則使用緩存，否則發(fā)起請(qǐng)求。這里先介紹 Memory Cache 和 Disk Cache。

200 from memory cache

表示不訪問(wèn)服務(wù)器，直接從內(nèi)存中讀取緩存。因?yàn)榫彺娴馁Y源保存在內(nèi)存中，所以讀取速度較快，但是關(guān)閉進(jìn)程后，緩存資源也會(huì)隨之銷(xiāo)毀，一般來(lái)說(shuō)，系統(tǒng)不會(huì)給內(nèi)存分配較大的容量，因此內(nèi)存緩存一般用于存儲(chǔ)較小文件。同時(shí)內(nèi)存緩存在有時(shí)效性要求的場(chǎng)景下也很有用（比如瀏覽器的隱私模式）。

200 from disk cache

表示不訪問(wèn)服務(wù)器，直接從硬盤(pán)中讀取緩存。與內(nèi)存相比，硬盤(pán)的讀取速度相對(duì)較慢，但硬盤(pán)緩存持續(xù)的時(shí)間更長(zhǎng)，關(guān)閉進(jìn)程之后，緩存的資源仍然存在。由于硬盤(pán)的容量較大，因此一般用于存儲(chǔ)大文件。

下圖可清晰看出差別：

200 from prefetch cache

在 preload 或 prefetch 的資源加載時(shí)，兩者也是均存儲(chǔ)在 http cache，當(dāng)資源加載完成后，如果資源是可以被緩存的，那么其被存儲(chǔ)在 http cache 中等待后續(xù)使用；如果資源不可被緩存，那么其在被使用前均存儲(chǔ)在 memory cache。

CDN Cache

以騰訊 CDN 為例：X-Cache-Lookup:Hit From MemCache 表示命中 CDN 節(jié)點(diǎn)的內(nèi)存；X-Cache-Lookup:Hit From Disktank 表示命中 CDN 節(jié)點(diǎn)的磁盤(pán)；X-Cache-Lookup:Hit From Upstream 表示沒(méi)有命中 CDN。

整體流程

從上圖能感受到整個(gè)流程，比如常見(jiàn)兩種刷新場(chǎng)景：

當(dāng) F5 刷新網(wǎng)頁(yè)時(shí)，跳過(guò)強(qiáng)緩存，但是會(huì)檢查協(xié)商緩存；
當(dāng) Ctrl + F5 強(qiáng)制刷新頁(yè)面時(shí)，直接從服務(wù)器加載，跳過(guò)強(qiáng)緩存和協(xié)商緩存

其他 Web 緩存策略

IndexDB

IndexedDB 就是瀏覽器提供的本地?cái)?shù)據(jù)庫(kù)，能夠在客戶端存儲(chǔ)可觀數(shù)量的結(jié)構(gòu)化數(shù)據(jù)，并且在這些數(shù)據(jù)上使用索引進(jìn)行高性能檢索的 API。

異步 API 方法調(diào)用完后會(huì)立即返回，而不會(huì)阻塞調(diào)用線程。要異步訪問(wèn)數(shù)據(jù)庫(kù)，要調(diào)用 window 對(duì)象 indexedDB 屬性的 open() 方法。該方法返回一個(gè) IDBRequest 對(duì)象 (IDBOpenDBRequest)；異步操作通過(guò)在 IDBRequest 對(duì)象上觸發(fā)事件來(lái)和調(diào)用程序進(jìn)行通信。

常用異步 API 如下：

在 16 年曾基于 IndexDB 做過(guò)一整套緩存策略，有不錯(cuò)的優(yōu)化效果：

Service Worker

SW 從 2014 年提出的草案到現(xiàn)在已經(jīng)發(fā)展很成熟了，基于 SW 做離線緩存，讓用戶能夠進(jìn)行離線體驗(yàn)，消息推送體驗(yàn)，離線緩存能力涉及到 Cache 和 CacheStorage 的概念，篇幅有限，不展開(kāi)了。

LocalStorage

localStorage 屬性允許你訪問(wèn)一個(gè) Document 源(origin)的對(duì)象 Storage 用于存儲(chǔ)當(dāng)前源的數(shù)據(jù)，除非用戶人為清除(調(diào)用 localStorage api 或者清除瀏覽器數(shù)據(jù))，否則存儲(chǔ)在 localStorage 的數(shù)據(jù)將被長(zhǎng)期保留。

SessionStorage

sessionStorage 屬性允許你訪問(wèn)一個(gè) session Storage 對(duì)象，用于存儲(chǔ)當(dāng)前會(huì)話的數(shù)據(jù)，存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除。頁(yè)面會(huì)話在瀏覽器打開(kāi)期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話。

定義最優(yōu)緩存策略

使用一致的網(wǎng)址：如果您在不同的網(wǎng)址上提供相同的內(nèi)容，將會(huì)多次獲取和存儲(chǔ)該內(nèi)容。注意：URL 區(qū)分大小寫(xiě)！
確定中繼緩存可以緩存哪些資源：對(duì)所有用戶的響應(yīng)完全相同的資源很適合由 CDN 或其他中繼緩存進(jìn)行緩存；
確定每個(gè)資源的最優(yōu)緩存周期：不同的資源可能有不同的更新要求。審查并確定每個(gè)資源適合的 max-age；
確定網(wǎng)站的最佳緩存層級(jí)：對(duì) HTML 文檔組合使用包含內(nèi)容特征碼的資源網(wǎng)址以及短時(shí)間或 no-cache 的生命周期，可以控制客戶端獲取更新的速度；
更新最小化：有些資源的更新比其他資源頻繁。如果資源的特定部分（例如 JS 函數(shù)或一組 CSS 樣式）會(huì)經(jīng)常更新，應(yīng)考慮將其代碼作為單獨(dú)的文件提供。這樣，每次獲取更新時(shí)，剩余內(nèi)容（例如不會(huì)頻繁更新的庫(kù)代碼）可以從緩存中獲取，確保下載的內(nèi)容量最少；
確保服務(wù)器配置或移除 ETag：因?yàn)?Etag 跟服務(wù)器配置有關(guān)，每臺(tái)服務(wù)器的 Etag 都是不同的；
善用 HTML5 的緩存機(jī)制：合理設(shè)計(jì)啟用 LocalStorage、SessionStorage、IndexDB、SW 等存儲(chǔ)，會(huì)給頁(yè)面性能帶來(lái)明顯提升；
結(jié)合 Native 的強(qiáng)大存儲(chǔ)能力：善于利用客戶端能力，定制合適的緩存機(jī)制，打造極致體驗(yàn)。

結(jié)語(yǔ)

通過(guò)了解瀏覽器各種緩存機(jī)制和存儲(chǔ)能力特點(diǎn)，結(jié)合業(yè)務(wù)制定合適的緩存策略，善用緩存是基本功，可以用于時(shí)常審查負(fù)責(zé)的業(yè)務(wù)，可能就會(huì)發(fā)現(xiàn)個(gè)別業(yè)務(wù)并沒(méi)有運(yùn)用到位，共勉。

決這個(gè)問(wèn)題, 有兩個(gè)可用的方法, 使用HTML meta標(biāo)簽和使用HTTP頭。

1．使用HTML meta標(biāo)簽

阻止緩存頁(yè)面最常用的方法是使用HTML meta標(biāo)簽：

<meta http-equiv="expires" content="Wed,15 Jul 2023 07:30:28 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>

已經(jīng)傳遞到Expires meta標(biāo)簽的插入日期告訴瀏覽器，緩存的頁(yè)面拷貝總是過(guò)期的。遇到此標(biāo)簽后, 瀏覽器通常不會(huì)緩存頁(yè)面。雖然Pragma: no-cache meta標(biāo)簽并不是保證，但它卻是大多數(shù)網(wǎng)絡(luò)瀏覽器遵從的受到良好支持的約定。

2．使用HTTP頭

阻止緩存頁(yè)面更好的辦法是, 應(yīng)用header()函數(shù), 使用HTTP本身協(xié)議生成與上面等價(jià)的兩個(gè)HTML meta標(biāo)簽：

<?php
    header('Expires:Wed,15 Jul 2023 07:30:28 GMT');
    header('Pragma:no-cache');
?>

可更進(jìn)一步, 可使用HTTP1.1的瀏覽器所支持的Cache-Control頭：

一步、按下Win+X組合鍵，喚出隱藏菜單，點(diǎn)擊里面的“設(shè)備管理器”。

軟件版本：
軟件大小：
軟件授權(quán)：
適用平臺(tái)：
http://dl.pconline.com.cn/download/363847.html

第二步、在Win10設(shè)備管理器窗口，點(diǎn)開(kāi)磁盤(pán)驅(qū)動(dòng)器項(xiàng)目，然后對(duì)著電腦硬盤(pán)單擊鼠標(biāo)右鍵，點(diǎn)擊選擇菜單中的“屬性”。

第三步、在硬盤(pán)屬性對(duì)話框，點(diǎn)擊選擇“策略”選項(xiàng)卡，將“啟用此設(shè)備上的寫(xiě)入緩存”更具個(gè)人需要設(shè)置成勾選，或取消勾選后，點(diǎn)擊底部“確定”即可。

溫馨提示：勾選“啟用此設(shè)備上的寫(xiě)入緩存”是啟用該功能，取消勾選是關(guān)閉。

在線咨詢

上一篇：PyScript：讓Python在HTML中運(yùn)行
下一篇：WordPress主題開(kāi)發(fā)教程二十五：留言模板

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商