瀏覽器快取機制,強快取,弱快取

2021-10-09 16:19:33 字數 2887 閱讀 7087

瀏覽器快取流程

為什麼要有etag?

哪些請求不能被快取?

使用者操作行為與快取的關係

http狀態碼及區別

資料庫資料快取

伺服器端快取

瀏覽器端快取

web應用層快取

下面著重關注一下瀏覽器快取

新鮮度(過期機制):也就是快取副本有效期。乙個快取副本必須滿足以下任一條件,瀏覽器會認為它是有效的,足夠新的,而直接從快取中獲取副本並渲染:

校驗值(驗證機制):伺服器返回資源的時候有時在控制頭資訊帶上這個資源的實體標籤etag(entity tag),它可以用來作為瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配,說明資源已經被修改或過期,瀏覽器需求重新獲取資源內容。

使用html的 meta 標籤

使用快取有關的http訊息報頭

cache-control總結

cache-control: max-age

max-age(單位為s)指定設定快取最大的有效時間,定義的是時間長短。當瀏覽器向伺服器傳送請求後,在max-age這段時間裡瀏覽器就不會再向伺服器傳送請求了。我們來找個資源看下。比如qq推廣上的css資源,max-age=3600,也就是說快取有效期為3600秒(也就是1h)。於是在1天內都會使用這個版本的資源,即使伺服器上的資源發生了變化,瀏覽器也不會得到通知。

cache-control: max-age=***x,public

客戶端和**伺服器都可以快取該資源;

客戶端在***秒的有效期內,如果有請求該資源的需求的話就直接讀取快取,statu code:200 ,如果使用者做了重新整理操作,就向伺服器發起http請求

cache-control: max-age=***x,private

只讓客戶端可以快取該資源;**伺服器不快取

客戶端在***秒內直接讀取快取,statu code:200

cache-control: max-age=***x,immutable

客戶端在***秒的有效期內,如果有請求該資源的需求的話就直接讀取快取,statu code:200 ,即使使用者做了重新整理操作,也不向伺服器發起http請求

cache-control: no-cache

跳過設定強快取,但是不妨礙設定協商快取;一般如果你做了強快取,只有在強快取失效了才走協商快取的,設定了no-cache就不會走強快取了,每次請求都回詢問服務端。

cache-control: no-store

不快取,這個會讓客戶端、伺服器都不快取,也就沒有所謂的強快取、協商快取了。

expires

快取過期時間,用來指定資源到期的時間,是伺服器端的具體的時間點。也就是說, expires=max-age + 請求時間 ,需要和last-modified結合使用。但cache-control的優先順序更高。expires是web伺服器響應訊息頭欄位,在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩訪問資料,而無需再次請求。

last-modified & if-modified-since

伺服器端檔案的最後修改時間,需要和cache-control共同使用,是檢查伺服器端資源是否更新的一種方式。當瀏覽器再次進行請求時,會向伺服器傳送if-modified-since報頭,詢問last-modified時間點之後資源是否被修改過。如果沒有修改,則返回碼為304,使用快取;如果修改過,則再次去伺服器請求資源,返回碼和首次請求相同為200,資源為伺服器最新資源。

etag & & if-none-match

根據實體內容生成一段hash字串,標識資源的狀態,由服務端產生。瀏覽器會將這串字串傳回伺服器,驗證資源是否已經修改,如果沒有修改,則返回304

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

etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號,能夠更加準確的控制快取。last-modified與etag是可以一起使用的,伺服器會優先驗證etag,一致的情況下,才會繼續比對last-modified,最後才決定是否返回304。

無法被瀏覽器快取的請求:

http資訊頭中包含cache-control:no-cache,pragma:no-cache,或cache-control:max-age=0等告訴瀏覽器不用快取的請求

需要根據cookie,認證資訊等決定輸入內容的動態請求是不能被快取的

經過https安全加密的請求(有人也經過測試發現,ie其實在頭部加入cache-control:max-age資訊,firefox在頭部加入cache-control:public之後,能夠對https的資源進行快取,參考《https的七個誤解》)

post請求無法被快取

http響應頭中不包含last-modified/etag,也不包含cache-control/expires的請求無法被快取

狀態型別

說明200

form memory cache

不請求網路資源,資源在記憶體當中,一般指令碼、字型、會存在記憶體當中

200form disk cache

不請求網路資源,在磁碟當中,一般非指令碼會存在記憶體當中,如css等

200資源大小數值

304報文大小

請求服務端發現資源沒更新,使用本地資源

瀏覽器快取機制介紹之http快取 強快取 協商快取

快取的基本策略是拿空間換時間.意思就是我們將資料儲存起來,犧牲空間,在下次使用的時候直接拿儲存的,減少請求時間.瀏覽器快取機制有四個方面,它們按照獲取資源時請求的優先順序依次排列如下 快取是伺服器端來設定的,前端無法設定 頁面通過http獲取資源,如果每次資源都通過http去獲取,無疑是很消耗效能的...

前端快取 瀏覽器快取機制

瀏覽器第一次向伺服器發起該請求後拿到請求結果後,將請求結果和快取標識存入瀏覽器快取,瀏覽器對於快取的處理是根據第一次請求資源時返回的響應頭來確定的。瀏覽器中的快取作用分為兩種情況,一種是需要傳送http請求,一種是不需要傳送。expires 即過期時間 expires max age 請求時間 存在...

瀏覽器強快取與協商快取

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