瀏覽器緩存
緩存位置：
? ? Service Worker：
? ? ? ????1.Service Worker 是運(yùn)行在瀏覽器背后的獨(dú)立線程，一般可以用來實(shí)現(xiàn)緩存功能
? ? ? ????2.傳輸協(xié)議必須為 HTTPS,因?yàn)?Service Worker 中涉及到請求攔截
? ? ? ? ? 3.Service Worker自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，并且緩存是持續(xù)性的
?????Memory Cache：
? ? ? ????1.Memory Cache是內(nèi)存中的緩存，主要包含的是當(dāng)前中頁面中已經(jīng)抓取到的資源,例如頁面上已經(jīng)下載的樣式、腳本、圖片
? ? ? ? ? ? ?等
? ? ? ????2.讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤快,但緩存持續(xù)性很短，會隨著進(jìn)程的釋放而釋放。
? ? ????? 3.讓數(shù)據(jù)都存放在內(nèi)存中不可能，計(jì)算機(jī)中的內(nèi)存一定比硬盤容量小得多
? ? Disk Cache：
? ? ????? 1.Disk Cache 也就是存儲在硬盤中的緩存，讀取速度慢點(diǎn)，但是什么都能存儲到磁盤中
? ? ????? 2.對于大文件來說，大概率是不存儲在內(nèi)存中的，反之優(yōu)先
? ????? ? 3.當(dāng)前系統(tǒng)內(nèi)存使用率高的話，文件優(yōu)先存儲進(jìn)硬盤
? ? Push Cache
? ? ????? 1.Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容，當(dāng)以上三種緩存都沒有命中時，它才會被使用。
? ? ????? 2.它只在會話（Session）中存在，一旦會話結(jié)束就被釋放，并且緩存時間也很短暫，在Chrome瀏覽器中只有5分鐘左右
緩存策略：
? ? 強(qiáng)緩存：
? ? ????? 1.不會向服務(wù)器發(fā)送請求，直接從緩存中讀取資源
? ? ????? 2.在chrome控制臺的Network選項(xiàng)中可以看到該請求返回200的狀態(tài)碼，
? ? ????? 3.Size顯示from disk cache或from memory cache。
? ? ????? 4.不關(guān)心服務(wù)器端文件是否已經(jīng)更新
? ? ????? 5.強(qiáng)緩存可以通過設(shè)置兩種HTTP Header實(shí)現(xiàn)：Expires 和 Cache-Control。
? ? ? ? ????????Expires（http1）：
? ? ? ? ????????????? 1.緩存過期時間，用來指定資源到期的時間，是服務(wù)器端的具體的時間點(diǎn)
? ? ? ? ????????????? 2.需要和Last-modified結(jié)合使用
? ? ? ? ????????????? 3.告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)
? ? ? ? ????????????? 4.Expires 是 HTTP/1 的產(chǎn)物，受限于本地時間，如果修改了本地時間，可能會造成緩存失效
? ? ? ?????????Cache-Control(http1.1)：
? ? ? ? ? ? ? ????????1.在HTTP/1.1中，Cache-Control是最重要的規(guī)則，主要用于控制網(wǎng)頁緩存
? ? ? ? ? ????????????2.Cache-Control:max-age=300時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內(nèi)再次加載資
????????????????????????源，就會命中強(qiáng)緩存。
? ? ? ? ????????????? 3.指令集合：
? ? ? ? ? ????????????????? 1）public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）
? ? ? ? ? ? ????????????????2）private：所有內(nèi)容只有客戶端可以緩存，Cache-Control的默認(rèn)取值
? ? ? ? ? ? ? ? ? ? ? ? ? ? 3）no-cache：客戶端緩存內(nèi)容，是否使用緩存則需要經(jīng)過協(xié)商緩存來驗(yàn)證決定，確認(rèn)一下數(shù)據(jù)是否還跟服務(wù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 器保持一致
? ? ? ? ? ????????????????? 4）no-store：所有內(nèi)容都不會被緩存，即不使用強(qiáng)制緩存，也不使用協(xié)商緩存
? ? ? ? ? ????????????????? 5）max-age：max-age=xxx (xxx is numeric)表示緩存內(nèi)容將在xxx秒后失效
? ? ? ? ????? ? ????????????6）s-maxage（單位為s)：同max-age作用一樣，只在代理服務(wù)器中生效（比如CDN緩存）
? ? ? ? Expires與Cache-Control區(qū)別：
? ? ? ? ? ????1.Cache-Control優(yōu)先級高于Expires
? ? ? ? ????? 2.Expires其實(shí)是過時的產(chǎn)物，現(xiàn)階段它的存在只是一種兼容性的寫法。
? ? 協(xié)商緩存：
? ? ? ????????1.協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過
? ? ? ? ? ? ? ? ?程
? ? ????????? 2.協(xié)商緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Last-Modified 和 ETag
? ? ? ? Last-Modified和If-Modified-Since(http1)：
? ? ? ? ? ????1.瀏覽器在第一次訪問資源時，服務(wù)器返回資源的同時在response header中添加 Last-Modified的header，值是這個資
? ? ? ? ? ? ? ? ?源在服務(wù)器上的最后修改時間，瀏覽器接收后緩存文件和header
? ? ? ? ????? 2.下一次請求這個資源，添加If-Modified-Since這個header，值就是Last-Modified中的值
? ? ? ? ? ????3.服務(wù)器再次收到這個資源請求，會根據(jù) If-Modified-Since 中的值與服務(wù)器中這個資源的最后修改時間對比，沒有變化
????????????????返回304和空的響應(yīng)體直接從緩存讀取，修改時間說明文件有更新返回新的資源文件和200
? ? ? ? ETag和If-None-Match(http1.1)：
? ? ? ? ????? 1.Etag是服務(wù)器響應(yīng)請求時，返回當(dāng)前資源文件的一個唯一標(biāo)識(由服務(wù)器生成)，只要資源有變化，Etag就會重新生成
? ? ? ? ????? 2.瀏覽器在下一次加載資源向服務(wù)器發(fā)送請求時，會將上一次返回的Etag值放到request header里的If-None-Match里，
????????????????服務(wù)器只需要比較客戶端傳來的If-None-Match跟自己服務(wù)器上該資源的ETag是否一致
? ? ? ? 區(qū)別：
? ? ? ????????? 1.Last-Modified如果本地打開緩存文件，即使沒有對文件進(jìn)行修改，但還是會造成 Last-Modified 被修改，服務(wù)端不能
????????????????????命中緩存導(dǎo)致發(fā)送相同的資源
? ? ? ????????? 2.Last-Modified只能以秒計(jì)時，如果在不可感知的時間內(nèi)修改完成文件，那么服務(wù)端會認(rèn)為資源還是命中了，不會返
????????????????????回正確的資源
? ? ? ????????? 3.首先在精確度上，Etag要優(yōu)于Last-Modified
? ? ? ? ???????? 4.負(fù)載均衡的服務(wù)器，各個服務(wù)器生成的Last-Modified也有可能不一致
? ? ? ????????? 5.在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務(wù)器通過算法來計(jì)算出一個hash值
? ? ? ????????? 6.在優(yōu)先級上，服務(wù)器校驗(yàn)優(yōu)先考慮Etag
緩存機(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ù)使用緩存
如果什么緩存策略都沒設(shè)置，那么瀏覽器會怎么處理？
? ? 對于這種情況，瀏覽器會采用一個啟發(fā)式的算法，通常會取響應(yīng)頭中的 Date
? ? 減去 Last-Modified 值的 10% 作為緩存時間。
實(shí)際場景應(yīng)用緩存策略：
? ? 1.頻繁變動的資源： Cache-Control: no-cache
? ? 2.不常變化的資源： Cache-Control: max-age=31536000
用戶行為對瀏覽器緩存的影響
? ? 1.打開網(wǎng)頁，地址欄輸入地址： 查找 disk cache 中是否有匹配。如有則使用；如沒有則發(fā)送網(wǎng)絡(luò)請求。
? ? 2.普通刷新 (F5)：因?yàn)?TAB 并沒有關(guān)閉，因此 memory cache 是可用的，會被優(yōu)先使用(如果匹配的話)。其次才是 disk cache。
? ? 3.強(qiáng)制刷新 (Ctrl + F5)：瀏覽器不使用緩存，因此發(fā)送的請求頭部均帶有 Cache-control: no-cache(為了兼容，還帶了 Pragma: no-cache),服務(wù)器直接返回 200 和最新內(nèi)容。
