瀏覽器緩存(從緩存中去加載資源,這時響應的http code 爲 304)
訪問網頁時,須要從服務器下載一些頁面渲染所需的資源,如html文檔,css,js,圖片等,有些資源是不多變更的,若是將其緩存下來,就能夠減小服務器的負載,並且頁面加載時間也會縮短。css
瀏覽器緩存分類:html
1.強緩存,數據庫
強緩存是利用 Expires 和 Cache-Control 這2個字段來控制的,控制資源緩存的時間,在有效期內不會去向服務器請求了。瀏覽器
因爲Expires 是依賴於客戶端系統時間,當修改了本地時間後,緩存可能會失效,因此通常狀況,咱們認爲使用 Cache-Control 是更好的選擇。緩存
Cache-Control 給 Cache-Control 設置 max-age ,表示緩存的最長時間是多少秒,定義的是時間的長短,它描述的是時間,表示的是一段時間間距,是一個相對時間。服務器
Cache-Control 與 Expires 能夠在服務端配置同時啓用,也就是說在 response header 中,Expires 和Cache-Control 是能夠同時存在,當它們同時啓用的時候Cache-Control 優先級更高。spa
2.協商緩存,code
協商緩存是由服務器來肯定緩存資源是否可用,固然了,須要服務器和客戶端一塊兒配合。服務器可在 response header 中包含Last-Modified字段或者ETag字段。htm
Last-Modified / If-Modified-Since圖片
Last-Modified 表示被請求資源在服務器端的最後一次修改時間,當再次請求該資源的時候,瀏覽器的request header中會帶上If-Modified-Since,若是請求中包含 If Modified Since,就說明已經有緩存在客戶端。服務端只要判斷這個時間和當前請求的文件的修改時間就能夠肯定是返回 304 仍是 200,雖然在返回 304 的時候已經作了一次數據庫查詢,可是能夠避免接下來更多的數據庫查詢,而且沒有返回頁面內容而只是一個 HTTP Header,從而大大的下降帶寬的消耗,對於用戶的感受也是提升。
ETag/If-None-Match
每次文件修改後服務端那邊會生成一個新的 ETag ,是一個惟一文件標識符,當再次請求該資源時候,瀏覽器的request header中會帶上If-None-Match ,這值就是以前返回的ETag ,把這個值發送到服務器,詢問該資源 ETag 是否變更,有變更的話,說明該資源版本須要更新啦,客戶端不能繼續用緩存裏的數據了。
總之,瀏覽器會根據 http response header 中的 Expires 和cahe-control 字段判斷是否命中強緩存,如若命中,則直接從緩存中取資源,不會再去向服務器請求了。不然(沒有命中強緩存),瀏覽器會發出一個條件請求,瀏覽器會在請求頭中包含 If-Modified-Since 或 If-None-Match 字段,If-Modified-Since 即瀏覽器當初獲得的 Last-Modified;If-None-Match即瀏覽器當初獲得的 ETag。當服務器發現資源的更新時間晚於 If-Modified-Since 所提供的時間,或者資源在服務器端當前的 ETag 和 If-None-Match 提供的不符時,說明該資源須要向服務器從新請求了。不然,瀏覽器將不須要從新下載整個資源,只須要從緩存中去加載這個資源,這時響應的http code 爲 304(304 Not Modified)。