對(duì)于web應(yīng)用來(lái)說(shuō)，它是提升頁(yè)面性能同時(shí)減少服務(wù)器壓力的利器。

• 瀏覽器緩存過(guò)程

  1. 瀏覽器第一次加載資源，服務(wù)器返回200，瀏覽器將資源文件從服務(wù)器上請(qǐng)求下載下來(lái)，并把response header及該請(qǐng)求的返回時(shí)間一并緩存；
  2. 下一次加載資源時(shí)，先比較當(dāng)前時(shí)間和上一次返回200的時(shí)間差，沒(méi)有超過(guò)cache-control設(shè)置的max-age（如果服務(wù)器不支持http1.1,則用expires判斷是否過(guò)期），則沒(méi)有過(guò)期，命中強(qiáng)緩存，不發(fā)送請(qǐng)求直接從本地緩存讀取該文件。如果過(guò)期，則向服務(wù)器發(fā)送header帶有if-None-Match和if-Modified-Since的請(qǐng)求；
  3. 服務(wù)器收到請(qǐng)求后，優(yōu)先根據(jù)Etag的值判斷被請(qǐng)求的文件有沒(méi)有做修改，Etag值一致則沒(méi)有修改，命中協(xié)商緩存，返回304；如果不一致則有改動(dòng)，直接返回新的資源文件帶上新的Etag值并返回200；
  4. 如果服務(wù)器收到的請(qǐng)求沒(méi)有Etag值，則將if-Modified-Since和被請(qǐng)求文件的最后修改時(shí)間做比較，一致則命中協(xié)商緩存，返回304；不一致則返回新的last-Modified和文件返回200。

• 瀏覽器緩存類(lèi)型分為 ==強(qiáng)緩存== 和 ==協(xié)商緩存==

  1. 強(qiáng)緩存：不會(huì)向服務(wù)器發(fā)送請(qǐng)求，直接從緩存中讀取資源，在chrome控制臺(tái)的network選項(xiàng)中可以看到該請(qǐng)求返回200的狀態(tài)碼，并且size顯示from disk cache或from memory cache；

     • Expires：response header里的過(guò)期時(shí)間，瀏覽器再次加載資源時(shí)，如果在這個(gè)過(guò)期時(shí)間之內(nèi)，則命中強(qiáng)緩存。

     • Cache-Control：當(dāng)值設(shè)為max-age=300時(shí)，則代表在這個(gè)請(qǐng)求正確返回時(shí)間（瀏覽器也會(huì)記錄下來(lái)）的5分鐘內(nèi)再次加載資源，則命中強(qiáng)緩存。

       Expires和Cache-Control: max-age=..的作用是差不多的，區(qū)別在于Expires是http1.0的產(chǎn)物，Cache-Control是http1.1的產(chǎn)物，兩者共存下，Cache_Control的優(yōu)先級(jí)高于Expires;在某些不支持HTTP1.1的環(huán)境下，Expires就會(huì)發(fā)揮用處。所以Expires其實(shí)是過(guò)時(shí)的產(chǎn)物，現(xiàn)階段它的存在只是一種兼容性的寫(xiě)法。

       還有一個(gè)區(qū)別是Expires是一個(gè)具體的服務(wù)器時(shí)間，這就導(dǎo)致一個(gè)問(wèn)題，如果客戶端時(shí)間和服務(wù)器時(shí)間相差較大，緩存命中與否就不是開(kāi)發(fā)者所期望的。Cache-Control是一個(gè)時(shí)間段，控制就比較容易。

  2. 協(xié)商緩存：向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器會(huì)根據(jù)這個(gè)請(qǐng)求的request header的一些參數(shù)來(lái)判斷是否命中協(xié)商緩存，如果命中，則返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源；

     • Etag(res)和if-None-Match(req)： Etag是上一次加載資源時(shí)，服務(wù)器返回的response header，是對(duì)該資源的一種唯一標(biāo)識(shí)，只要資源有變化，Etag就會(huì)重新生成。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)將上一次返回的Etag值放到request header里的if-None-Match里，服務(wù)器接收后對(duì)比資源文件的Etag值做比較，相同表示資源文件沒(méi)有發(fā)生改變，命中協(xié)商緩存。

     • Last-Modified(res)和If-Modified-Since(req)：Last-Modified是該資源文件最后一次更改時(shí)間，服務(wù)器會(huì)在response header里返回，同時(shí)瀏覽器會(huì)把這個(gè)值保存起來(lái)，在下一次請(qǐng)求時(shí)，放在request header里的if-Modified-Since里，服務(wù)器在接收到后也會(huì)做比對(duì)，如果相同則命中協(xié)商緩存。

       精度上區(qū)別：Etag由于Last-Modified。Last-Modified的時(shí)間單位是秒，如果某個(gè)文件在1秒內(nèi)改變了多次，那么他們的Last-Modified其實(shí)并沒(méi)有體現(xiàn)出來(lái)修改，但是Etag每次都會(huì)改變確保了精度；如果是負(fù)載均衡的服務(wù)器，各個(gè)服務(wù)器生成的Last-Modified也有可能不一致。

       性能上區(qū)別：Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時(shí)間，而Etag需要服務(wù)器通過(guò)算法來(lái)計(jì)算出一個(gè)hash值。

       優(yōu)先級(jí)上區(qū)別，服務(wù)器校驗(yàn)優(yōu)先考慮Etag

     兩者的共同點(diǎn)是，都是從客戶端緩存中讀取資源；區(qū)別是強(qiáng)緩存不會(huì)發(fā)請(qǐng)求，協(xié)商緩存會(huì)發(fā)請(qǐng)求。

