瀏覽器緩存機制

瀏覽器緩存機制:瀏覽器緩存機制,其實主要就是http協議定義的緩存機制(如:Expires;Cache-control等)。也有非http協議定義的緩存機制,如html meta標簽:<meta http-equiv="Pragma" content="no-cache">,作用是告訴瀏覽器當前頁面不被緩存,每次訪問都需要去服務器拉取。
注意:瀏覽器會在第一次請求完服務器后得到響應,我們可以在服務器中設置這些響應,從而達到在以后的請求中盡量減少甚至不從服務器端獲取資源的目的。瀏覽器是依靠請求和響應中的頭信息來控制緩存的。
讀取緩存的流程:有兩步,首先根據約定時間,約定時間過來再來判斷下面兩種方式。


image.png

Expires與Cache-Control:就是服務器端用來約定和客戶端的有效時間。


image.png

Expires規定了緩存失效(Date為當前時間),而Cache-Control的max-age規定了緩存有效時間(2552s)。Expires是http1.0的東西,而Cache-Control是http1.1的,規定如果max-age和Expires同時存在,前者優先級高于后者。Cache-Control的參數可以設置如下值:
image.png

為了決定瀏覽器是讀取本地緩存還是去服務器拉取數據,就需要判斷服務器上的文件是否有更新,有以下兩種方式:
一:在上一次服務器端告訴客戶端約定的有效期的同時,告訴客戶端該文件最后修改的時間,當再次嘗試從服務器端下載該文件的時候,check下該文件有沒有更新(對比最后修改時間),如果沒有,則讀取緩存。(last-Modified / if-Modified-Since 要配合Cache-Control使用)

last-Modified是響應頭返回來的信息,是服務器告訴瀏覽器被請求文件最后一次修改的時間;當瀏覽器再次請求該文件的時候,請求頭中包含了if-Modified-Since項,將這個日期和服務器端該文件最后一次修改日期對比,如果相同,則相應http304,從緩存讀數據;如果不相同,文件更新了,則相應http200,返回數據,同時通過響應頭更新last-Modified的值。

二:在上一次服務器端告訴客戶端約定有效期的同時,同時告訴客戶端該文件的版本號,當服務器端文件更新的時候,改變版本號,再次發送請求的時候check一下版本號是否一致就行了,如一致,則直接讀取緩存。(ETag / if-None-Match 要配合Cache-Control使用 )

ETag并不是文件的版本號,而是一串可以代表該文件唯一的字符串(Apache中,ETag的值,默認是對文件的索引節點,大小和最后修改時間進行Hash后得到的。),當客戶端發現和服務器端約定的直接讀取緩存的時間過了,就在請求頭中發送if-None-Match選項,值為上次請求后響應頭的ETag值,該值在服務器端和服務端代表改文件唯一的字符串對比(如果服務器端該文件改變了,該值就會變),如果相同,則相應http304,客戶端直接讀取緩存,否則,http200,下載正確的數據,更新ETag值。

當發送的請求頭中同時存在if-None-Match和if-Modified-Since時,前者會優先于后者,忽略后者。http1.1中ETag的出現主要是為了解決幾個Last-Modified比較難解決的問題:
1.last-Modified標注的最后修改只能精確到秒級,如果某些文件在一秒鐘以內,被修改多次的話,它將不能準確標注文件的修改時間。
2.如果某些文件會被定期生成,但有時內容并沒有任何變化(僅僅改變了時間),但last-Modified卻改變了,導致文件沒法使用緩存。
3.有可能存在服務器沒有準確獲取文件修改時間,或者與代理服務器時間不一致等情況。

無法被瀏覽器緩存的請求:
1.http信息頭中包含Cache-Control:no-cache,pragma:no-cache(http1.0),或cache-Control:max-age=0等告訴瀏覽器不用緩存的請求。
2.需要根據cookie,認證信息等決定輸入內容的動態請求是不能被緩存的
3.經過https安全加密的請求
4.Post請求無法被緩存。
5.http響應頭中不包含last-Modified / Etag,也不包含Cache-Control / Expires的請求無法被緩存。

用戶行為與緩存:


image.png

當用戶在按F5進行刷新的時候,會忽略Expries/Cache-Control的設置,會再次發送請求去服務器請求,而Last-Modified/Etag還是有效的,服務器會根據情況判斷返回304還是200;而當用戶使用ctrl+F5進行強制刷新的時候,只是所有的緩存機制都將失效,重新從服務器去拉取資源。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 緩存一直是前端優化的主戰場, 利用好緩存就成功了一半. 本篇從http請求和響應的頭域入手, 讓你對瀏覽器緩存有個...
    易斯大大閱讀 838評論 0 1
  • 現代瀏覽器為了最大化的復用資源,減少網絡請求,都提供了緩存機制。所謂緩存,就是在某次網絡請求過程中保存的一份資源副...
    柏丘君閱讀 316評論 0 0
  • 瀏覽器緩存機制,其實主要就是HTTP協議定義的緩存機制(如:Expires;Cache-control等)。但是也...
    raincoco閱讀 288評論 0 0
  • 簡單來說,瀏覽器緩存就是把一個已經請求過的資源拷貝一份存儲起來,當下次需要該資源時,瀏覽器會根據緩存機制決定直接使...
    淘淘笙悅閱讀 1,916評論 2 14
  • 瀏覽器緩存 瀏覽器緩存的知識是前端工程師必須要掌握的,因為這些知識直接影響到你的頁面的用戶體驗,影響到你的頁面的加...
    _Charles閱讀 519評論 0 3