緩存策略：

通常瀏覽器緩存策略分為兩種：強緩存和協商緩存，並且緩存策略都是通過設置 HTTP Header 來實現的；

強緩存：

強緩存可以通過設置兩種 HTTP Header 實現：Expires 和 Cache-Control；強緩存表示在緩存期間不需要請求。state code為200；

Expires：

Expires：Wed，22 Oct 2018 15:05:21 GMT

Expires 是 HTTP/1 的產物，表示資源會在 Wed，22 Oct 2018 15:05:21 GMT 後過期，需要再次請求。並且 Expires 受限於本地時間，如果修改了本地時間，可能會造成緩存失效；

Cache-control：

Cache-control：max-age=30

Cache-control 出現於 HTTP/1.1，優先級高於 Expires。該屬性值表示資源會在 30 秒後過期，需要再次請求；

Cache-control 可以在請求頭或者響應頭中設置，並且可以組合使用多種指令；

協商緩存：

如果緩存過期了，就需要發起請求驗證資源是否有更新。協商緩存可以通過設置兩種 HTTP Header 實現：Last-Modified 和 ETag。

當瀏覽器發起請求驗證資源時，如果資源沒有做改變，那麽服務端就會返回 304 狀態碼，並且更新瀏覽器緩存有效期。

Last-Modified 和 If-Modified-Since：

Last-Modified 表示本地文件最後修改日期，If-Modified-Since 會將 Last-Modified 的值發送給服務器，詢問服務器在該日期後資源是否有更新，有更新的話就會將新的資源發送回來，否則返回 304 狀態碼。

但是 Last-Modified 存在一些弊端：

①.如果本地打開緩存文件，即使沒有對文件進行修改，但還是會造成 Last-Modified 被修改，服務端不能命中緩存導致發送相同的資源；

②.因為 Last-Modified 只能以秒計時，如果在不可感知的時間內修改完成文件，那麽服務端會認為資源還是命中了，不會返回正確的資源；

因為有以上這些弊端，所以在 HTTP/1.1出現了 ETag；

ETag 和 If-None-Match：

ETag 類似於文件指紋，If-None-Match 會將當前 ETag 發送給服務器，詢問該資源 ETag 是否變動，有變動的話就將新的資源發送回來。並且 ETag 優先級比 Last-Modified 高；

如果什麽緩存策略都沒設置，那麽瀏覽器會怎麽處理？

對於這種情況，瀏覽器會采用一個啟發式的算法，通常會取響應頭中的 Date 減去 Last-Modified 值的 10% 作為緩存時間。

在了解了理論知識之後，我們先看下實際場景下緩存策略的應用：

①.頻繁變動的資源：

對於頻繁變動的資源，首先需要使用 Cache-Control：no-cache 使瀏覽器每次都請求服務器，然後配合 ETag 或者 Last-Modified 來驗證資源是否有效。這樣的做法雖然不能節省請求數量，但是能顯著減少響應數據大小；

②.代碼文件：

這裏特指除了 HTML 外的代碼文件，因為 HTML 文件一般不緩存或者緩存時間很短。

一般來說，現在都會使用工具來打包代碼，那麽我們就可以對文件名進行哈希處理，只有當代碼修改後才會生成新的文件名。基於此，我們就可以給代碼文件設置緩存有效期一年 Cache-Control：max-age=31536000，這樣只有當 HTML 文件中引入的文件名發生了改變才會去下載最新的代碼文件，否則就一直使用緩存；

面試之瀏覽器緩存策略