瀏覽器緩存機制個人理解

瀏覽器緩存究竟有什麼作用呢?在這裏我將瀏覽器緩存的作用簡單地歸結爲以下幾點。

加快頁面打開速度
降低服務器壓力
減少網絡損耗

瀏覽器緩存有 HTML Meta 標籤控制(一般不用,所以本文不介紹)與 HTTP 頭信息控制兩種。

緩存標識字段便是 ExpiresCache-Control

Expires  是服務器端在響應請求時用來規定資源的失效時間。

Cache-Control 是服務器端在響應請求時用來規定資源是否需要被瀏覽器緩存以及緩存的有效時間等。

Expires 是 HTTP 1.0 的字段,而 Cache-Control  是 HTTP 1.1 的字段,當 Expires  與  Cache-Control 同時存在時,Cache-Control 的優先級要高於  Expires。

在瀏覽器緩存中,還保存了其它關於資源副本的描述字段,這些字段都是服務器返回信息頭帶過來的,如 Last-ModifiedETag

Last-Modified 是服務器端在響應請求時用來說明資源的最後修改時間。與之對應的是 If-Modified-Since 字段。在服務器再驗證過程中,瀏覽器發送的 HTTP 請求的請求頭中會帶上 If-Modified-Since 字段,值爲該資源  Last-Modified 屬性的值。

當服務器端接收到帶有  If-Modified-Since 屬性的請求時,則會將 If-Modified-Since 屬性的值與被請求資源的最後修改時間做對比。如果相同,說明資源沒有新的修改,則響應 HTTP 304,瀏覽器會繼續使用原先保存的該資源的副本;如果最後修改時間比較新,則說明資源被修改過,則響應 HTTP 200,並且返回最新的資源。

ETag 是服務器端在響應請求時用來說明資源在服務器端的唯一標識。與之對應的是 If-None-Match 字段。在服務器再驗證過程中,瀏覽器發送的 HTTP 請求的請求頭中會帶上 If-Modified-Since 字段,值爲該資源  Etag 屬性的值。

當服務器端接收到帶有  If-None-Match 屬性的請求時,則會將 If-None-Match 屬性的值與被請求資源的唯一標識做對比。如果相同,說明資源沒有新的修改,則響應 HTTP 304,瀏覽器會繼續使用原先保存的該資源的副本;如果不同,則說明資源被修改過,則響應 HTTP 200,並且返回最新的資源。

那麼當 Last-Modified / If-Modified-Since 和 Etag / If-None-Match 同時存在是什麼情況呢?

事實上,當兩者同時存在時,Etag / If-None-Match 的優先級要高於 Last-Modified / If-Modified-Since

最後,雖然說瀏覽器緩存對用戶體驗有極大的好處,但是作爲開發者,我們在開發的時候則需要禁止這「討厭」瀏覽器緩存,我的方法是打開瀏覽器的開發者工具,在 Network 中有個 Disable cache ,鉤上就可以了,鉤上後瀏覽器會忽略掉文檔過期驗證和服務器再驗證的過程,直接向服務器請求最新的資源。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章