瀏覽器快取機制

2021-07-09 10:32:22 字數 3531 閱讀 8324

瀏覽器快取機制

瀏覽器快取機制,其實主要就是

協議定義的快取機制(如:

expires

;cache-control

等)。但是也有非

協議定義的快取機制,如使用

html meta 

標籤,web

開發者可以在

html

頁面的節點中加入

標籤,**如下:

上述**的作用是告訴瀏覽器當前頁面不被快取,每次訪問都需要去伺服器拉取。使用上很簡單,但只有部分瀏覽器可以支援,而且所有快取**伺服器都不支援,因為**不解析

html

內容本身。

下面我主要介紹

協議定義的快取機制。

expires

是web

伺服器響應訊息頭欄位,在響應

請求時告訴

瀏覽器在過期時間前

瀏覽器可以直接從瀏覽器緩訪問資料,而無需再次請求。

下面是寶寶

pk專案中,瀏覽器拉取

jquery.js web

伺服器的響應頭:

頭域表示訊息傳送的時間,時間的描述格式由

rfc822

定義。例如,

date: mon,31 dec 2001 04:25:57gmt。

web伺服器告訴瀏覽器在

2012-11-28 03:30:01

這個時間點之前,可以使用快取檔案。傳送請求的時間是

2012-11-28 03:25:01

,即快取

5分鐘。 不過

expires 

是http 1.0

的東西,現在預設瀏覽器均預設使用

,所以它的作用基本忽略。

cache-control

與expires

的作用一致,都是指明當前資源的有效期,控制瀏覽器是否直接從瀏覽器緩訪問資料還是重新發請求到伺服器取資料。

只不過cache-control

的選擇更多,設定更細緻,如果同時設定的話,其優先順序高於

還是上面那個請求,

web伺服器返回的

cache-control

頭的值為

max-age=300,即5

分鐘(和上面的

expires

時間一致,這個不是必須的)。

要配合cache-control

使用。

llast-modified

:標示這個響應資源的最後修改時間。

web伺服器在響應請求時,告訴瀏覽器資源的最後修改時間。

lif-modified-since

:當資源過期時(使用

cache-control

標識的max-age

),發現資源具有

last-modified

宣告,則再次向

web伺服器請求時帶上頭

if-modified-since

,表示請求時間。

web伺服器收到請求後發現有頭

if-modified-since 

則與被請求資源的最後修改時間進行比對。若最後修改時間較新,說明資源又被改動過,則響應整片資源內容(寫在響應訊息包體內),

;若最後修改時間較舊,說明資源無新修改,則響應

無需包體,節省瀏覽

),告知瀏覽器繼續使用所儲存的

cache

。etag/if-none-match

也要配合

cache-control

使用。

letag

:web

伺服器響應請求時,告訴瀏覽器當前資源在伺服器的唯一標識(生成規則由伺服器覺得)。

apache

中,etag

的值,預設是對檔案的索引節(

inode

),大小(

size

)和最後修改時間(

mtime

)進行hash

後得到的。

lif-none-match

:當資源過期時(使用

cache-control

標識的max-age

),發現資源具有

etage

宣告,則再次向

web伺服器請求時帶上頭

if-none-match

(etag

的值)。

web伺服器收到請求後發現有頭

if-none-match 

則與被請求資源的相應校驗串進行比對,決定返回

200或

304。

你可能會覺得使用

last-modified

已經足以讓瀏覽器知道本地的快取副本是否足夠新,為什麼還需要

etag

(實體標識)呢?

中etag

的出現主要是為了解決幾個

last-modified

比較難解決的問題: l

last-modified

標註的最後修改只能精確到秒級,如果某些檔案在

1秒鐘以內,被修改多次的話,它將不能準確標註檔案的修改時間

l如果某些檔案會被定期生成,當有時內容並沒有任何變化,但

last-modified

卻改變了,導致檔案沒法使用快取

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

etag

是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號,能夠更加準確的控制快取。

last-modified

與etag

是可以一起使用的,

伺服器會優先驗證

etag

,一致的情況下,才會繼續比對

last-modified

,最後才決定是否返回

304。

瀏覽器快取行為還有使用者的行為有關!!!

瀏覽器第一次請求:

瀏覽器再次請求時:

瀏覽器快取機制

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

瀏覽器快取機制

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

瀏覽器快取機制

瀏覽器快取機制 cookie操作 設定cookie document.cookie name name expires new date 100000 path path 讀取cookie var cookie document.cookie 解析cookie 清除cookie document.c...