收集篇—瀏覽器緩存（一）

一、緩存範例

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

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革新，跳過強緩存和協商緩存，直接從服務器拉取資本