網絡篇—瀏覽器緩存（一）

網絡篇—瀏覽器緩存（一）

1、緩存類型

• 有兩種，強緩存和協商緩存

1. 強緩存

   • 不會向服務器發送請求，直接從緩存中讀取資源；

2. 協商緩存

   • 向服務器發送請求，服務器會根據這個請求的request header的一些參數來判斷是否命中協商緩存，若是命中，則返回304狀態碼並帶上新的response header通知瀏覽器從緩存中讀取資源；

3. 異同

   • 共同點：都是從客戶端緩存中讀取資源；
   • 區別：強緩存不會發請求，協商緩存會發請求；

2、和緩存有關的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。

3、瀏覽器緩存過程

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；

4、設置瀏覽器緩存

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的緩存

• 這些主要經過服務器的配置來實現這個技術；

5、用戶行爲對瀏覽器緩存的控制

1. 地址欄訪問，連接跳轉是正經常使用戶行爲，將會觸發瀏覽器緩存機制；
2. F5刷新，瀏覽器會設置max-age=0，跳過強緩存判斷，會進行協商緩存判斷；
3. ctrl+F5刷新，跳過強緩存和協商緩存，直接從服務器拉取資源