(如果以下題目都能快速回答,那此文章也就沒有必要要看啦)
1.講一下http快取(強快取,協商快取)
2.如何控制強/協商快取(expires,cache-control,etag/if-none-match,if-modified-sine/last-modified)
3.cache-control有哪些值,作用是什麼(max-age,no-cache,no-store,public,private)
4.哪些是http/1.0哪些是http/1.1(http/1.0:expires,if-modified-sine/last-modified ;http/1.1cache-control,etag/if-none-match)
5.expires與cache-control的優先順序,etag/if-none-match,if-modified-sine/last-modified的優先順序(http/1.1的優先順序高 cache-control,etag/if-none-match)
6.if-modified-sine/last-modified的缺點;為什麼要用etag
(檔案週期性的更改,但是他的內容並不改變(僅僅改變的修改時間);某些檔案修改非常頻繁,比如在秒以下的時間內進行修改,)
7.expires的缺點
(使用服務端時間,客戶端與服務端的時間因為某些原因(例如時區不同;客戶端和服務端有一方的時間不準確)發生誤差,那麼強制快取則會直接失效,這樣的話強制快取的存在則毫無意義)
強制快取
協商快取
瀏覽器的快取機制也就是我們說的http快取機制,其機制是根據http報文的快取標識進行的
瀏覽器與伺服器通訊的方式為應答模式,即是:瀏覽器發起http請求 – 伺服器響應該請求。那麼瀏覽器第一次向伺服器發起該請求後拿到請求結果,會根據響應報文中http頭的快取標識,決定是否快取結果,是則將請求結果和快取標識存入瀏覽器快取中
由上圖我們可以知道:
以上兩點結論就是瀏覽器快取機制的關鍵,他確保了每個請求的快取存入與讀取,只要我們再理解瀏覽器快取的使用規則,那麼所有的問題就迎刃而解了,本文也將圍繞著這點進行詳細分析。為了方便大家理解,這裡我們根據是否需要向伺服器重新發起http請求將快取過程分為兩個部分,分別是強制快取和協商快取。
強制快取就是向瀏覽器快取查詢該請求結果,並根據該結果的快取規則來決定是否使用該快取結果的過程,強制快取的情況主要有三種(暫不分析協商快取過程),如下:
那麼強制快取的快取規則是什麼?
當瀏覽器向伺服器發起請求時,伺服器會將快取規則放入http響應報文的http頭中和請求結果一起返回給瀏覽器,控制強制快取的字段分別是expires和cache-control,其中cache-control優先順序比expires高。
expires是http/1.0控制網頁快取的字段,其值為伺服器返回該請求結果快取的到期時間,即再次發起該請求時,如果客戶端的時間小於expires的值時,直接使用快取結果。
expires: wed,
21 oct 201507:
28:00gmt
到了http/1.1,expire已經被cache-control替代,原因在於expires控制快取的原理是使用客戶端的時間與服務端返回的時間做對比,那麼如果客戶端與服務端的時間因為某些原因(例如時區不同;客戶端和服務端有一方的時間不準確)發生誤差,那麼強制快取則會直接失效,這樣的話強制快取的存在則毫無意義
在http/1.1中,cache-control是最重要的規則,主要用於控制網頁快取,主要取值為:
public:所有內容都將被快取(客戶端和**伺服器都可快取)
private:所有內容只有客戶端可以快取,cache-control的預設取值
no-cache:客戶端快取內容,但是是否使用快取則需要經過協商快取來驗證決定
no-store:所有內容都不會被快取,即不使用強制快取,也不使用協商快取
max-age=*** (*** is numeric):快取內容將在***秒後失效(是相對時間)
例子由上面的例子我們可以知道:
由於cache-control的優先順序比expires高,那麼直接根據cache-control的值進行快取,意思就是說在600秒內再次發起該請求,則會直接使用快取結果,強制快取生效。
注:在無法確定客戶端的時間是否與服務端的時間同步的情況下,cache-control相比於expires是更好的選擇,所以同時存在時,只有cache-control生效。
瀏覽器的快取存放在**,如何在瀏覽器中判斷強制快取是否生效?
這裡我們以部落格的請求為例,狀態碼為灰色的請求則代表使用了強制快取,請求對應的size值則代表該快取存放的位置,分別為from memory cache 和 from disk cache。
那麼from memory cache 和 from disk cache又分別代表的是什麼呢?
什麼時候會使用from disk cache,什麼時候會使用from memory cache呢?
記憶體快取(from memory cache)和硬碟快取(from disk cache)
記憶體快取(from memory cache):記憶體快取具有兩個特點,分別是快速讀取和時效性:
硬碟快取(from disk cache):硬碟快取則是直接將快取寫入硬碟檔案中,讀取快取需要對該快取存放的硬碟檔案進行i/o操作,然後重新解析該快取內容,讀取複雜,速度比記憶體快取慢。
在瀏覽器中,瀏覽器會在js和等檔案解析執行後直接存入記憶體快取中,那麼當重新整理頁面時只需直接從記憶體快取中讀取(from memory cache);而css檔案則會存入硬碟檔案中,所以每次渲染頁面都需要從硬碟讀取快取(from disk cache)。
協商快取就是強制快取失效後,瀏覽器攜帶快取標識向伺服器發起請求,由伺服器根據快取標識決定是否使用快取的過程,主要有以下兩種情況:
同樣,協商快取的標識也是在響應報文的http頭中和請求結果一起返回給瀏覽器的,控制協商快取的字段分別有:last-modified / if-modified-since和etag / if-none-match,其中etag / if-none-match的優先順序比last-modified / if-modified-since高。
last-modified是伺服器響應請求時,返回該資源檔案在伺服器最後被修改的時間。
if-modified-since則是客戶端再次發起該請求時,攜帶上次請求返回的last-modified值,通過此字段值告訴伺服器該資源上次請求返回的最後被修改時間。伺服器收到該請求,發現請求頭含有if-modified-since欄位,則會根據if-modified-since的字段值與該資源在伺服器的最後被修改時間做對比,若伺服器的資源最後被修改時間大於if-modified-since的字段值,則重新返回資源,狀態碼為200;否則則返回304,代表資源無更新,可繼續使用快取檔案
last-modified / if-modified-since的缺點:
1、一些檔案也許會週期性的更改,但是他的內容並不改變(僅僅改變的修改時間),這個時候我們並不希望客戶端認為這個檔案被修改了,而重新get;
2、某些檔案修改非常頻繁,比如在秒以下的時間內進行修改,(比方說1s內修改了n次),if-modified-since能檢查到的粒度是s級的,這種修改無法判斷(或者說unix記錄mtime只能精確到秒)
3、某些伺服器不能精確的得到檔案的最後修改時間;
針對以上的缺點,http/1.1使用etag / if-none-match
etag是伺服器響應請求時,返回當前資源檔案的乙個唯一標識(由伺服器生成)。
if-none-match是客戶端再次發起該請求時,攜帶上次請求返回的唯一標識etag值,通過此字段值告訴伺服器該資源上次請求返回的唯一標識值。伺服器收到該請求後,發現該請求頭中含有if-none-match,則會根據if-none-match的字段值與該資源在伺服器的etag值做對比,一致則返回304,代表資源無更新,繼續使用快取檔案;不一致則重新返回資源檔案,狀態碼為200,如下。
注:etag / if-none-match優先順序高於last-modified / if-modified-since,同時存在則只有etag / if-none-match生效。
參考文章:
瀏覽器http快取
強快取 強快取命中不會傳送請求到伺服器端,直接從本地快取中獲取資源,狀態碼200 from cache 協商快取 協商快取會傳送請求到伺服器,伺服器通過請求頭部欄位來驗證資源是否命中協商快取,如果命中,則返回狀態碼304 not modified 通知瀏覽器從快取中獲取資源 4.1 last mod...
瀏覽器快取機制 http快取頭
重用已獲取的資源能夠有效的提公升 與應用的效能。web 快取能夠減少延遲與網路阻塞,進而減少顯示某個資源所用的時間。借助 http 快取,web 站點變得更具有響應性。快取作為加快頁面載入速度的方法,可以說是必不可少的乙個方法,如何能更好地運用快取來服務客戶,首先我們就得了解清楚快取 先上一張從se...
HTTP瀏覽器快取機制
來自 瀏覽器快取機制 瀏覽器快取機制,其實主要就是http協議定義的快取機制 如 expires cache control等 但是也有非http協議定義的快取機制,如使用html meta 標籤,web開發者可以在html頁面的節點中加入標籤,如下 上述 的作用是告訴瀏覽器當前頁面不被快取,每次訪...