瀏覽器緩存機制

1、Expires

Expires是web服務器響應頭字段，值是一個時間類型，告訴瀏覽器在過時時間前能夠直接從瀏覽器緩存中取數據，而無需再次請求。 Expires是http 1.0的東東，在http1.1 + 的場景下，其做用基本能夠忽略, 做用優先級最低

2、 Cache-control

Cache-Control 與 Expires做用至關。只不過Cache-control更多靈活，且優先級高於Expires Cache-Control能夠設置的值有不少，下面列出最經常使用的幾個：
no-cache: 全部內容都不會被緩存
no-store: 全部內容都不會被緩存到緩存或者 internet臨時文件中
max-age=xxx: 緩存的內容將在 xxx 秒後失效（ 這個選項只在HTTP 1.1可用, 並若是和Last-Modified一塊兒使用時, 優先級較高）

3、 Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。
Last-Modified：標示這個響應資源的最後修改時間。web服務器在響應請求時，告訴瀏覽器資源的最後修改時間。
If-Modified-Since：當資源過時時（使用Cache-Control標識的max-age），則再次向web服務器請求時帶上頭 If-Modified-Since（= Last-Modified的值）。web服務器收到請求後將If-Modified-Since 與被請求資源的最後修改時間進行比對，決定返回304或者200（協商緩存）

4、Etag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識（好比md5 hash）。
If-None-Match：當資源過時時（使用Cache-Control標識的max-age）, 則再次向web服務器請求時帶上頭If-None-Match （= Etag的值）。web服務器收到請求後將If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回304或者200（協商緩存）。

5、 既生Last-Modified何生Etag？

你可能會以爲使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新，爲何還須要Etag（實體標識）呢？HTTP1.1中Etag的出現主要是爲了解決幾個Last-Modified比較難解決的問題：
1: Last-Modified標註的最後修改只能精確到秒級，若是某些文件在1秒鐘之內，被修改屢次的話，它將不能準確標註文件的修改時間
2: 若是某些文件會被按期生成，當有時內容並無任何變化，但Last-Modified卻改變了，致使文件無法使用緩存
3: 有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形
Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的惟一標識符，可以更加準確的控制緩存。Last-Modified與ETag是能夠一塊兒使用的，服務器會優先驗證ETag，一致的狀況下，纔會繼續比對Last-Modified，最後才決定是否返回304。

6、 from disk cache和from memory cache

Chrome在高版本更新了緩存策略（具體版本忘記），原來的from cache變成了from disk cache(磁盤緩存)和from memory cache(內存緩存)兩類，二者有什麼區別呢？

先從官方文檔來看下：

Chrome employs two caches — an on-disk cache and a very fast in-memory cache. The lifetime of an in-memory cache is attached to the lifetime of a render process, which roughly corresponds to a tab. Requests that are answered from the in-memory cache are invisible to the web request API. If a request handler changes its behavior (for example, the behavior according to which requests are blocked), a simple page refresh might not respect this changed behavior. To make sure the behavior change goes through, call handlerBehaviorChanged() to flush the in-memory cache. But don't do it often; flushing the cache is a very expensive operation. You don't need to call handlerBehaviorChanged() after registering or unregistering an event listener.

谷歌翻譯了一下，大概就是內存緩存是和渲染進程綁定的，大部分狀況下於瀏覽器Tab對應（具體保存磁盤仍是內存的邏輯不太清楚，若是有知道的請告知）。 因爲內存緩存是直接從內存中讀取的，因此速度更快，從圖中能夠看出時間是0ms。而磁盤緩存還須要從磁盤中讀取，速度還和磁盤的I/O有關。

7、強緩存做用

強緩存做爲性能優化中緩存方面最有效的手段，可以極大的提高性能。因爲強緩存不會向服務端發送請求，對服務端的壓力也是大大減少。 對於不太常常變動的資源，能夠設置一個超長時間的緩存時間，好比一年。瀏覽器在首次加載後，都會從緩存中讀取。 可是因爲不會向服務端發送請求，那麼若是資源有更改的時候，怎麼讓瀏覽器知道呢？如今經常使用的解決方法是加一個?v=xxx的版本後綴，在更新靜態資源版本的時候，更新這個v的值，這樣至關於向服務端發起一個新的請求，從而達到更新靜態資源的目的。

8、 瀏覽器緩存與前端構建

爲了追求最完美的緩存體驗，一般web server（如nginx）會設置Cache-Control: max-age爲一個很長的時間，因此爲了讓文件在更新時能及時的在瀏覽器避免緩存，前端資源在構建時須要作MD5文件指紋處理。