本文是向大家介紹瀏覽器緩存機制衙熔，緩存是解決性能問題的重要手段，使用緩存的好處很多搅荞，除了能讓瀏覽器更快地加載網(wǎng)絡(luò)資源之外红氯，還會帶來其他好處，比如節(jié)省網(wǎng)絡(luò)流量和帶寬咕痛，以及減少服務(wù)端的負(fù)擔(dān)痢甘。

一.什么是緩存

當(dāng)我們第一次訪問網(wǎng)站的時候，電腦會把網(wǎng)站上的圖片和數(shù)據(jù)下載到電腦上茉贡，當(dāng)我們再次訪問該網(wǎng)站的時候塞栅，網(wǎng)站就會從電腦中直接加載出來，這就是緩存腔丧。

緩存的好處

1. 緩解服務(wù)器壓力放椰，不用每次都去請求某些數(shù)據(jù)了。

2.提升性能愉粤，打開本地資源肯定會比請求服務(wù)器來的快砾医。

3.減少帶寬消耗，當(dāng)我們使用緩存時衣厘，只會產(chǎn)生很小的網(wǎng)絡(luò)消耗如蚜，至于為什么打開本地資源也會產(chǎn)生網(wǎng)絡(luò)消耗，下面會有說明头滔。

Web緩存種類

數(shù)據(jù)庫緩存怖亭，CDN緩存涎显，代理服務(wù)器緩存坤检，瀏覽器緩存。

1.數(shù)據(jù)庫緩存：當(dāng)web應(yīng)用關(guān)系復(fù)雜期吓，數(shù)據(jù)表越來越多時早歇，可以將查詢后的數(shù)據(jù)放到內(nèi)存中進(jìn)行緩存，下次再查詢時讨勤，就直接從緩存中讀取箭跳，從而提高響應(yīng)速度。

2.CDN緩存：當(dāng)我們發(fā)送一個web請求的時候潭千，cdn會幫我們計算去哪得到這些內(nèi)容的最快谱姓，所以可以將大家經(jīng)常訪問的內(nèi)容放到cdn，加快響應(yīng)速度刨晴。

3.代理服務(wù)器緩存：和瀏覽器緩存性質(zhì)相似屉来，但是代理服務(wù)器緩存面向的群體更廣路翻，規(guī)模更大。一般為大量用戶服務(wù)茄靠，同一個副本會被應(yīng)用多次茂契，所以在減少響應(yīng)時間和帶寬上很有效果

4.瀏覽器緩存：每個瀏覽器都實現(xiàn)了http緩存，我們通過瀏覽器使用http協(xié)議與服務(wù)端進(jìn)行交互的時候慨绳，瀏覽器會根據(jù)一套與服務(wù)器約定的規(guī)則進(jìn)行緩存工作掉冶，當(dāng)我們在瀏覽器中點擊前進(jìn)和后退按鈕，利用的就是瀏覽器的緩存機制脐雪。

所謂瀏覽器緩存其實就是指在本地使用的計算機中開辟一個內(nèi)存區(qū)厌小，同時也開辟一個硬盤區(qū)作為數(shù)據(jù)傳輸?shù)木彌_區(qū)，然后用這個緩沖區(qū)來暫時保存用戶以前訪問過的信息战秋。

二.緩存的過程

根據(jù)是否需要向服務(wù)器重新發(fā)起 HTTP 請求召锈，將緩存過程分為兩個部分：強緩存和協(xié)商緩存。

強緩存：瀏覽器直接從本地緩存中獲取數(shù)據(jù)获询，不與服務(wù)器進(jìn)行交互涨岁。

協(xié)商緩存：瀏覽器發(fā)送請求到服務(wù)器，服務(wù)器判定是否可使用本地緩存吉嚣。

兩種緩存方式最終使用的都是本地緩存梢薪；前者無需與服務(wù)器交互，后者需要尝哆。

1.強緩存

強制緩存是在瀏覽器加載資源的時候秉撇，先檢查緩存時間是否過期，若未過期則直接從緩存中查找請求結(jié)果秋泄，如果緩存時間過期或不存在該緩存結(jié)果琐馆，則向服務(wù)端發(fā)起請求。

設(shè)置緩存時間的方法有兩種（響應(yīng)頭字段）：

Expires（HTTP/1.0）

Cache-Control（HTTP/1.1）

Expires

HTTP/1.0 中使用響應(yīng)頭部字段 Expires 來設(shè)置緩存過期時間恒序∈蒴铮客戶端第一次請求時，服務(wù)端會在響應(yīng)頭部添加 Expires 字段歧胁。當(dāng)瀏覽器再次發(fā)送請求時滋饲，先會對比當(dāng)前時間和 Expires 對應(yīng)的時間，如果當(dāng)前時間早于 Expires 時間喊巍，那么直接使用緩存屠缭；反之，需要再次發(fā)送請求崭参。

