一. 瀏覽器緩存：

簡單的說，瀏覽器緩存就是把一個(gè)已經(jīng)請求過的Web資源（如html頁面退个，圖片桑包，js南蓬，數(shù)據(jù)等）存儲到瀏覽器中，當(dāng)有新請求時(shí)哑了，會根據(jù)先查詢緩存,如果沒有緩存再去請求資源赘方。

二. 為什么使用緩存：

緩存可以說是性能優(yōu)化中常規(guī)且簡單高效的一種方式了。具體體現(xiàn)在以下幾方面：

• 1.減少網(wǎng)絡(luò)帶寬消耗

  無論是網(wǎng)站運(yùn)營者還是用戶弱左，帶寬 = money窄陡。當(dāng)命中緩存時(shí)Web緩存時(shí)，可以節(jié)約請求科贬，可以有效的降低運(yùn)營成本泳梆。

• 2.降低服務(wù)器壓力

  網(wǎng)絡(luò)資源設(shè)定有效期后，資源請求可以重復(fù)使用本地的緩存榜掌，減少對源服務(wù)器的請求优妙，從而間接降低服務(wù)器的壓力。同時(shí)憎账，搜索引擎的爬蟲機(jī)器人也能根據(jù)過期機(jī)制降低爬取的頻率套硼，也能有效降低服務(wù)器的壓力。

• 3.減少網(wǎng)絡(luò)延遲胞皱，加快頁面打開速度

  命中緩存后邪意，能在第一時(shí)間解析資源文件，避免了請求響應(yīng)的時(shí)間反砌，從而加快頁面打開速度雾鬼，達(dá)到更好的體驗(yàn)。

三. 緩存機(jī)制：

瀏覽器緩存機(jī)制

瀏覽器緩存：

強(qiáng)緩存優(yōu)先于協(xié)商緩存進(jìn)行宴树，若強(qiáng)制緩存(Expires和Cache-Control)生效則直接使用緩存策菜，若不生效則進(jìn)行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協(xié)商緩存由服務(wù)器決定是否使用緩存酒贬，若協(xié)商緩存失效又憨，那么代表該請求的緩存失效，返回200锭吨，重新返回資源和緩存標(biāo)識蠢莺，再存入瀏覽器緩存中；生效則返回304零如，繼續(xù)使用緩存 躏将。具體流程圖如下：

緩存機(jī)制

如果什么緩存策略都沒設(shè)置锄弱，那么瀏覽器會怎么處理？
對于這種情況耸携，瀏覽器會采用一個(gè)啟發(fā)式的算法棵癣，通常會取響應(yīng)頭中的 Date 減去 Last-Modified 值的 10% 作為緩存時(shí)間。

緩存位置：

瀏覽器查找緩存時(shí) 夺衍，會依次從以下四個(gè)位置去查找狈谊，當(dāng)均未命中緩存時(shí)，則會發(fā)起相關(guān)資源的請求沟沙。

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

Service Worker

Service workers 本質(zhì)上充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器河劝，也可以在網(wǎng)絡(luò)可用時(shí)作為瀏覽器和網(wǎng)絡(luò)間的代理。它采用JavaScript控制關(guān)聯(lián)的頁面或者網(wǎng)站矛紫，攔截并修改訪問和資源請求赎瞎，細(xì)粒度地緩存資源。

Service Worker 實(shí)現(xiàn)緩存功能一般分為三個(gè)步驟：
1. 注冊 Service Worker颊咬，監(jiān)聽 install 事件
2. 調(diào)用 fetch 獲取資源务甥，緩存資源
3. 下次訪問時(shí)，可通過攔截請求的方式查詢是否存在緩存喳篇。

訪問m.weibo.com示例

Memory Cache

Memory Cache 也就是內(nèi)存中的緩存敞临，主要包含的是當(dāng)前中頁面中已經(jīng)抓取到的資源,例如頁面上已經(jīng)下載的樣式、腳本麸澜、圖片等挺尿。讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤快,內(nèi)存緩存雖然讀取高效，可是緩存持續(xù)性很短炊邦，會隨著進(jìn)程的釋放而釋放编矾。 當(dāng)我們訪問過頁面以后，再次刷新頁面馁害，可以發(fā)現(xiàn)很多數(shù)據(jù)都來自于內(nèi)存緩存窄俏。一旦我們關(guān)閉 Tab 頁面，內(nèi)存中的緩存也就被釋放了碘菜。

