瀏覽器緩存

瀏覽器緩存
緩存對於前端性能優化來講是個很重要的點，良好的緩存策略能夠下降資源的重複加載提升網頁的總體加載速度。
一般瀏覽器緩存策略分爲兩種：強緩存和協商緩存。

強緩存
實現強緩存能夠經過兩種響應頭實現：Expires 和 Cache-Control 。強緩存表示在緩存期間不須要請求，state code 爲 200
Expires: Wed, 22 Oct 2018 08:41:00 GMT
複製代碼Expires 是 HTTP / 1.0 的產物，表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT 後過時，須要再次請求。而且 Expires
受限於本地時間，若是修改了本地時間，可能會形成緩存失效。
Cache-control: max-age=30
複製代碼Cache-Control 出現於 HTTP / 1.1，優先級高於 Expires 。該屬性表示資源會在 30 秒後過時，須要再次請求。

協商緩存
若是緩存過時了，咱們就可使用協商緩存來解決問題。協商緩存須要請求，若是緩存有效會返回 304。
協商緩存須要客戶端和服務端共同實現，和強緩存同樣，也有兩種實現方式。
Last-Modified 和 If-Modified-Since
Last-Modified 表示本地文件最後修改日期，If-Modified-Since 會將 Last-Modified 的值發送給服務器，詢問服務器在該日期後資源是否有更新，有更新的話就會將新的資源發送回來。
可是若是在本地打開緩存文件，就會形成 Last-Modified 被修改，因此在 HTTP / 1.1 出現了 ETag 。
ETag 和 If-None-Match
ETag 相似於文件指紋，If-None-Match 會將當前 ETag 發送給服務器，詢問該資源 ETag 是否變更，有變更的話就將新的資源發送回來。而且 ETag 優先級比 Last-Modified 高。

選擇合適的緩存策略
對於大部分的場景均可以使用強緩存配合協商緩存解決，可是在一些特殊的地方可能須要選擇特殊的緩存策略
對於某些不須要緩存的資源，可使用 Cache-control: no-store ，表示該資源不須要緩存
對於頻繁變更的資源，可使用 Cache-Control: no-cache 並配合 ETag 使用，表示該資源已被緩存，可是每次都會發送請求詢問資源是否更新。
對於代碼文件來講，一般使用 Cache-Control: max-age=31536000 並配合策略緩存使用，而後對文件進行指紋處理，一旦文件名變更就會馬上下載新的文件。