expires: Sun, 24 Jul 2022 15:33:14 GMT

上述 Expires 信息告訴瀏覽器：在 2022.07.24 日之前呵曹，可以直接使用該請求的緩存。

問題：

服務(wù)端和瀏覽器的時間可能不同，導(dǎo)致緩存過期時間出現(xiàn)偏差

客戶端可以通過修改系統(tǒng)時間來繼續(xù)使用緩存或提前使緩存失效

為了解決這個問題奄喂，HTTP/1.1 提出了 Cache-Control 響應(yīng)頭部字段之剧。

Cache-Control

它的常用值有下面幾個：

no-cache：表示使用協(xié)商緩存，即每次使用緩存前必須向服務(wù)端確認(rèn)緩存資源是否更新砍聊；

no-store：禁止瀏覽器以及所有中間緩存存儲響應(yīng)內(nèi)容背稼；

public：公有緩存，表示可以被代理服務(wù)器緩存玻蝌，可以被多個用戶共享蟹肘；

private：私有緩存，不能被代理服務(wù)器緩存俯树，不可以被多個用戶共享帘腹；

max-age：以秒為單位的數(shù)值，表示緩存的有效時間许饿；

must-revalidate：當(dāng)緩存過期時阳欲，需要去服務(wù)端校驗緩存的有效性。

cache-control: max-age=31536000

此 Cache-Control 信息告訴瀏覽器該緩存為公有緩存陋率，有效期 1 年球化。

* 強制緩存中，cache-control 的 max-age 優(yōu)先級高于 Expires

2.協(xié)商緩存

協(xié)商緩存不指定緩存的有效時間瓦糟，而是在請求時直接發(fā)送資源標(biāo)識到服務(wù)端確認(rèn)緩存是否需要更新筒愚，如果請求響應(yīng)返回的 HTTP 狀態(tài)為 304，則表示緩存仍然有效菩浙；否則返回狀態(tài)碼 200 巢掺、最新的資源和最新的資源標(biāo)識。

資源標(biāo)識（在 Response Header 中）有兩種：

Last-Modified：資源的最后修改時間

Etag：資源的唯一標(biāo)識（一個字符串）

Last-Modified 和 If-Modified-Since:

服務(wù)端通過響應(yīng)頭部字段 Last-Modified 和請求頭部字段 If-Modified-Since 比對雙方資源的修改時間劲蜻，來確定緩存是否需要更新陆淀。具體工作流程如下：

瀏覽器第一次請求資源，服務(wù)端在返回資源的響應(yīng)頭中加入 Last-Modified 字段先嬉，表示這個資源在服務(wù)端上的最近修改時間轧苫；

當(dāng)瀏覽器再次向服務(wù)端請求該資源時，請求頭部帶上之前服務(wù)端返回的 Last-Modified坝初，這個請求頭叫 If-Modified-Since浸剩；

服務(wù)端再次收到請求钾军，根據(jù) If-Modified-Since 的值鳄袍，判斷相關(guān)資源是否有變化，如果沒有吏恭，則返回 304 Not Modified拗小，瀏覽器使用資源緩存值；否則返回資源內(nèi)容樱哼，且更新 Last-Modified 響應(yīng)頭內(nèi)容哀九。

這種方式雖然能判斷緩存是否失效剿配，但也存在三個問題：

精度問題：Last-Modified 的時間精度為秒，如果在 1 秒內(nèi)發(fā)生修改阅束，那么緩存判斷會失效

準(zhǔn)度問題：如果一個文件被修改后又被還原呼胚，內(nèi)容沒有發(fā)生變化，卻仍然需要重新請求

服務(wù)器問題：某些服務(wù)器不能精確的得到文件的最后修改時間

因此我們需要 ETag

ETag 和 If-None-Match

為了解決精度問題和準(zhǔn)度問題息裸，HTTP 提供了另一種依賴于文件哈希值的精確判斷緩存的方式：響應(yīng)頭部字段 ETag 和請求頭部字段 If-None-Match蝇更。具體工作流程如下：

瀏覽器第一次請求資源，服務(wù)端在返響應(yīng)頭中加入 Etag 字段呼盆，Etag 字段值為該資源的哈希值年扩；

當(dāng)瀏覽器再次跟服務(wù)端請求這個資源時，在請求頭上加上 If-None-Match访圃，值為之前響應(yīng)頭部字段 ETag 的值厨幻；

服務(wù)端再次收到請求，將請求頭 If-None-Match 字段的值和響應(yīng)資源的哈希值進(jìn)行比對腿时，如果兩個值相同况脆，則說明資源沒有變化，返回 304 Not Modified批糟；否則就正常返回資源內(nèi)容漠另，無論是否發(fā)生變化，都會將計算出的哈希值放入響應(yīng)頭部的 ETag 字段中跃赚。

