? ? ? ? 談到緩存時械拍，大家想到的可能有瀏覽器緩存、CDN緩存装盯、服務(wù)器緩存等坷虑，而瀏覽器緩存則是與我們前端開發(fā)最密切相關(guān)的，有時為了考慮用戶體驗以及網(wǎng)站性能優(yōu)化埂奈，通常我們會考慮在瀏覽器緩存上做一定的優(yōu)化迄损，下面就談?wù)勎覍g覽器緩存的基本認知。
我們通常所說的瀏覽器緩存账磺，通常分為強緩存和協(xié)商緩存兩種：
1.強緩存和協(xié)商緩存
①瀏覽器在加載資源的時候會根據(jù)這個資源的一些http header判斷它是否命中強緩存芹敌。如果命中了強緩存共屈，瀏覽器就直接從緩存中加載這個資源，連請求都不會發(fā)送到網(wǎng)頁所在的服務(wù)器党窜。
②當強緩存沒有命中時拗引，瀏覽器會發(fā)送一個請求到服務(wù)器，服務(wù)器端依據(jù)資源的另一些http header驗證是否命中協(xié)商緩存幌衣。若命中矾削，服務(wù)器將這個請求返回，但不會返回這個資源的數(shù)據(jù)豁护，而是告訴客戶端可以直接從緩存中加載這個資源哼凯，于是瀏覽器就自己從自己的緩存中加載這個資源。
③當協(xié)商緩存沒有命中的時候楚里，瀏覽器直接從服務(wù)器加載資源數(shù)據(jù)断部。
2.1 強緩存的原理
命中強緩存后http狀態(tài)碼： 200
network里面的size顯示from cache
http1.0：Expires
http1.1：Cache-Control
上面這兩個header可以只啟用一個或者兩個都使用。兩個同時存在時Cache-control的優(yōu)先級高于Expires
2.2 強緩存的管理
可以通過兩種方式設(shè)置強緩存：
① 通過代碼的方式班缎，在web服務(wù)器返回的響應(yīng)中添加Expires和Cache-control Header
② 通過配置web服務(wù)器的方式蝴光，讓web服務(wù)器在響應(yīng)資源的時候統(tǒng)一添加Expires和Cache-control Header
2.3 由于在開發(fā)的時候不會專門去配置強緩存，而瀏覽器又默認會緩存圖片达址、css和js等靜態(tài)資源蔑祟，所以開發(fā)環(huán)境下經(jīng)常會因為強緩存導(dǎo)致資源沒有及時更新而看不到最新的效果，解決這個問題的方法有很多沉唠，常用的有以下幾種：
① ctrl+F5
② 使用瀏覽器的隱私模式開發(fā)
③ 如果用的是chrome瀏覽器的話疆虚，可以f12在network里面把緩存禁掉。
④ 給資源加上一個動態(tài)的參數(shù)满葛，例如時間戳
⑥ 如果ajax請求存在緩存 可以在請求的地址欄追加隨機數(shù)或者時間戳
⑦ 動態(tài)設(shè)置iframe時也可能會出現(xiàn)緩存問題径簿，也可以在src后面動態(tài)添加時間戳或者隨機數(shù)解決
2.4 強緩存的應(yīng)用
① 強緩存是前端性能優(yōu)化最有利的工具。對于有大量今天資源的網(wǎng)站嘀韧，一定要利用強緩存篇亭，提高響應(yīng)速度。
通常做法：將靜態(tài)資源全部配置一個超時時間超長的Expires或Cache-Control乳蛾。
3.1 協(xié)商緩存的原理
協(xié)商緩存狀態(tài)碼： 304 （Not Modified）
會顯示資源的大小
從瀏覽器緩存中加載資源暗赶，但是會和web服務(wù)器通信鄙币，web服務(wù)器返回告知其在瀏覽器緩存中加載資源肃叶。
① 瀏覽器第一次跟服務(wù)器請求一個資源的時候，服務(wù)器在返回這個資源的同時十嘿，在response的header上加上Last-Modified的header
② 瀏覽器再次請求這個資源的時候因惭，請求頭上加上If-Modified-Since的header，這個header的值就是上一次請求返回時的Last-Modified的值
③服務(wù)器再次收到資源請求時绩衷，根據(jù)瀏覽器傳過來If-Modified-Since和資源在服務(wù)器上的最后修改時間判斷資源是否有變化蹦魔，如果沒有變化則返回304 Not Modified激率，但是不會返回資源內(nèi)容淋叶；如果有變化撑蚌，就正常返回資源內(nèi)容。當服務(wù)器返回304 Not Modified的響應(yīng)時扭屁，response header中不會再添加Last-Modified的header低缩，因為既然資源沒有變化嘉冒，那么Last-Modified也就不會改變，
3.2 協(xié)商緩存的管理
強緩存由于不發(fā)請求到服務(wù)器咆繁，所以不知道資源的更新讳推，協(xié)商緩存會發(fā)請求到服務(wù)器，服務(wù)器知道支援的更新玩般。大部分的web服務(wù)器都默認開啟協(xié)商緩存银觅。
1）當ctrl+f5強制刷新網(wǎng)頁時，直接從服務(wù)器加載坏为，跳過強緩存和協(xié)商緩存究驴；
2）當f5刷新網(wǎng)頁時，跳過強緩存匀伏，但是會檢查協(xié)商緩存纳胧；
