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