這種緩存比較的方式也會存在一些問題笆搓，具體表現(xiàn)在以下兩個方面：

計算成本。對于大文件而言纬傲，讀取完整的文件內(nèi)容生成哈希值開銷較大满败；只讀取文件部分內(nèi)容，又容易判斷出錯叹括。

計算誤差算墨。不同服務(wù)端可能會采用不同的哈希值計算方式。所以同一個資源在兩臺服務(wù)端產(chǎn)生的 Etag 可能是不相同的汁雷。對于使用服務(wù)器集群來處理請求的網(wǎng)站來說净嘀，使用 Etag 的緩存命中率會有所降低。

兩者中會優(yōu)先使用 Etag：

Last-Modified 只能精確到秒級

如果資源被重復(fù)生成侠讯，而內(nèi)容不變挖藏，Etag 更加精準(zhǔn)

3.總結(jié)

緩存的優(yōu)先級：

強制緩存的優(yōu)先級高于協(xié)商緩存:

強制緩存中：cache-control 的 max-age 優(yōu)先級高于 Expires

協(xié)商緩存中：Etag 優(yōu)先級比 Last-Modified 高。

用戶行為：

禁用緩存：

服務(wù)器禁用緩存：

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

Cache-Control: no-cache

Cache-Control: no-store

瀏覽器禁用緩存：

改變 url厢漩，加上?xi=xixi

設(shè)置請求 header

三.緩存的位置

強緩存我們會把資源放到memory cache 和 disk cache中膜眠，那什么資源放在memory cache，什么資源放在disk cache中？

圖像和網(wǎng)頁等資源主要緩存在disk cache宵膨，操作系統(tǒng)緩存文件等資源大部分都會緩存在memory cache中架谎。具體操作瀏覽器自動分配，看誰的資源利用率不高就分給誰辟躏。

可以看到memory cache請求時間都是0ms谷扣。

查找瀏覽器緩存時會按順序查找: Service Worker-->Memory Cache-->Disk Cache-->Push Cache。

1. Service Worker

是運行在瀏覽器背后的獨立線程捎琐，一般可以用來實現(xiàn)緩存功能抑钟。使用 Service Worker的話，傳輸協(xié)議必須為 HTTPS野哭。因為 Service Worker 中涉及到請求攔截在塔，所以必須使用 HTTPS 協(xié)議來保障安全。Service Worker 的緩存與瀏覽器其他內(nèi)建的緩存機制不同拨黔，它可以讓我們自由控制緩存哪些文件蛔溃、如何匹配緩存、如何讀取緩存篱蝇，并且緩存是持續(xù)性的贺待。

2. Memory Cache

內(nèi)存中的緩存，主要包含的是當(dāng)前中頁面中已經(jīng)抓取到的資源零截，例如頁面上已經(jīng)下載的樣式麸塞、腳本、圖片等涧衙。讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤快哪工，內(nèi)存緩存雖然讀取高效，可是緩存持續(xù)性很短弧哎，會隨著進(jìn)程的釋放而釋放雁比。一旦我們關(guān)閉 Tab 頁面，內(nèi)存中的緩存也就被釋放了撤嫩。

3. Disk Cache

存儲在硬盤中的緩存偎捎，讀取速度慢點，但是什么都能存儲到磁盤中序攘，比之 Memory Cache 勝在容量和存儲時效性上茴她。

在所有瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的程奠。它會根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存丈牢，哪些資源可以不請求直接使用，哪些資源已經(jīng)過期需要重新請求梦染。并且即使在跨站點的情況下赡麦，相同地址的資源一旦被硬盤緩存下來朴皆，就不會再次去請求數(shù)據(jù)帕识。絕大部分的緩存都來自 Disk Cache泛粹。

memory cache 要比 disk cache 快的多。舉個例子：從遠(yuǎn)程 web 服務(wù)器直接提取訪問文件可能需要500毫秒(半秒)肮疗，那么磁盤訪問可能需要10-20毫秒晶姊，而內(nèi)存訪問只需要100納秒，更高級的還有 L1緩存訪問(最快和最小的 CPU 緩存)只需要0.5納秒伪货。

prefetch cache(預(yù)取緩存)

link標(biāo)簽上帶了prefetch们衙，再次加載會出現(xiàn)。

prefetch是預(yù)加載的一種方式碱呼，被標(biāo)記為prefetch的資源蒙挑，將會被瀏覽器在空閑時間加載。

4. Push Cache

Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容愚臀，當(dāng)以上三種緩存都沒有命中時忆蚀，它才會被使用。它只在會話（Session）中存在姑裂，一旦會話結(jié)束就被釋放馋袜，并且緩存時間也很短暫，在Chrome瀏覽器中只有5分鐘左右舶斧，同時它也并非嚴(yán)格執(zhí)行HTTP頭中的緩存指令欣鳖。