瀏覽器緩存的全過(guò)程:瀏覽器第一次加載資源,服務(wù)器返回 200,瀏覽器從服務(wù)器下載資源文件,并緩存資源文件與 response header,以供下次加載時(shí)對(duì)比使用;
下一次加載資源時(shí),由于強(qiáng)制緩存優(yōu)先級(jí)較高,先比較當(dāng)前時(shí)間與上一次返回 200 時(shí)的時(shí)間差,如果沒(méi)有超過(guò) cache-control 設(shè)置的 max-age,則沒(méi)有過(guò)期,并命中強(qiáng)緩存,直接從本地讀取資源。如果瀏覽器不支持HTTP1.1,則使用 expires 頭判斷是否過(guò)期;
如果資源已過(guò)期,則表明強(qiáng)制緩存沒(méi)有被命中,則開(kāi)始協(xié)商緩存,向服務(wù)器發(fā)送帶有 If-None-Match 和 If-Modified-Since 的請(qǐng)求;
服務(wù)器收到請(qǐng)求后,優(yōu)先根據(jù) Etag 的值判斷被請(qǐng)求的文件有沒(méi)有做修改,Etag 值一致則沒(méi)有修改,命中協(xié)商緩存,返回 304;如果不一致則有改動(dòng),直接返回新的資源文件帶上新的 Etag 值并返回 200;
如果服務(wù)器收到的請(qǐng)求沒(méi)有 Etag 值,則將 If-Modified-Since 和被請(qǐng)求文件的最后修改時(shí)間做比對(duì),一致則命中協(xié)商緩存,返回 304;不一致則返回新的 last-modified 和文件并返回 200;
很多網(wǎng)站的資源后面都加了版本號(hào),這樣做的目的是:每次升級(jí)了 JS 或 CSS 文件后,為了防止瀏覽器進(jìn)行緩存,強(qiáng)制改變版本號(hào),客戶(hù)端瀏覽器就會(huì)重新下載新的 JS 或 CSS 文件 ,以保證用戶(hù)能夠及時(shí)獲得網(wǎng)站的最新更新。