JavaScript基礎概念之----瀏覽器緩存策略

兩個概念

• 強緩存
  用戶發送的請求，直接從客戶端緩存中獲取，不發送請求到服務器，不與服務器發生交互行爲。

• 協商緩存
  用戶發送的請求，發送到服務器後，由服務器斷定是否從緩存中獲取資源。

• 二者共同點：客戶端得到的數據最後都是從客戶端緩存中得到。

• 二者的區別：從名字就能夠看出，強緩存不與服務器交互，而協商緩存則須要與服務器交互。

四個過程

一、判斷瀏覽器是否有緩存

所謂「客戶端緩存」就是指用戶設備中本地資源。不一樣瀏覽器緩存文件的地址也不盡相同。

總結來講就是：查找文件是否存在的問題

二、緩存是否過時

有兩個字段 ：

• expires
  Http1.0 中的標準，代表過時時間，注意此處的時間都是指的是服務器的時間。

  存在的問題：服務器時間與客戶端時間的不一致，就會致使緩存跟期待效果出現誤差。

• Cache-Control
  Http1.1 中的標準，能夠當作是 expires 的補充。使用的是相對時間的概念。
  Cache-Control的屬性設置：
       1）max-age: 設置緩存的最大的有效時間，單位爲秒（s）。max-age會覆蓋掉Expires
       2) s-maxage: 只用於共享緩存，好比CDN緩存（s -> share）。與max-age 的區別是：max-age用於普通緩存，而s-maxage用於代理緩存。若是存在s-maxage,則會覆蓋max-age 和 Expires.
       3) public：響應會被緩存，而且在多用戶間共享。默認是public。
       4) private: 響應只做爲私有的緩存，不能在用戶間共享。若是要求HTTP認證，響應會自動設置爲private。
       5）no-cache: 指定不緩存響應，代表資源不進行緩存。可是設置了no-cache以後並不表明瀏覽器不緩存，而是在緩存前要向服務器確認資源是否被更改。所以有的時候只設置no-cache防止緩存仍是不夠保險，還能夠加上private指令，將過時時間設爲過去的時間。
       6）no-store: 絕對禁止緩存。
       7）must-revalidate: 若是頁面過時，則去服務器進行獲取。

設置cache-control規則如圖下：

 判斷緩存是否過時步驟是：

1） 查看是否有cache-control 的max-age / s-maxage , 若是有，則用服務器時間date值 + max-age/s-maxage 的秒數計算出新的過時時間，將當前時間與過時時間進行比較，判斷是否過時
2）查看是否有cache-control 的max-age / s-maxage，若是沒有，則用expires 做爲過時時間比較

三、跟服務器協商是否使用緩存

到這一步的時候，瀏覽器會向服務器發送請求，同時若是上一次的緩存中有Last-modified 和 Etag 字段，
瀏覽器將在request header 中加入If-Modified-Since（對應於Last-modified）， 和If-None-Match（對應於Etag）。

• Last-modified: 代表請求的資源上次的修改時間。
• If-Modified-Since：客戶端保留的資源上次的修改時間。
• Etag：資源的內容標識。（不惟一，一般爲文件的md5或者一段hash值，只要保證寫入和驗證時的方法一致便可）

• If-None-Match： 客戶端保留的資源內容標識。

  1） 分佈式系統儘可能關閉Etag，由於每臺機器生成的Etag都不同。
  2）分佈式系統裏多臺機器間文件的Last-Modified必須一致，以避免負載均衡不一樣致使對比失敗。

一般狀況下，若是同時發送 If-None-Match 、If-Modified-Since字段，服務器只要比較etag 的內容便可，固然具體處理方式，看服務器的約定規則。

三、協商緩存

在這個階段，服務器通常會將Cache-control、expires 、last-modified、date、etag 等字段在response header 中返回，便於下次緩存。固然具體的場景，也是看服務器的約定規則設定。

用戶行爲