• 緩存位置

  1. Service Worker：是運(yùn)行在瀏覽器背后的獨(dú)立線程，一般可以用來(lái)實(shí)現(xiàn)緩存功能。因?yàn)镾ervice Worker中涉及到請(qǐng)求攔截，所以必須使用HTTPS協(xié)議保障安全。

     Service Worker的緩存與瀏覽器其他內(nèi)建的緩存機(jī)制不同，它可以讓我們自由控制緩存那些文件、如何匹配緩存、如何讀取緩存、并且緩存是持續(xù)性的。

  2. Memory Cache：Memory Cache也就是內(nèi)存中的緩存，主要包括的是當(dāng)前中頁(yè)面中已經(jīng)抓取到的資源，例如頁(yè)面上已經(jīng)下載的樣式、腳本、圖片等。讀取內(nèi)存中的數(shù)據(jù)比磁盤(pán)高效，可是緩存持續(xù)性很短，會(huì)隨著進(jìn)程的釋放而釋放。一旦我們關(guān)閉tab頁(yè)面，內(nèi)存中的緩存也就被釋放了。

     內(nèi)存緩存在緩存資源時(shí)并不關(guān)心返回資源的HTTP緩存頭Cache-Control是什么值，同時(shí)資源的匹配也并非僅僅是對(duì)URL做匹配，還可能會(huì)對(duì)Content-Type，CORS等其他特征做校驗(yàn)。

  3. Disk Cache：Disk Cache也就是存儲(chǔ)在硬盤(pán)上的緩存，讀取速度慢點(diǎn)，但是什么都能存儲(chǔ)到磁盤(pán)中，時(shí)效性和容量上更好。

     對(duì)于大文件來(lái)說(shuō)，大概率是不存儲(chǔ)到內(nèi)存中，反之優(yōu)先。

     當(dāng)前系統(tǒng)內(nèi)存使用率高的話，文件也優(yōu)先存儲(chǔ)到硬盤(pán)。

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

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

• 用戶行為對(duì)瀏覽器緩存的控制

  1. 地址欄訪問(wèn)，鏈接跳轉(zhuǎn)是正常用戶行為，將會(huì)觸發(fā)瀏覽器緩存機(jī)制；
  2. F5刷新，瀏覽器會(huì)設(shè)置max—age=0,跳過(guò)強(qiáng)緩存判斷，會(huì)進(jìn)行協(xié)商緩存判斷；
  3. ctrl+F5刷新，跳過(guò)強(qiáng)緩存和協(xié)商緩存，直接從服務(wù)器拉取資源。