瀏覽器緩存機制
前言：
每當我們第二次打開同一個網頁的時候，
size部分的form memory cache即為從緩存中讀取，
我們可以發現有很多內容都是直接從緩存中讀取到的。
1、瀏覽器緩存的優缺點
優點：
- 加快頁面打開速度
- 降低服務器壓力
- 減少網絡損耗
缺點：
- 緩存沒有清理機制，這些緩存的文件會永久地保存在機器上
- 給開發帶來困擾，更新了開發內容，但是瀏覽器還是讀取的原來緩存的內容，新的開發內容無法體現在瀏覽器上
2、web緩存的分類
web緩存存在於服務器和客戶端之間
a.數據庫數據緩存
Web應用，特別是社交網絡服務類型的應用，往往關系比較復雜，數據庫表繁多，如果頻繁進行數據庫查詢，很容易導致數據庫不堪重荷。為了提供查詢的性能，會將查詢后的數據放到內存中進行緩存，下次查詢時，直接從內存緩存直接返回，提供響應效率。比如常用的緩存方案有memcached,redis等。
b.服務器端緩存
代理服務器緩存
代理服務器是瀏覽器和源服務器之間的中間服務器，瀏覽器先向這個中間服務器發起Web請求，經過處理后（比如權限驗證，緩存匹配等），再將請求轉發到源服務器。代理服務器緩存的運作原理跟瀏覽器的運作原理差不多，只是規模更大。可以把它理解為一個共享緩存，不只為一個用戶服務，一般為大量用戶提供服務，因此在減少相應時間和帶寬使用方面很有效，同一個副本會被重用多次。常見代理服務器緩存解決方案有Squid,Nginx,Apache等。
CDN緩存
CDN（Content delivery networks）緩存，也叫網關緩存、反向代理緩存。CDN緩存一般是由網站管理員自己部署，為了讓他們的網站更容易擴展並獲得更好的性能。瀏覽器先向CDN網關發起Web請求，網關服務器后面對應着一台或多台負載均衡源服務器，會根據它們的負載請求，動態將請求轉發到合適的源服務器上。雖然這種架構負載均衡源服務器之間的緩存沒法共享，但卻擁有更好的處擴展性。從瀏覽器角度來看，整個CDN就是一個源服務器，瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。
c.瀏覽器端緩存
瀏覽器緩存根據一套與服務器約定的規則進行工作，在同一個會話過程中會檢查一次並確定緩存的副本足夠新。如果你瀏覽過程中，比如前進或后退，訪問到同一個圖片，這些圖片可以從瀏覽器緩存中調出而即時顯現。
d.Web應用層緩存
應用層緩存指的是從代碼層面上，通過代碼邏輯和緩存策略，實現對數據，頁面，圖片等資源的緩存，可以根據實際情況選擇將數據存在文件系統或者內存中，減少數據庫查詢或者讀寫瓶頸，提高響應效率。
3、瀏覽器緩存控制方法
a、meta標簽控制
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代碼作用為告訴瀏覽器當前頁面不需要被緩存，每次請求頁面都需要去服務器請求資源。
b、http頭信息控制
瀏覽器每次在向服務器發起 HTTP 請求獲得請求結果（包含 HTTP 頭信息各種字段）后，會根據響應報文中 HTTP 頭的緩存標識字段（后面我們會知道這個字段就是 Expires 和 Cache-Control），來決定是否將請求結果存入瀏覽器緩存中。
瀏覽器每次在向服務器發起 HTTP 請求時，都會查找瀏覽器緩存中是否存在其相應的請求結果，然后根據緩存標識字段來決定其是直接使用之前緩存的副本還是再次向服務器發出 HTTP 請求。
對於每次瀏覽器第一次 HTTP 請求來說，瀏覽器緩存中並不存在其請求資源相應的副本，這時瀏覽器便會直接向服務器發出 HTTP 請求來獲得相應的請求結果，並根據緩存標識字段，來決定是否將請求結果作為副本存入瀏覽器緩存中。
HTTP 保持已緩存數據與服務器數據之間充分一致的機制稱為文檔過期和服務器再驗證。而從瀏覽器緩存分類來看，也有將其分為強制緩存和協商緩存。
下面我就文檔過期和服務器再驗證的機制做詳細的介紹，下面表述的過程都是指瀏覽器緩存中已經存在其相應資源副本的情況。
當瀏覽器發起 HTTP 請求時，會根據瀏覽器緩存中的緩存標識字段來驗證文檔（資源副本）是否過期。
上述說的緩存標識字段便是 Expires 和 Cache-Control。
Expires 是服務器端在響應請求時用來規定資源的失效時間。
Cache-Control 是服務器端在響應請求時用來規定資源是否需要被瀏覽器緩存以及緩存的有效時間等。
Cache-Control 主要取值如下：
- public：所有內容都將被緩存（客戶端和代理服務器都可緩存）
- private：內容只緩存到私有緩存中（僅客戶端可以緩存，代理服務器不可緩存）
- no-cache：必須先與服務器確認返回的響應是否被更改，然后才能使用該響應來滿足后續對同一個網址的請求。因此，如果存在合適的驗證令牌（ETag），no-cache 會發起往返通信來驗證緩存的響應，如果資源未被更改，可以避免下載
- no-store：所有內容都不會被緩存或 Internet 臨時文件中
- must-revalidation/proxy-revalidation：如果緩存的內容失效，請求必須發送到服務器/代理以進行重新驗證
- max-age=xxx：緩存的內容將在 xxx 秒后失效
這里需要注意的是，no-cache 的作用是指跳過文檔過期的驗證而直接進行服務器再驗證，而 no-store 是指資源禁止被緩存。
Expires 是 HTTP 1.0 的字段，而 Cache-Control 是 HTTP 1.1 的字段，當 Expires 與 Cache-Control 同時存在時，Cache-Control 的優先級要高於 Expires。
在瀏覽器緩存中根據 Expires 和 Cache-Control 的值來驗證文檔（資源副本）是否過期的過程，稱為 HTTP 的文檔過期驗證機制。若是文檔沒有過期，則瀏覽器會直接使用緩存中的文檔作為返回結果，若是文檔已經過期了，則需要進行服務器再驗證。
服務器再驗證
在瀏覽器緩存中，還保存了其它關於資源副本的描述字段，這些字段都是服務器返回信息頭帶過來的，如 Last-Modified 和 Etag。
Last-Modified 是服務器端在響應請求時用來說明資源的最后修改時間。與之對應的是 If-Modified-Since 字段，在服務器再驗證過程中，瀏覽器發送的 HTTP 請求的請求頭中會帶上 If-Modified-Since 字段，值為該資源 Last-Modified 屬性的值。
當服務器端接收到帶有 If-Modified-Since 屬性的請求時，則會將 If-Modified-Since 屬性的值與被請求資源的最后修改時間做對比。如果相同，說明資源沒有新的修改，則響應 HTTP 304，瀏覽器會繼續使用原先保存的該資源的副本；如果最后修改時間比較新，則說明資源被修改過，則響應 HTTP 200，並且返回最新的資源。
Etag 是服務器端在響應請求時用來說明資源在服務器端的唯一標識。與之對應的是 If-None-Match 字段，在服務器再驗證過程中，瀏覽器發送的 HTTP 請求的請求頭中會帶上 If-Modified-Since 字段，值為該資源 Etag 屬性的值。
當服務器端接收到帶有 If-None-Match 屬性的請求時，則會將 If-None-Match 屬性的值與被請求資源的唯一標識做對比。如果相同，說明資源沒有新的修改，則響應 HTTP 304，瀏覽器會繼續使用原先保存的該資源的副本；如果不同，則說明資源被修改過，則響應 HTTP 200，並且返回最新的資源。
那么當 Last-Modified / If-Modified-Since 和 Etag / If-None-Match 同時存在是什么情況呢？
事實上，當兩者同時存在時，Etag / If-None-Match 的優先級要高於 Last-Modified / If-Modified-Since，HTTP 1.1 中 Etag 的出現主要是為了解決幾個 Last-Modified 比較難解決的問題：
- Last-Modified 標注的最后修改只能精確到秒級，如果某些文件在1秒鍾以內被修改多次的話，它將不能准確標注文件的修改時間；
- 如果某些文件會被定期生成，但有時內容並沒有任何變化，但 Last-Modified 卻改變了，導致文件沒法使用緩存；
- 有可能存在服務器沒有准確獲取文件修改時間，或者與代理服務器時間不一致等情形；
下面用一張流程圖來完整說明當瀏覽器發起 HTTP 請求時緩存機制的過程：
以上。