什麼是瀏覽器緩存
瀏覽器緩存(Brower Caching)是瀏覽器在本地磁盤對用戶最近請求過的文檔進行存儲，當訪問者再次訪問同一頁面時，瀏覽器就可以直接從本地磁盤加載文檔。
爲什麼要使用瀏覽器緩存
1.減少了冗餘的數據傳輸，節省了網費
2.減少了服務器的負擔，大大提升了網站的性能
3.加快了客戶端加載網頁的速度
4.更好的用戶體驗
瀏覽器緩存類型
瀏覽器緩存主要有兩類：緩存協商和徹底緩存，也有稱之爲協商緩存和強緩存。
1.強緩存：強制緩存整體流程比較簡單，就是在第一次訪問服務器取到數據之後，在過期時間之內不會再去重複請求。實現這個流程的核心就是如何知道當前時間是否超過了過期時間。
強制緩存的過期時間通過第一次訪問服務器時返回的響應頭獲取。在 http 1.0 和 http 1.1 版本中通過不同的響應頭字段實現。
- http 1.0
在 http 1.0 版本中，強制緩存通過 Expires 響應頭來實現。 expires 表示未來資源會過期的時間。也就是說，當發起請求的時間超過了 expires 設定的時間，即表示資源緩存時間到期，會發送請求到服務器重新獲取資源。而如果發起請求的時間在 expires 限定的時間之內，瀏覽器會直接讀取本地緩存數據庫中的信息（from memory or from disk），兩種方式根據瀏覽器的策略隨機獲取。
- http 1.1
在 http 1.1 版本中，強制緩存通過 Cache-Control 響應頭來實現。Cache-Control 擁有多個值：
private：客戶端可以緩存
public：客戶端和代理服務器均可緩存；
max-age=xxx：緩存的資源將在 xxx 秒後過期；
no-cache：需要使用協商緩存來驗證是否過期；
no-store：不可緩存
最常用的字段就是 max-age=xxx ，表示緩存的資源將在 xxx 秒後過期。一般來說，爲了兼容，兩個版本的強制緩存都會被實現。
強制緩存只有首次請求才會跟服務器通信，讀取緩存資源時不會發出任何請求，資源的 Status 狀態碼爲 200，資源的 Size 爲 from memory 或者 from disk ，http 1.1 版本的實現優先級會高於 http 1.0 版本的實現。
2.協商緩存：協商緩存與強制緩存的不同之處在於，協商緩存每次讀取數據時都需要跟服務器通信，並且會增加緩存標識。在第一次請求服務器時，服務器會返回資源，並且返回一個資源的緩存標識，一起存到瀏覽器的緩存數據庫。當第二次請求資源時，瀏覽器會首先將緩存標識發送給服務器，服務器拿到標識後判斷標識是否匹配，如果不匹配，表示資源有更新，服務器會將新數據和新的緩存標識一起返回到瀏覽器；如果緩存標識匹配，表示資源沒有更新，並且返回 304 狀態碼，瀏覽器就讀取本地緩存服務器中的數據。
在 http 協議的 1.0 和 1.1 版本中也有不同的實現方式。
- http 1.0
在 http 1.0 版本中，第一次請求資源時服務器通過 Last-Modified 來設置響應頭的緩存標識，並且把資源最後修改的時間作爲值填入，然後將資源返回給瀏覽器。在第二次請求時，瀏覽器會首先帶上 If-Modified-Since 請求頭去訪問服務器，服務器會將 If-Modified-Since 中攜帶的時間與資源修改的時間匹配，如果時間不一致，服務器會返回新的資源，並且將 Last-Modified 值更新，作爲響應頭返回給瀏覽器。如果時間一致，表示資源沒有更新，服務器返回 304 狀態碼，瀏覽器拿到響應狀態碼後從本地緩存數據庫中讀取緩存資源。
這種方式有一個弊端，就是當服務器中的資源增加了一個字符，後來又把這個字符刪掉，本身資源文件並沒有發生變化，但修改時間發生了變化。當下次請求過來時，服務器也會把這個本來沒有變化的資源重新返回給瀏覽器。
- http 1.1
在 http 1.1 版本中，服務器通過 Etag 來設置響應頭緩存標識。Etag 的值由服務端生成。在第一次請求時，服務器會將資源和 Etag 一併返回給瀏覽器，瀏覽器將兩者緩存到本地緩存數據庫。在第二次請求時，瀏覽器會將 Etag 信息放到 If-None-Match 請求頭去訪問服務器，服務器收到請求後，會將服務器中的文件標識與瀏覽器發來的標識進行對比，如果不相同，服務器返回更新的資源和新的 Etag ，如果相同，服務器返回 304 狀態碼，瀏覽器讀取緩存。
協商緩存每次請求都會與服務器交互，第一次是拿數據和標識的過程，第二次開始，就是瀏覽器詢問服務器資源是否有更新的過程。每次請求都會傳輸數據，如果命中緩存，則資源的 Status 狀態碼爲 304 而不是 200 。同樣的，一般來講爲了兼容，兩個版本的協商緩存都會被實現，http 1.1 版本的實現優先級會高於 http 1.0 版本的實現。
兩者的共同點是，都是從客戶端緩存中讀取資源；區別是強緩存不會發請求，協商緩存會發請求。
經典前端面試題每日更新，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。
