前端瀏覽器緩存

一、Cache-Cantrol

  1. max-age(單位為s)指定設置緩存最大的有效時間,定義的是時間長短。當瀏覽器向服務器發(fā)送請求后,在max-age這段時間里瀏覽器就不會再向服務器發(fā)送請求了。
    比如一個css資源,max-age=2592000,也就是說緩存有效期為2592000秒(也就是30天),會配合Date屬性。于是在30天內都會使用這個版本的資源,即使服務器上的資源發(fā)生了變化,瀏覽器也不會得到通知。max-age會覆蓋掉Expires,后面會有討論。
    讀取緩存數據條件:上次緩存時間(客戶端的)+max-age < 當前時間(客戶端的)
  2. s-maxage(單位為s)同max-age,只用于共享緩存(比如CDN緩存)。
    比如,當s-maxage=60時,在這60秒中,即使更新了CDN的內容,瀏覽器也不會進行請求。也就是說max-age用于普通緩存,而s-maxage用于代理緩存。如果存在s-maxage,則會覆蓋掉max-age和Expires header。
  3. public 指定響應會被緩存,并且在多用戶(不同的窗口)間共享。如果沒有指定public還是private,則默認為public。
  4. private 響應只作為私有的緩存,不能在用戶間共享。如果要求HTTP認證,響應會自動設置為private。private 響應只能在私有緩存中被緩存,不能放在代理緩存上。對一些用戶信息敏感的資源,通常需要設置為private。
  5. no-cache 指定不緩存響應,表明資源不進行緩存,但是設置了no-cache之后并不代表瀏覽器不緩存,而是在緩存前要向服務器確認資源是否被更改。因此有的時候只設置no-cache防止緩存還是不夠保險,還可以加上private指令,將過期時間設為過去的時間。
  6. no-store 絕對禁止緩存,一看就知道如果用了這個命令當然就是不會進行緩存啦~每次請求資源都要從服務器重新獲取。
  7. must-revalidate 指定如果頁面是過期的,則去服務器進行獲取。這個指令并不常用,就不做過多的討論了。

二、Expires

緩存過期時間,用來指定資源到期的時間,是服務器端的具體的時間點。也就是說,Expires=max-age + 請求時間,需要和Last-modified結合使用。但在上面我們提到過,cache-control的優(yōu)先級更高。 Expires是Web服務器響應消息頭字段,在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據,而無需再次請求。
Expires是較老的強緩存管理header,由于它是服務器返回的一個絕對時間,這樣存在一個問題,如果客戶端的時間與服務器的時間相差很大(比如時鐘不同步,或者跨時區(qū)),那么誤差就很大,所以在HTTP 1.1版開始,使用Cache-Control: max-age=秒替代。
Cache-Control描述的是一個相對時間,在進行緩存命中的時候,都是利用客戶端時間進行判斷,所以相比較Expires,Cache-Control的緩存管理更有效,安全一些。

三、Last-modified

服務器端文件的最后修改時間,需要和cache-control共同使用,是檢查服務器端資源是否更新的一種方式。當瀏覽器再次進行請求時,會向服務器傳送If-Modified-Since報頭,詢問Last-Modified時間點之后資源是否被修改過。如果沒有修改,則返回碼為304,使用緩存;如果修改過,則再次去服務器請求資源,返回碼和首次請求相同為200,資源為服務器最新資源。

四、ETag

根據實體內容生成一段hash字符串,標識資源的狀態(tài),由服務端產生。瀏覽器會將這串字符串傳回服務器,驗證資源是否已經修改,如果沒有修改,過程如下:



使用ETag可以解決Last-modified存在的一些問題:

  • 某些服務器不能精確得到資源的最后修改時間,這樣就無法通過最后修改時間判斷資源是否更新
  • 如果資源修改非常頻繁,在秒以下的時間內進行修改,而Last-modified只能精確到秒
  • 一些資源的最后修改時間改變了,但是內容沒改變,使用ETag就認為資源還是沒有修改的。

補充

  1. HTTP通過緩存將服務器資源的副本保留一段時間,這段時間稱為新鮮度限值。這在一段時間內請求相同資源不會再通過服務器。HTTP協議中Cache-Control 和 Expires可以用來設置新鮮度的限值,前者是HTTP1.1中新增的響應頭,后者是HTTP1.0中的響應頭。二者所做的事時都是相同的,但由于Cache-Control使用的是相對時間,而Expires可能存在客戶端與服務器端時間不一樣的問題,所以我們更傾向于選擇Cache-Control。
  2. 優(yōu)先級
    EtagLast-modified 可靠,哪怕是打開文件再直接進行保存也會刷新Last-modified時間,Cache-Control >Expires
  3. 強緩存和弱緩存區(qū)分。強緩存會直接讀取瀏覽器緩存,如Cache-Control、Expires。弱緩存向服務端發(fā)出請求,若未修改資源返回304,若資源已更新返回正常的200。Last-modified和ETag屬于弱緩存。Expires和Last-modified都需要配合Cache-Control使用,會先判斷強緩存是否失效,失效才會需要弱緩存。

附 瀏覽器刷新與緩存

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 轉載:瀏覽器緩存知識小結及應用 閱讀目錄 1. 瀏覽器緩存基本認識 2. 強緩存的原理 3. 強緩存的管理 4. ...
    meng_philip123閱讀 1,171評論 4 18
  • 瀏覽器緩存,也就是客戶端緩存,既是網頁性能優(yōu)化里面靜態(tài)資源相關優(yōu)化的一大利器,也是無數web開發(fā)人員在工作過程不可...
    單純的土豆閱讀 436評論 0 1
  • 瀏覽器緩存,也就是客戶端緩存,既是網頁性能優(yōu)化里面靜態(tài)資源相關優(yōu)化的一大利器,也是無數web開發(fā)人員在工作過程不可...
    Www劉閱讀 608評論 0 1
  • 淺談瀏覽器Http的緩存機制 ? ? ? ? ? ? ? ? 針對瀏覽器的http緩存的分析也算是老生常談了,每隔...
    meng_philip123閱讀 1,130評論 0 10
  • 四月季節(jié)踏青坡,桃杏花開柳眏河。 嫩草濕潤野花伴,白云下面盡情歌。
    老槐樹閱讀 231評論 1 1

友情鏈接更多精彩內容