訪問weibo.com示例

Disk Cache

Disk Cache 即硬盤中的緩存裆操，讀取速度稍慢，但是什么都能存儲到磁盤中炉媒，相比Memory Cache 勝在容量和存儲時(shí)效性上。
在所有瀏覽器緩存中昆烁，Disk Cache 覆蓋面基本是最大的吊骤。它會根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請求直接使用静尼，哪些資源已經(jīng)過期需要重新請求白粉。并且即使在跨站點(diǎn)的情況下传泊，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數(shù)據(jù)鸭巴。絕大部分的緩存都來自 Disk Cache眷细，關(guān)于 HTTP 的協(xié)議頭中的緩存字段，我們會在下文進(jìn)行詳細(xì)介紹鹃祖。

瀏覽器會把哪些文件丟進(jìn)內(nèi)存中溪椎？哪些丟進(jìn)硬盤中？關(guān)于這點(diǎn)恬口，網(wǎng)上說法不一校读，不過以下觀點(diǎn)比較靠得住：

• 對于大文件來說祖能，大概率是不存儲在內(nèi)存中的歉秫，反之優(yōu)先
• 當(dāng)前系統(tǒng)內(nèi)存使用率高的話，文件優(yōu)先存儲進(jìn)硬盤

Push Cache

Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容养铸，當(dāng)以上三種緩存都沒有命中時(shí)雁芙，它才會被使用。它只在會話（Session）中存在钞螟，一旦會話結(jié)束就被釋放兔甘，并且緩存時(shí)間也很短暫，在Chrome瀏覽器中只有5分鐘左右筛圆，同時(shí)它也并非嚴(yán)格執(zhí)行HTTP頭中的緩存指令裂明。

• 所有的資源都能被推送，并且能夠被緩存,但是 Edge 和 Safari 瀏覽器支持相對比較差
• 可以推送 no-cache 和 no-store 的資源
• 一旦連接被關(guān)閉太援，Push Cache 就被釋放
• 多個(gè)頁面可以使用同一個(gè)HTTP/2的連接闽晦，也就可以使用同一個(gè)Push Cache。這主要還是依賴瀏覽器的實(shí)現(xiàn)而定提岔，出于對性能的考慮仙蛉，有的瀏覽器會對相同域名但不同的tab標(biāo)簽使用同一個(gè)HTTP連接。
• Push Cache 中的緩存只能被使用一次
• 瀏覽器可以拒絕接受已經(jīng)存在的資源推送
• 你可以給其他域名推送資源

四.緩存過程

瀏覽器與服務(wù)器通信的方式為應(yīng)答模式碱蒙，即是：瀏覽器發(fā)起HTTP請求 – 服務(wù)器響應(yīng)該請求荠瘪，那么瀏覽器怎么確定一個(gè)資源該不該緩存，如何去緩存呢赛惩？瀏覽器第一次向服務(wù)器發(fā)起該請求后拿到請求結(jié)果后哀墓，將請求結(jié)果和緩存標(biāo)識存入瀏覽器緩存，瀏覽器對于緩存的處理是根據(jù)第一次請求資源時(shí)返回的響應(yīng)頭來確定的喷兼。具體過程如下圖：

第一次發(fā)起HTTP請求

• 瀏覽器每次發(fā)起請求篮绰，都會先在瀏覽器緩存中查找該請求的結(jié)果以及緩存標(biāo)識
• 瀏覽器每次拿到返回的請求結(jié)果都會將該結(jié)果和緩存標(biāo)識存入瀏覽器緩存中

以上兩點(diǎn)結(jié)論就是瀏覽器緩存機(jī)制的關(guān)鍵，它確保了每個(gè)請求的緩存存入與讀取季惯，只要我們再理解瀏覽器緩存的使用規(guī)則吠各，那么所有的問題就迎刃而解了臀突，本文也將圍繞著這點(diǎn)進(jìn)行詳細(xì)分析。為了方便大家理解贾漏，這里我們根據(jù)是否需要向服務(wù)器重新發(fā)起HTTP請求將緩存過程分為兩個(gè)部分候学，分別是強(qiáng)緩存和協(xié)商緩存。

