面試准備 - 瀏覽器緩存

分為兩種:強緩存與協商緩存, 強緩存是不需要發送HTTP請求的, 而協商緩存需要; 發送請求之前, 會先檢查一下強緩存, 如果命中直接使用，否則就進入下一步;

 

 

強緩存

 

 

Expires強緩存(http/1.0):

Expires字面意思表示的是有效期, 表示的就是一個具體的時間. 例如：Expires: Wed, Nov 11 2020 08:00:00 GMT；

但是服務器的時間與瀏覽器的時間不一致的時候(比如你手動修改了本地的時間), 那么就可能會造成緩存失效, 因此這種方式強緩存方式並不是很准確, 它也因此在HTTP/1.1中被摒棄了.

 

Cache-Control強緩存（http/1.1）:

1.返回頭Response Headers 有 key 是 Cache-Control鍵值對；根據值判斷是否緩存，確定緩存，那么不需要發送HTTP請求；

2.會覆蓋Expires;

3.HTTP/1.1使用的是Cache-Control來判斷，下面是常用指令，可以組合使用；

public和private：

public:客戶端和代理服務器都可以緩存；比如一個請求要經歷 Browser -> proxy1 -> proxy2 -> Server. 下次再請求同一資源的時候, 直接到proxy1中拿緩存的東西而不必向proxy2拿；

private: 只有客戶端（瀏覽器）緩存，服務器不緩存；

現在的應用基本不會有B/S結構，整個web架構都是一層層堆砌起來的，瀏覽器到服務器中間或者還有很多層代理服務；業務邏輯產生的內容來看，緩存分為2類，公共的資源（最新文章列表）和私有資源（猜你喜歡），如果服務器都緩存，當海量請求發送過來，服務器分分鍾都可能被壓爆，所以才會對緩存分級，對應的就是 Cache-Control 的 public 和 private。中間層的代理服務器不應該把 private 的內容給緩存下來；

no-cache: 表示不進行強緩存驗證, 而是用協商緩存來驗證.

no-store: 所有內容都不會被緩存, 也不進行協商緩存

max-age: 過期時間, max-age=300表示在300s后緩存內容失效.

max-stale: 能容忍的最大過期時間。max-stale指令表示願意接收一個已經過期了的響應。

 

例子：Cache-Control: public, max-age=300 任何對象(客戶端, 代理服務器等)緩存, 且過期時長為300秒；

 

Cache-Control 與 Expires 對比:

• Expires產於HTTP/1.0, Cache-control產於HTTP/1.1;

• Expires設置的是一個具體的時間, Cache-control 可以設置具體時常還有其它的屬性;

• 兩者同時存在, Cache-control的優先級更高;

• 在不支持HTTP/1.1的環境下, Expires就會發揮作用

 

協商緩存

協商緩存（前提是cache-control標識的 max-age 過期了，或者設置了協商緩存）

概括來說就是瀏覽器會攜帶緩存標識(tag)向服務器發送請求, 服務器會根據緩存標識(tag)來決定是否使用緩存；

兩種情況：1.協商緩存生效，返回304 Not Modified; 2.返回200數據庫獲取最新數據;

緩存標識(tag)也是有兩種: Last-Modified 和 ETag;

 

協商緩存 Last-Modified / If-Modified-Since：

1.第一次向服務器請求這個資源，服務器返回資源時, 在響應體的header中添加Last-Modified, 值為該資源在服務器上最后的修改時間；

2.瀏覽器接收到后緩存文件和這個header，再次請求檢測到有Last-Modified, 就會在請求頭中添加If-Modified-Since這個header, 值就是Last-Modified；

3.服務器再次接收到該資源的請求, 則根據If-Modified-Since與服務器的最后修改時間做對比；

4.對比相同，返回304，不同則重新獲取數據，返回200(同時返回最新的Last-Modified)

 

協商緩存：ETag / If-None-Match：

ETag其實與Last-Modefied的原理差不多, 不過它不是根據資源的最后修改時間來判斷的, 而是通過一個唯一的標識；

1.在瀏覽器請求服務器資源的時候, 服務器根據當前文件的內容, 給文件生成一個唯一的標識, 若是文件發生了改變, 則這個標識就會改變

2.服務器會將這個標識ETag放到響應體的header中與請求的資源一起返回, 瀏覽器會緩存文件與這個header

3.下一次再次加載該資源時, 瀏覽器會將剛剛緩存的ETag放到請求體頭部(request header)的If-None-Match里發送給服務器

4.服務器接收到了之后與該資源自身的ETag做對比, 一致,返回304知會客戶端直接使用本地緩存;若是不一致, 返回200和最新的資源文件(包括最新的ETag)

 

ETag 與 Lasr-Modified 的對比：

Last-Modified缺點：

打開了緩存文件, 並沒有進行修改, 也還是會改變最后修改時間, 導致緩存失敗；

Last-Modified是以秒來計時的, 某個文件在一秒內被修改了很多次, 這時候的還是返回304；

有可能存在服務器沒有准確獲取文件修改時間，或者與代理服務器時間不一致等情形；

時間改變了，但是內容沒有修改，還是認為文件被修改（etag沒有這問題）

 

ETag缺點：

性能上的不足,只要文件發生改變,ETag就會發生改變. ETag需要服務器通過算法來計算出一個hash值；

 

總結：

• 1. 准確度上ETag更強;
  2. 性能上Last-Modified更好;
  3. 兩者都支持的話, ETag優先級更高.

 

緩存狀態碼：

未緩存：Status Code: 200

強緩Expires/Cache-Control存失效時，返回新的資源文件

 

強緩存：Status Code: 200 (from disk cache)

從磁盤當中取出的，不會請求服務器;

存在硬盤當中的，瀏覽器關閉后，再次打開仍會from disk cache；

 

強緩存：Status Code: 200 (from memory cache)

字直接從內存中拿到的，不會請求服務器;

頁面關閉內存釋放，再次打開不會出現from memory cache；

 

協商緩存：Status Code: 304 Not Modified