瀏覽器的快取機制總結

2021-09-11 10:04:51 字數 2045 閱讀 2996

1.強快取:不會向伺服器傳送請求,直接從快取中讀取資源,在chrome控制台的network選項中可以看到該請求返回200的狀態碼,並且size顯示from disk cache或from memory cache;

2.協商快取:向伺服器傳送請求,伺服器會根據這個請求的request header的一些引數來判斷是否命中協商快取,如果命中,則返回304狀態碼並帶上新的response header通知瀏覽器從快取中讀取資源;

注意:兩者的共同點是,都是從客戶端快取中讀取資源;區別是強快取不會發請求,協商快取會發請求。

expires:response header裡的過期時間,瀏覽器再次載入資源時,如果在這個過期時間內,則命中強快取。

cache-control:當值設為max-age=300時,則代表在這個請求正確返回時間(瀏覽器也會記錄下來)的5分鐘內再次載入資源,就會命中強快取。

expires和cache-control:max-age=*** 的作用是差不多的,區別就在於 expires 是http1.0的產物,cache-control是http1.1的產物,兩者同時存在的話,cache-control優先順序高於expires;在某些不支援http1.1的環境下,expires就會發揮用處。所以expires其實是過時的產物,現階段它的存在只是一種相容性的寫法

注意:expires和cache-control的區別還有乙個:expires是乙個具體的伺服器時間,這就導致乙個問題,如果客戶端時間和伺服器時間相差較大,快取命中與否就不是開發者所期望的。cache-control是乙個時間段,控制就比較容易。

etag和if-none-match:這兩個要一起說。etag是上一次載入資源時,伺服器返回的response header,是對該資源的一種唯一標識,只要資源有變化,etag就會重新生成。瀏覽器在下一次載入資源向伺服器傳送請求時,會將上一次返回的etag值放到request header裡的if-none-match裡,伺服器接受到if-none-match的值後,會拿來跟該資源檔案的etag值做比較,如果相同,則表示資源檔案沒有發生改變,命中協商快取。

last-modified和if-modified-since:這兩個也要一起說。last-modified是該資源檔案最後一次更改時間,伺服器會在response header裡返回,同時瀏覽器會將這個值儲存起來,在下一次傳送請求時,放到request header裡的if-modified-since裡,伺服器在接收到後也會做比對,如果相同則命中協商快取。

etag和last-modified的作用和用法也是差不多,說一說他們的區別。

首先在精確度上,etag要優於last-modified。last-modified的時間單位是秒,如果某個檔案在1秒內改變了多次,那麼他們的last-modified其實並沒有體現出來修改,但是etag每次都會改變確保了精度;如果是負載均衡的伺服器,各個伺服器生成的last-modified也有可能不一致。

第二在效能上,etag要遜於last-modified,畢竟last-modified只需要記錄時間,而etag需要伺服器通過演算法來計算出乙個hash值。

第三在優先順序上,伺服器校驗優先考慮etag。

同樣以京東為案例

下一次載入資源時,先比較當前時間和上一次返回200時的時間差,如果沒有超過cache-control設定的max-age,則沒有過期,命中強快取,不發請求直接從本地快取讀取該檔案(如果瀏覽器不支援http1.1,則用expires判斷是否過期);如果時間過期,則向伺服器傳送header帶有if-none-match和if-modified-since的請求;

伺服器收到請求後,優先根據etag的值判斷被請求的檔案有沒有做修改,etag值一致則沒有修改,命中協商快取,返回304;如果不一致則有改動,直接返回新的資源檔案帶上新的etag值並返回200;

如果伺服器收到的請求沒有etag值,則將if-modified-since和被請求檔案的最後修改時間做比對,一致則命中協商快取,返回304;不一致則返回新的last-modified和檔案並返回200;

f5重新整理,瀏覽器會設定max-age=0,跳過強快取判斷,會進行協商快取判斷;

ctrl+f5重新整理,跳過強快取和協商快取,直接從伺服器拉取資源。

瀏覽器快取機制 小總結

宣告 本文 載 有小調整 瀏覽器快取型別 有兩種,強快取和協商快取 1.強快取 不會向伺服器傳送請求,直接從快取中讀取資源,在chrome控制台的network選項中可以看到該請求返回200的狀態碼,並且size顯示from disk cache或from memory cache 2.協商快取 向...

瀏覽器快取機制

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

瀏覽器快取機制

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