五.強(qiáng)緩存

強(qiáng)緩存：不會向服務(wù)器發(fā)送請求纵散，直接從緩存中讀取資源梳码，在chrome控制臺的Network選項(xiàng)中可以看到該請求返回200的狀態(tài)碼，并且Size顯示from disk cache或from memory cache困食。強(qiáng)緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Expires 和 Cache-Control边翁。

Expires

緩存過期時(shí)間，用來指定資源到期的時(shí)間硕盹，是服務(wù)器端的具體的時(shí)間點(diǎn)符匾。也就是說，Expires=max-age + 請求時(shí)間瘩例，需要和Last-modified結(jié)合使用啊胶。Expires是Web服務(wù)器響應(yīng)消息頭字段，在響應(yīng)http請求時(shí)告訴瀏覽器在過期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)垛贤，而無需再次請求焰坪。
Expires 是 HTTP/1 的產(chǎn)物，受限于本地時(shí)間聘惦，如果修改了本地時(shí)間某饰，可能會造成緩存失效，需要再次請求善绎。

Cache-Control

在HTTP/1.1中黔漂，Cache-Control是最重要的規(guī)則，主要用于控制網(wǎng)頁緩存禀酱。比如當(dāng)Cache-Control:max-age=300時(shí)炬守，則代表在這個(gè)請求正確返回時(shí)間（瀏覽器也會記錄下來）的5分鐘內(nèi)再次加載資源，就會命中強(qiáng)緩存剂跟。
Cache-Control 可以在請求頭或者響應(yīng)頭中設(shè)置减途，并且可以組合使用多種指令：

Cache-Control

• public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）。具體來說響應(yīng)可被任何中間節(jié)點(diǎn)緩存曹洽，如 Browser <-- proxy1 <-- proxy2 <-- Server鳍置，中間的proxy可以緩存資源，比如下次再請求同一資源proxy1直接把自己緩存的東西給 Browser 而不再向proxy2要送淆。

• private：所有內(nèi)容只有客戶端可以緩存墓捻，Cache-Control的默認(rèn)取值。具體來說，表示中間節(jié)點(diǎn)不允許緩存砖第，對于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 會老老實(shí)實(shí)把Server 返回的數(shù)據(jù)發(fā)送給proxy1,自己不緩存任何數(shù)據(jù)环凿。當(dāng)下次Browser再次請求時(shí)proxy會做好請求轉(zhuǎn)發(fā)而不是自作主張給自己緩存的數(shù)據(jù)梧兼。
  no-cache：客戶端緩存內(nèi)容，是否使用緩存則需要經(jīng)過協(xié)商緩存來驗(yàn)證決定智听。表示不使用 Cache-Control的緩存控制方式做前置驗(yàn)證羽杰，而是使用 Etag 或者Last-Modified字段來控制緩存。需要注意的是到推，no-cache這個(gè)名字有一點(diǎn)誤導(dǎo)考赛。設(shè)置了no-cache之后，并不是說瀏覽器就不再緩存數(shù)據(jù)莉测，只是瀏覽器在使用緩存數(shù)據(jù)時(shí)颜骤，需要先確認(rèn)一下數(shù)據(jù)是否還跟服務(wù)器保持一致。

• no-store：所有內(nèi)容都不會被緩存捣卤，即不使用強(qiáng)制緩存忍抽，也不使用協(xié)商緩存

• max-age：max-age=xxx (xxx is numeric)表示緩存內(nèi)容將在xxx秒后失效
  s-maxage（單位為s)：同max-age作用一樣，只在代理服務(wù)器中生效（比如CDN緩存）董朝。比如當(dāng)s-maxage=60時(shí)鸠项，在這60秒中，即使更新了CDN的內(nèi)容子姜，瀏覽器也不會進(jìn)行請求祟绊。max-age用于普通緩存，而s-maxage用于代理緩存哥捕。s-maxage的優(yōu)先級高于max-age牧抽。如果存在s-maxage，則會覆蓋掉max-age和Expires header扭弧。

