瀏覽器緩存
緩存位置：
? ? Service Worker：
? ? ? ????1.Service Worker 是運行在瀏覽器背后的獨立線程罕拂，一般可以用來實現(xiàn)緩存功能
? ? ? ????2.傳輸協(xié)議必須為 HTTPS,因為 Service Worker 中涉及到請求攔截
? ? ? ? ? 3.Service Worker自由控制緩存哪些文件灵份、如何匹配緩存李滴、如何讀取緩存预烙，并且緩存是持續(xù)性的
?????Memory Cache：
? ? ? ????1.Memory Cache是內存中的緩存，主要包含的是當前中頁面中已經抓取到的資源,例如頁面上已經下載的樣式鳍置、腳本登疗、圖片
? ? ? ? ? ? ?等
? ? ? ????2.讀取內存中的數(shù)據(jù)肯定比磁盤快,但緩存持續(xù)性很短，會隨著進程的釋放而釋放娱节。
? ? ????? 3.讓數(shù)據(jù)都存放在內存中不可能挠蛉，計算機中的內存一定比硬盤容量小得多
? ? Disk Cache：
? ? ????? 1.Disk Cache 也就是存儲在硬盤中的緩存，讀取速度慢點肄满，但是什么都能存儲到磁盤中
? ? ????? 2.對于大文件來說谴古，大概率是不存儲在內存中的，反之優(yōu)先
? ????? ? 3.當前系統(tǒng)內存使用率高的話稠歉，文件優(yōu)先存儲進硬盤
? ? Push Cache
? ? ????? 1.Push Cache（推送緩存）是 HTTP/2 中的內容掰担，當以上三種緩存都沒有命中時，它才會被使用怒炸。
? ? ????? 2.它只在會話（Session）中存在带饱，一旦會話結束就被釋放，并且緩存時間也很短暫横媚，在Chrome瀏覽器中只有5分鐘左右
緩存策略：
? ? 強緩存：
? ? ????? 1.不會向服務器發(fā)送請求纠炮，直接從緩存中讀取資源
? ? ????? 2.在chrome控制臺的Network選項中可以看到該請求返回200的狀態(tài)碼，
? ? ????? 3.Size顯示from disk cache或from memory cache灯蝴。
? ? ????? 4.不關心服務器端文件是否已經更新
? ? ????? 5.強緩存可以通過設置兩種HTTP Header實現(xiàn)：Expires 和 Cache-Control恢口。
? ? ? ? ????????Expires（http1）：
? ? ? ? ????????????? 1.緩存過期時間，用來指定資源到期的時間穷躁，是服務器端的具體的時間點
? ? ? ? ????????????? 2.需要和Last-modified結合使用
? ? ? ? ????????????? 3.告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)
? ? ? ? ????????????? 4.Expires 是 HTTP/1 的產物耕肩，受限于本地時間因妇，如果修改了本地時間，可能會造成緩存失效
? ? ? ?????????Cache-Control(http1.1)：
? ? ? ? ? ? ? ????????1.在HTTP/1.1中猿诸，Cache-Control是最重要的規(guī)則婚被，主要用于控制網(wǎng)頁緩存
? ? ? ? ? ????????????2.Cache-Control:max-age=300時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內再次加載資
????????????????????????源梳虽，就會命中強緩存址芯。
? ? ? ? ????????????? 3.指令集合：
? ? ? ? ? ????????????????? 1）public：所有內容都將被緩存（客戶端和代理服務器都可緩存）
? ? ? ? ? ? ????????????????2）private：所有內容只有客戶端可以緩存，Cache-Control的默認取值
? ? ? ? ? ? ? ? ? ? ? ? ? ? 3）no-cache：客戶端緩存內容窜觉，是否使用緩存則需要經過協(xié)商緩存來驗證決定谷炸，確認一下數(shù)據(jù)是否還跟服務? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 器保持一致
? ? ? ? ? ????????????????? 4）no-store：所有內容都不會被緩存，即不使用強制緩存禀挫，也不使用協(xié)商緩存
? ? ? ? ? ????????????????? 5）max-age：max-age=xxx (xxx is numeric)表示緩存內容將在xxx秒后失效
? ? ? ? ????? ? ????????????6）s-maxage（單位為s)：同max-age作用一樣旬陡，只在代理服務器中生效（比如CDN緩存）
? ? ? ? Expires與Cache-Control區(qū)別：
? ? ? ? ? ????1.Cache-Control優(yōu)先級高于Expires
? ? ? ? ????? 2.Expires其實是過時的產物，現(xiàn)階段它的存在只是一種兼容性的寫法语婴。
? ? 協(xié)商緩存：
? ? ? ????????1.協(xié)商緩存就是強制緩存失效后描孟，瀏覽器攜帶緩存標識向服務器發(fā)起請求，由服務器根據(jù)緩存標識決定是否使用緩存的過
? ? ? ? ? ? ? ? ?程
? ? ????????? 2.協(xié)商緩存可以通過設置兩種 HTTP Header 實現(xiàn)：Last-Modified 和 ETag
? ? ? ? Last-Modified和If-Modified-Since(http1)：
? ? ? ? ? ????1.瀏覽器在第一次訪問資源時砰左，服務器返回資源的同時在response header中添加 Last-Modified的header匿醒，值是這個資
? ? ? ? ? ? ? ? ?源在服務器上的最后修改時間，瀏覽器接收后緩存文件和header
? ? ? ? ????? 2.下一次請求這個資源菜职，添加If-Modified-Since這個header青抛，值就是Last-Modified中的值
? ? ? ? ? ????3.服務器再次收到這個資源請求，會根據(jù) If-Modified-Since 中的值與服務器中這個資源的最后修改時間對比酬核，沒有變化
????????????????返回304和空的響應體直接從緩存讀取，修改時間說明文件有更新返回新的資源文件和200
? ? ? ? ETag和If-None-Match(http1.1)：
? ? ? ? ????? 1.Etag是服務器響應請求時适室，返回當前資源文件的一個唯一標識(由服務器生成)嫡意，只要資源有變化，Etag就會重新生成
? ? ? ? ????? 2.瀏覽器在下一次加載資源向服務器發(fā)送請求時捣辆，會將上一次返回的Etag值放到request header里的If-None-Match里蔬螟，
????????????????服務器只需要比較客戶端傳來的If-None-Match跟自己服務器上該資源的ETag是否一致
? ? ? ? 區(qū)別：
? ? ? ????????? 1.Last-Modified如果本地打開緩存文件，即使沒有對文件進行修改汽畴，但還是會造成 Last-Modified 被修改旧巾，服務端不能
????????????????????命中緩存導致發(fā)送相同的資源
? ? ? ????????? 2.Last-Modified只能以秒計時，如果在不可感知的時間內修改完成文件忍些，那么服務端會認為資源還是命中了鲁猩，不會返
????????????????????回正確的資源
? ? ? ????????? 3.首先在精確度上，Etag要優(yōu)于Last-Modified
? ? ? ? ???????? 4.負載均衡的服務器罢坝，各個服務器生成的Last-Modified也有可能不一致
? ? ? ????????? 5.在性能上廓握，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務器通過算法來計算出一個hash值
? ? ? ????????? 6.在優(yōu)先級上隙券，服務器校驗優(yōu)先考慮Etag
緩存機制
? ? 強制緩存優(yōu)先于協(xié)商緩存進行男应，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，
? ? 若不生效則進行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)娱仔，
? ? 協(xié)商緩存由服務器決定是否使用緩存沐飘，若協(xié)商緩存失效，那么代表該請求的緩存失效牲迫，返回200薪铜，
? ? 重新返回資源和緩存標識，再存入瀏覽器緩存中恩溅；生效則返回304隔箍，繼續(xù)使用緩存
如果什么緩存策略都沒設置，那么瀏覽器會怎么處理脚乡？
? ? 對于這種情況蜒滩，瀏覽器會采用一個啟發(fā)式的算法，通常會取響應頭中的 Date
? ? 減去 Last-Modified 值的 10% 作為緩存時間奶稠。
實際場景應用緩存策略：
? ? 1.頻繁變動的資源： Cache-Control: no-cache
? ? 2.不常變化的資源： Cache-Control: max-age=31536000
用戶行為對瀏覽器緩存的影響
? ? 1.打開網(wǎng)頁俯艰，地址欄輸入地址： 查找 disk cache 中是否有匹配。如有則使用锌订；如沒有則發(fā)送網(wǎng)絡請求竹握。
? ? 2.普通刷新 (F5)：因為 TAB 并沒有關閉，因此 memory cache 是可用的辆飘，會被優(yōu)先使用(如果匹配的話)啦辐。其次才是 disk cache。
? ? 3.強制刷新 (Ctrl + F5)：瀏覽器不使用緩存蜈项，因此發(fā)送的請求頭部均帶有 Cache-control: no-cache(為了兼容芹关，還帶了 Pragma: no-cache),服務器直接返回 200 和最新內容。
