網路篇—瀏覽器快取(一)

網路篇—瀏覽器快取(一)
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

網路篇—瀏覽器快取(一)

一、快取型別

  • 有兩種,強快取和協商快取
  1. 強快取

    • 不會向伺服器傳送請求,直接從快取中讀取資源;
  2. 協商快取

    • 向伺服器傳送請求,伺服器會根據這個請求的request header的一些引數來判斷是否命中協商快取,如果命中,則返回304狀態碼並帶上新的response header通知瀏覽器從快取中讀取資源;
  3. 異同

    • 共同點:都是從客戶端快取中讀取資源;
    • 區別:強快取不會發請求,協商快取會發請求;

二、和快取有關的header

  1. 強快取
  • Expires:response header裡的過期時間(絕對時間),瀏覽器再次載入資源時,如果在這個過期時間內,則命中強快取。expires: Wed, 16 May 2018 13:23:04 GMT;
  • Cache-Control:當值設為max-age=300時,則代表在這個請求正確返回時間(瀏覽器也會記錄下來)的5分鐘內再次載入資源,就會命中強快取。
  • Expires和Cache-Control的異同:

    • Expires 是http1.0的產物,設定的是絕對日期時間;
    • Cache-Control是http1.1的產物,設定max-age設定的是相對時間;
    • 兩者同時存在的話,Cache-Control優先順序高於Expires
  1. 協商快取
  • ETag和If-None-Match

    1. Etag是上一次載入資源時,伺服器返回的response header,是對該資源的一種唯一標識,只要資源有變化,Etag就會重新生成;
    2. 瀏覽器在下一次載入資源向伺服器傳送請求時,會將上一次返回的Etag值放到request header裡的If-None-Match裡,伺服器接受到If-None-Match的值後,會拿來跟該資原始檔的Etag值做比較,如果相同,則表示資原始檔沒有發生改變,命中協商快取。
  • Last-Modified和If-Modified-Since

    • Last-Modified是該資原始檔最後一次更改時間,伺服器會在response header裡返回,同時瀏覽器會將這個值儲存起來,在下一次傳送請求時,放到request header裡的If-Modified-Since裡,伺服器在接收到後也會做比對,如果相同則命中協商快取。
  • 兩種協商快取的區別:

    • 精確度上,Etag要優於Last-Modified。Last-Modified的時間單位是秒,如果某個檔案在1秒內改變了多次,那麼他們的Last-Modified其實並沒有體現出來修改,但是Etag每次都會改變確保了精度;
    • 在效能上,Etag要遜於Last-Modified,畢竟Last-Modified只需要記錄時間,而Etag需要伺服器通過演算法來計算出一個hash值;
    • 在優先順序上,伺服器校驗優先考慮Etag。

三、瀏覽器快取過程

  1. 瀏覽器第一次載入資源,伺服器返回200,瀏覽器將資原始檔從伺服器上請求下載下來,並把response header及該請求的返回時間一併快取;
  2. 下一次載入資源時,先比較當前時間和上一次返回200時的時間差,如果沒有超過cache-control設定的max-age,則沒有過期,命中強快取,不發請求直接從本地快取讀取該檔案(如果瀏覽器不支援HTTP1.1,則用expires判斷是否過期);
  3. 如果時間過期,則向伺服器傳送header帶有If-None-Match和If-Modified-Since 的請求;
  4. 伺服器收到請求後,優先根據Etag的值判斷被請求的檔案有沒有做修改,Etag值一致則沒有修改,命中協商快取,返回304;如果不一致則有改動,直接返回新的資原始檔帶上新的Etag值並返回 200;
  5. 如果伺服器收到的請求沒有Etag值,則將If-Modified-Since和被請求檔案的最後修改時間做比對,一致則命中協商快取,返回304;不一致則返回新的last-modified和檔案並返回 200;

四、設定瀏覽器快取

  1. 通過HTML的META設定expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Sun Oct 15 2018 20:39:53 GMT 0800 (CST)" />
  • 此方法僅對該網頁有效,對網頁中的圖片或其他請求無效。
  1. 圖片,css,js,flash的快取
  • 這些主要通過伺服器的配置來實現這個技術;

五、使用者行為對瀏覽器快取的控制

  1. 位址列訪問,連結跳轉是正常使用者行為,將會觸發瀏覽器快取機制;
  2. F5重新整理,瀏覽器會設定max-age=0,跳過強快取判斷,會進行協商快取判斷;
  3. ctrl F5重新整理,跳過強快取和協商快取,直接從伺服器拉取資源

相關文章

前端開發 最新文章