• max-stale：能容忍的最大過期時(shí)間阎姥。max-stale指令標(biāo)示了客戶端愿意接收一個(gè)已經(jīng)過期了的響應(yīng)。如果指定了max-stale的值鸽捻，則最大容忍時(shí)間為對應(yīng)的秒數(shù)呼巴。如果沒有指定，那么說明瀏覽器愿意接收任何age的響應(yīng)（age表示響應(yīng)由源站生成或確認(rèn)的時(shí)間與當(dāng)前時(shí)間的差值）御蒲。

• min-fresh：能夠容忍的最小新鮮度衣赶。min-fresh標(biāo)示了客戶端不愿意接受新鮮度不多于當(dāng)前的age加上min-fresh設(shè)定的時(shí)間之和的響應(yīng)。

Cache-Control

從圖中我們可以看到厚满，我們可以將多個(gè)指令配合起來一起使用府瞄，達(dá)到多個(gè)目的。比如說我們希望資源能被緩存下來，并且是客戶端和代理服務(wù)器都能緩存遵馆，還能設(shè)置緩存失效時(shí)間等等鲸郊。

Expires和Cache-Control兩者對比

其實(shí)這兩者差別不大，區(qū)別就在于 Expires 是http1.0的產(chǎn)物货邓，Cache-Control是http1.1的產(chǎn)物秆撮，兩者同時(shí)存在的話，Cache-Control優(yōu)先級高于Expires换况；在某些不支持HTTP1.1的環(huán)境下职辨，Expires就會發(fā)揮用處。所以Expires其實(shí)是過時(shí)的產(chǎn)物戈二，現(xiàn)階段它的存在只是一種兼容性的寫法舒裤。
強(qiáng)緩存判斷是否緩存的依據(jù)來自于是否超出某個(gè)時(shí)間或者某個(gè)時(shí)間段，而不關(guān)心服務(wù)器端文件是否已經(jīng)更新觉吭，這可能會導(dǎo)致加載文件不是服務(wù)器端最新的內(nèi)容腾供，那我們?nèi)绾潍@知服務(wù)器端內(nèi)容是否已經(jīng)發(fā)生了更新呢？此時(shí)我們需要用到協(xié)商緩存策略亏栈。

五.協(xié)商緩存

協(xié)商緩存:強(qiáng)制緩存失效后台腥，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程绒北，主要有以下兩種情況：

• 協(xié)商緩存生效黎侈，返回304和Not Modified

  
  
  304和Not Modified

• 協(xié)商緩存失效，返回200和請求結(jié)果

  
  
  200

協(xié)商緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Last-Modified 和 ETag 闷游。

• Last-Modified和If-Modified-Since

瀏覽器在第一次訪問資源時(shí)峻汉，服務(wù)器返回資源的同時(shí)，在response header中添加 Last-Modified的header脐往，值是這個(gè)資源在服務(wù)器上的最后修改時(shí)間休吠，瀏覽器接收后緩存文件和header；

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

瀏覽器下一次請求這個(gè)資源业簿，瀏覽器檢測到有 Last-Modified這個(gè)header瘤礁，于是添加If-Modified-Since這個(gè)header，值就是Last-Modified中的值梅尤；服務(wù)器再次收到這個(gè)資源請求柜思，會根據(jù) If-Modified-Since 中的值與服務(wù)器中這個(gè)資源的最后修改時(shí)間對比，如果沒有變化巷燥，返回304和空的響應(yīng)體赡盘，直接從緩存讀取，如果If-Modified-Since的時(shí)間小于服務(wù)器中這個(gè)資源的最后修改時(shí)間缰揪，說明文件有更新陨享，于是返回新的資源文件和200

但是 Last-Modified 存在一些弊端：

• 如果本地打開緩存文件，即使沒有對文件進(jìn)行修改，但還是會造成 Last-Modified 被修改抛姑，服務(wù)端不能命中緩存導(dǎo)致發(fā)送相同的資源
• 因?yàn)?Last-Modified 只能以秒計(jì)時(shí)湃望，如果在不可感知的時(shí)間內(nèi)修改完成文件收奔，那么服務(wù)端會認(rèn)為資源還是命中了昧甘，不會返回正確的資源

