瀏覽器快取機制

2021-09-07 06:17:56 字數 2829 閱讀 8296

利用瀏覽器快取,可以使得頁面載入速度提高,也減輕服務端壓力。有幾個比較重要點如下:

1. 瀏覽器是如何判斷快取是否過期?

2. 服務端如何判斷快取已失效?

3. 為什麼有了last-modified還要etag?

4. 200 ok( from cache )和 304 not modified的區別?

下面是我總結的頁面利用瀏覽器快取的過程(圖示):

瀏覽器是如何判斷快取是否過期?

應該是根據response header裡面的cache-control和expires這兩個屬性,當兩個都存在時,cache-control優先順序較高。

cache-control

該欄位用於控制瀏覽器在什麼情況下直接使用本地快取而不向伺服器傳送請求。一般具有以下值:

public:指示響應可被任何快取區快取。

private:指示對於單個使用者的整個或部分響應訊息,不能被共享快取處理。這允許伺服器僅僅描述當使用者的部分響應訊息,此響應訊息對於其他使用者的請求無效。

no-cache:指示請求或響應訊息不能快取。

no-store:用於防止重要的資訊被無意的發布。在請求訊息中傳送將使得請求和響應訊息都不使用快取。

max-age:指示瀏覽器可以接收生存期不大於指定時間(以秒為單位)的響應。

min-fresh:指示瀏覽器可以接收響應時間小於當前時間加上指定時間的響應。

max-stale:指示瀏覽器可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼瀏覽器可以接收超出超時期指定值之內的響應訊息。

ps:其實主要關注max-age這個值就行了。

expires

expires 頭部字段提供乙個日期和時間,在該日期前的所有對該資源的請求都會直接使用瀏覽器快取而不用向伺服器請求。

例如:expires: sun, 08 nov 2009 03:37:26 gmt

注意:1. cache-control max-age 和 max-stale將覆蓋expires header。

2. 使用expires存在伺服器端時間和瀏覽器時間不一致的問題。

3. 另外有人說expires 是http 1.0的東西,現在預設瀏覽器均預設使用http 1.1,所以它的作用基本忽略(暫不明了)。

服務端如何判斷快取已失效?

服務端通過if-modified-since(last-modified)和if-none-match(etag)這兩個屬性的值來判斷快取是否失效的。

last-modified/if-modified-since

last-modified/if-modified-since要配合cache-control使用。

last-modified:響應資源的最後修改時間。

if-modified-since:當快取過期時,發現資源具有last-modified宣告,則在請求頭帶上if-modified-since(值就是last-modified)。伺服器收到請求後發現有頭if-modified-since則與被請求資源的最後修改時間進行比對。若最後修改時間較新,說明資源又被改動過,則響應http 200整片資源內容(寫在響應訊息包體內);若最後修改時間較舊,說明資源無新修改,則響應http 304,告知瀏覽器繼續使用所儲存的cache。

etag/if-none-match

etag/if-none-match也要配合cache-control使用。

etag:資源在伺服器的唯一標識(生成規則由伺服器決定)。apache中,etag的值,預設是對檔案的索引節(inode),大小(size)和最後修改時間(mtime)進行hash後得到的。

if-none-match:當快取過期時,發現資源具有etage宣告,則在請求頭帶上if-none-match(值就是etag)。伺服器收到請求後發現有頭if-none-match 則與被請求資源的相應校驗串進行比對,決定返回200或304。

為什麼有了last-modified還要etag?

etag的出現主要是為了解決幾個last-modified比較難解決的問題:

1. last-modified標註的最後修改只能精確到秒級,如果某些檔案在1秒鐘以內,被修改多次的話,它將不能準確標註檔案的修改時間。

2. 如果某些檔案會被定期生成,當有時內容並沒有任何變化,但last-modified卻改變了,導致檔案沒法使用快取。

3. 有可能存在伺服器沒有準確獲取檔案修改時間,或者與**伺服器時間不一致等情形。

200 ok( from cache )和 304 not modified的區別?

200 ok( from cache )不向伺服器傳送請求,直接使用本地快取檔案。304 not modified則向伺服器詢問,若伺服器認為瀏覽器的快取版本還可用,那麼便會返回304。

200 ok( from cache ) 出現操作:

1.位址列回車

2.頁面鏈結跳轉

3.前進、後退

304 not modified 出現操作:

1.f5重新整理

2.新開視窗

總結

參考文獻

1. 《再記:瀏覽器快取200(from cache)和304小結》

2. 《瀏覽器快取機制》by 吳秦

瀏覽器快取機制

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...

瀏覽器快取機制

當我們瀏覽乙個頁面發現有異常時,通常考慮的就是書不是瀏覽器做了快取呢,按ctrl f5重新請求一次就能請求到沒有快取的頁面,這個是為什麼呢。首先,ctrl f5組合鍵重新整理頁面,那麼瀏覽器會直接向目標url傳送請求,而不再使用瀏覽器快取的資料。其次,當請求到達伺服器端依然有可能出現使用伺服器端的資...

瀏覽器快取機制

瀏覽器快取機制 瀏覽器快取機制,其實主要就是 協議定義的快取機制 如 expires cache control 等 但是也有非 協議定義的快取機制,如使用 html meta 標籤,web 開發者可以在 html 頁面的節點中加入 標籤,如下 上述 的作用是告訴瀏覽器當前頁面不被快取,每次訪問都需...