瀏覽器緩存機制

瀏覽器緩存的規則是在HTTP請求頭和響應頭中定義的。分別從資源的新鮮程度和校驗值來規定瀏覽器是否能夠直接使用緩存。
與緩存相關的請求頭響應頭以下,其中Expires和Pragma屬於http1.0,若是同時存在max-age和Expires,max-age覆蓋Expires瀏覽器

Expires: Wed, 21 Oct 2015 07:28:00 GMT
Cache-Control: public/private/no-cache, max-age = ?,
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
ETag: 33a64df551425fcc55e4d42a148795d9f25f89d4
Pragma至關於Cache-Control緩存

與緩存相關的請求頭以下服務器

If-Modified-Since
If-None-Matchurl

圖片描述

緩存策略

瀏覽器與緩存相關有三個策略:過時策略、協商策略、存儲策略,前兩個策略用來肯定瀏覽器是否取緩存;存儲策略則用來肯定如何緩存資源。
如上圖所示,瀏覽器發起一個請求,首先判斷是否有本地緩存,若是沒有的話向服務器請求資源,不然判斷緩存是否過時,過時的話向服務器發起驗證,不然取緩存,服務器驗證經過的話,返回304狀態碼,瀏覽器取緩存,而且根據響應頭跟新對應的資源的緩存信息,若是驗證沒有經過,服務器返回200狀態碼,並將新的資源返回給瀏覽器,瀏覽器根據響應頭更新緩存信息。
過時策略由Expires、Cache-Control、Pragma等響應頭決定;協商策略由If-Modified-Since、If-None-Match等請求頭決定;Last-Modified和ETag用來決定存儲策略spa

過時策略

瀏覽器緩存的資源的時候把對應的Expires或者Cache-Control響應頭一同緩存下來,Expires用來決定資源何時過時,Cache-Control中的max-age用來決定保存多長的時間,單位爲秒。
max-age比Expires優先級更高,Expires是屬於http1.0的,當服務端時間和客戶端時間不一樣步的時候會致使一些問題,因此max-age更加可靠一些firefox

協商策略

瀏覽器緩存的資源的時候把對應的Last-Modified或者ETag響應頭一同緩存下來,Last-Modified用來標識資源最近一次被修改的時間,ETag用來標識資源內容等信息,好比能夠根據當前的資源內容生成md5的字符串。
瀏覽器請求該資源的時候,發送If-Modified-Since請求頭,請求頭對應Last-Modified的緩存信息;發送If-None-Match請求頭,對應ETag緩存信息。
服務器收到請求的時候,查看資源最近一次修改的時間或者對應的ETag信息。若是匹配的話,就返回304狀態碼,同時能夠發送新的響應頭,用來跟新緩存信息,好比延長緩存時間。
可是對於及其敏感的文件,Last-Modified存在缺陷,只能識別秒的級別的變化,ETag會比較可靠一些,可是ETag須要服務器端本身去生成tag,會消耗必定的響應時間。圖片

存儲策略

瀏覽器緩存資源的時候,緩存上面說起的那幾個響應頭md5

ctrl + f5和f五、在瀏覽器裏面輸入url並回車的區別

輸入url並回車是最普通的刷新頁面的方式,會走全部的緩存機制。f5是忽略過時策略,好比firefox會發送請求頭Cache-Control: max-age = 0,向服務器發起請求。ctrl + f5,就是忽略過時策略和協商策略向服務器發起請求,例如瀏覽器不發送If-Modified-Since和If-None-Match請求頭,直接向服務器發起請求。這三種方式,不一樣瀏覽器的處理方式不一樣。資源

相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息