既然根據(jù)文件修改時(shí)間來決定是否緩存尚有不足件豌，能否可以直接根據(jù)文件內(nèi)容是否修改來決定緩存策略？所以在 HTTP / 1.1 出現(xiàn)了 ETag 和If-None-Match

• ETag和If-None-Match

Etag是服務(wù)器響應(yīng)請求時(shí)喷斋，返回當(dāng)前資源文件的一個(gè)唯一標(biāo)識(由服務(wù)器生成)，只要資源有變化蒜茴，Etag就會重新生成星爪。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請求時(shí)，會將上一次返回的Etag值放到request header里的If-None-Match里粉私，服務(wù)器只需要比較客戶端傳來的If-None-Match跟自己服務(wù)器上該資源的ETag是否一致顽腾，就能很好地判斷資源相對客戶端而言是否被修改過了。如果服務(wù)器發(fā)現(xiàn)ETag匹配不上诺核，那么直接以常規(guī)GET 200回包形式將新的資源（當(dāng)然也包括了新的ETag）發(fā)給客戶端抄肖；如果ETag是一致的，則直接返回304知會客戶端直接使用本地緩存即可窖杀。

ETag和If-None-Match

兩者之間對比：

首先在精確度上漓摩，Etag要優(yōu)于Last-Modified。

• Last-Modified的時(shí)間單位是秒入客，如果某個(gè)文件在1秒內(nèi)改變了多次管毙，那么他們的Last-Modified其實(shí)并沒有體現(xiàn)出來修改，但是Etag每次都會改變確保了精度桌硫；如果是負(fù)載均衡的服務(wù)器夭咬，各個(gè)服務(wù)器生成的Last-Modified也有可能不一致。

• 第二在性能上铆隘，Etag要遜于Last-Modified卓舵，畢竟Last-Modified只需要記錄時(shí)間，而Etag需要服務(wù)器通過算法來計(jì)算出一個(gè)hash值膀钠。

• 第三在優(yōu)先級上掏湾，服務(wù)器校驗(yàn)優(yōu)先考慮Eta

六.實(shí)際場景應(yīng)用緩存策略

1.頻繁變動(dòng)的資源

Cache-Control: no-cache

對于頻繁變動(dòng)的資源，首先需要使用Cache-Control: no-cache 使瀏覽器每次都請求服務(wù)器托修，然后配合 ETag 或者 Last-Modified 來驗(yàn)證資源是否有效忘巧。這樣的做法雖然不能節(jié)省請求數(shù)量，但是能顯著減少響應(yīng)數(shù)據(jù)大小睦刃。

2.不常變化的資源

Cache-Control: max-age=31536000

通常在處理這類資源時(shí)砚嘴，給它們的 Cache-Control 配置一個(gè)很大的 max-age=31536000 (一年)，這樣瀏覽器之后請求相同的 URL 會命中強(qiáng)制緩存。而為了解決更新的問題际长，就需要在文件名(或者路徑)中添加 hash耸采， 版本號等動(dòng)態(tài)字符，之后更改動(dòng)態(tài)字符工育，從而達(dá)到更改引用 URL 的目的虾宇，讓之前的強(qiáng)制緩存失效 (其實(shí)并未立即失效，只是不再使用了而已)如绸。
在線提供的類庫 (如 jquery-3.3.1.min.js, lodash.min.js 等) 均采用這個(gè)模式

七.影響緩存的行為

所謂用戶行為對瀏覽器緩存的影響嘱朽，指的就是用戶在瀏覽器如何操作時(shí)，會觸發(fā)怎樣的緩存策略怔接。主要有 3 種：

• 打開網(wǎng)頁搪泳，地址欄輸入地址： 查找 disk cache 中是否有匹配。如有則使用扼脐；如沒有則發(fā)送網(wǎng)絡(luò)請求岸军。
• 普通刷新 (F5)：因?yàn)?TAB 并沒有關(guān)閉，因此 memory cache 是可用的瓦侮，會被優(yōu)先使用(如果匹配的話)艰赞。其次才是 disk cache。
• 強(qiáng)制刷新 (Ctrl + F5)：瀏覽器不使用緩存肚吏，因此發(fā)送的請求頭部均帶有 Cache-control: no-cache(為了兼容方妖，還帶了 Pragma: no-cache),服務(wù)器直接返回 200 和最新內(nèi)容。