瀏覽器快取和HTTP快取協商(很清晰)

2021-06-28 17:36:20 字數 4182 閱讀 4056

**:

瀏覽器快取機制,其實主要就是http協議定義的快取機制(如: expires; cache-control等)。但是也有非http協議定義的快取機制,如使用htmlmeta 標籤,web開發者可以在html頁面的節點中加入標籤,**如下:

html code

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

下面我主要介紹http協議定義的快取機制。

expires

策略

expires是web伺服器響應訊息頭欄位,在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩訪問資料,而無需再次請求。

下面是寶寶pk專案中,瀏覽器拉取jquery.jsweb伺服器的響應頭:

注:date頭域表示訊息傳送的時間,時間的描述格式由rfc822定義。例如,date:mon,31 dec 2001 04:25:57gmt。

web伺服器告訴瀏覽器在2012-11-2803:30:01這個時間點之前,可以使用快取檔案。傳送請求的時間是2012-11-28 03:25:01,即快取5分鐘。

不過expires 是http 1.0的東西,現在預設瀏覽器均預設使用http 1.1,所以它的作用基本忽略。

cache-control

策略(重點關注

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

cache-control

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

協議頭cache-control    

值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各個訊息中的指令含義如下:

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

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

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

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

5.max-age

指示客戶機可以接收生存期不大於指定時間(以秒為單位)的響應。

6.min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。

7.max-stale指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼客戶機可以接收超出超時期指定值之內的響應訊息。

還是上面那個請求,web伺服器返回的cache-control頭的值為max-age=300,即5分鐘(和上面的expires時間一致,這個不是必須的)。

last-modified/if-modified-since

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

l  last-modified:標示這個響應資源的最後修改時間。web伺服器在響應請求時,告訴瀏覽器資源的最後修改時間。

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

etag/if-none-match

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

l  etag:web伺服器響應請求時,告訴瀏覽器當前資源在伺服器的唯一標識(生成規則由伺服器覺得)。apache中,etag的值,預設是對檔案的索引節(inode),大小(size)和最後修改時間(mtime)進行hash後得到的。

l  if-none-match:當資源過期時(使用cache-control標識的max-age),發現資源具有etage宣告,則再次向web伺服器請求時帶上頭if-none-match(etag的值)web伺服器收到請求後發現有頭if-none-match 則與被請求資源的相應校驗串進行比對,決定返回200或304

既生

last-modified

何生etag

你可能會覺得使用last-modified已經足以讓瀏覽器知道本地的快取副本是否足夠新,為什麼還需要etag(實體標識)呢?http1.1中etag的出現主要是為了解決幾個last-modified比較難解決的問題:

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

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

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

etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號,能夠更加準確的控制快取。last-modified與etag是可以一起使用的,伺服器會優先驗證

etag,一致的情況下,才會繼續比對last-modified,最後才決定是否返回304

使用者行為與快取

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

使用者操作

expires/cache-control

last-modified/etag

位址列回車有效

有效頁面鏈結跳轉有效

有效新開視窗有效

有效前進、後退有效

有效f5重新整理無效

有效ctrl+f5重新整理無效

無效

(補充)使用:

我們可以在響應報文輸出時指定頭部   expires:具體時間、或  cache-control:max-age=10  或  etag  或  last-modified 的方式去使瀏覽器快取生效。

當瀏覽器發現響應報文有expires或cache-control,即啟用本地快取;當發現有 etag  或  last-modified,則下次傳送請求給伺服器時,會帶上對應的if-modified-since 或 if-none-match首部去詢問。

nginx的話,如果指定expires指令,則它會在響應報文中新增expires和cache-control:max-age。nginx預設給靜態檔案的響應會加上 last-modified 首部,舊版的nginx不自動帶上etag,nginx認為使用last-modified已經足夠了,我也認為nginx在實際使用中意義差別不大。

瀏覽器快取 強制快取和協商快取

瀏覽器快取是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件 瀏覽器快取主要指http的快取 即協議層,協議層快取可以被分為強制快取和協商快取。兩種情況,一種是需要傳送http請求,一種是不需要傳送。協議中可以造成強制快取的字段有 ht...

瀏覽器強快取與協商快取

瀏覽器強快取與協商快取 當使用者在瀏覽器中輸入url後,瀏覽器首先會檢視快取中是否有相應資源,若有則需要判斷快取的資源是否過期,主要通過cache control和expires欄位來判斷,若沒有過期則直接使用該資源,該過程就是強快取 若資源過期了則再向伺服器發起請求,並在請求頭中帶上初次請求該資源...

瀏覽器的 強制快取 協商快取

強制快取 1 expires http 1.0 中可以使用響應頭部字段 expires 來設定快取時間,它對應乙個未來的時間戳。客戶端第一次請求時,服務端會在響應頭部新增 expires 字段。當瀏覽器再次傳送請求時,先會對比當前時間和 expires 對應的時間,如果當前時間早於 expires ...