網上關於WEB緩存的文章很多，今天匯總一下。

為什麽要用緩存

一般針對靜態資源如CSS,JS,圖片等使用緩存，原因如下：

• 請求更快：通過將內容緩存在本地瀏覽器或距離最近的緩存服務器（如CDN），在不影響網站交互的前提下可以大大加快網站加載速度。

• 節省帶寬：對於已緩存的文件，可以減少請求帶寬甚至無需請求網絡。

• 降低服務器壓力：在大量用戶並發請求的情況下，服務器的性能受到限制，此時將一些靜態資源放置在網絡的多個節點，可以起到均衡負載的作用，降低服務器的壓力。

緩存分類

緩存分為服務端側（server side，比如 Nginx、Apache）和客戶端側（client side，比如 web browser）。
常用的服務端緩存有CDN緩存，客戶端緩存就是指瀏覽器緩存。

瀏覽器緩存機制詳解

緩存類型

瀏覽器緩存分為強緩存和協商緩存：
1 強緩存：瀏覽器在加載資源時，先根據這個資源的一些http header判斷它是否命中強緩存，強緩存如果命中，瀏覽器直接從自己的緩存中讀取資源，不會發請求到服務器。比如某個css文件，如果瀏覽器在加載它所在的網頁時，這個css文件的緩存配置命中了強緩存，瀏覽器就直接從緩存中加載這個css，連請求都不會發送到網頁所在服務器；
2 協商緩存：當強緩存沒有命中的時候，瀏覽器一定會發送一個請求到服務器，通過服務器端依據資源的另外一些http header驗證這個資源是否命中協商緩存，如果協商緩存命中，服務器會將這個請求返回（304），但是不會返回這個資源的數據，而是告訴客戶端可以直接從緩存中加載這個資源，於是瀏覽器就又會從自己的緩存中去加載這個資源；若未命中請求，則將資源返回客戶端，並更新本地緩存數據（200）。

強緩存與協商緩存區別：強緩存不發請求到服務器，協商緩存會發請求到服務器。

如何設置緩存

1 HTML Meta標簽控制緩存（非HTTP協議定義）
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代碼的作用是告訴瀏覽器當前頁面不被緩存，每次訪問都需要去服務器拉取。這種方法使用上很簡單，但只有部分瀏覽器可以支持，而且所有緩存代理服務器都不支持，因為代理不解析HTML內容本身。
2 HTTP頭信息控制緩存
HTTP頭信息控制緩存是通過Expires（強緩存）、Cache-control（強緩存）、Last-Modified/If-Modified-Since（協商緩存）、Etag/If-None-Match（協商緩存）實現，下面詳細介紹。

1）Expires是http1.0提出的一個表示資源過期時間的header，它描述的是一個絕對時間，由服務器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2016 23:55:55 GMT，

讀取緩存數據條件：緩存過期時間（服務器的）< 當前時間（客戶端的

缺點：Expires是較老的強緩存管理header，由於它是服務器返回的一個絕對時間，這樣存在一個問題，如果客戶端的時間與服務器的時間相差很大（比如時鐘不同步，或者跨時區），那麽誤差就很大，所以在HTTP 1.1版開始，使用Cache-Control: max-age=秒替代。
2）Cache-Control描述的是一個相對時間，在進行緩存命中的時候，都是利用客戶端時間進行判斷，所以相比較Expires，Cache-Control的緩存管理更有效，安全一些。

讀取緩存數據條件：上次緩存時間（客戶端的）+max-age < 當前時間（客戶端的）

Cache-Control值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各個消息中的指令含義如下：
Public指示響應可被任何緩存區緩存。
Private指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當前用戶的部分響應消息，此響應消息對於其他用戶的請求無效。
no-cache指示請求或響應消息不能緩存，該選項並不是說可以設置”不緩存“，而是需要和服務器確認
no-store在請求消息中發送將使得請求和響應消息都不使用緩存，完全不存下來。
max-age指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。上次緩存時間（客戶端的）+max-age（64200s）<客戶端當前時間
min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
max-stale指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那麽客戶機可以接收超出超時期指定值之內的響應消息。

註意：這兩個header可以只啟用一個，也可以同時啟用，當response header中，Expires和Cache-Control同時存在時，Cache-Control優先級高於Expires：

3）Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified：標示這個響應資源的最後修改時間。web服務器在響應請求時，告訴瀏覽器資源的最後修改時間。
If-Modified-Since：當資源過期時（強緩存失效），發現資源具有Last-Modified聲明，則再次向web服務器請求時帶上頭 If-Modified-Since，表示請求時間。web服務器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所保存的cache。
缺點：

• Last-Modified標註的最後修改只能精確到秒級，如果某些文件在1秒鐘以內，被修改多次的話，它將不能準確標註文件的修改時間（無法及時更新文件）

• 如果某些文件會被定期生成，當有時內容並沒有任何變化，但Last-Modified卻改變了，導致文件沒法使用緩存，有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形（無法使用緩存）。

HTTP1.1中Etag解決了上述問題。

4）Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的唯一標識（生成規則由服務器決定）。Apache中，ETag的值，默認是對文件的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後得到的。
If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage聲明，則再次向web服務器請求時帶上頭If-None-Match （Etag的值）。web服務器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。
Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的唯一標識符，能夠更加準確的控制緩存。Last-Modified與ETag一起使用時，服務器會優先驗證ETag。
Etag

2 瀏覽器請求流程圖
瀏覽器第一次請求流程圖

瀏覽器再次請求時

3、用戶行為與緩存

瀏覽器緩存行為還有用戶的行為有關，引用文章瀏覽器 HTTP 協議緩存機制詳解的結論

CDN緩存

CDN緩存屬於Cache服務器的一種。
CDN的全稱是Content Delivery Network，即內容分發網絡。其目的是通過在現有的Internet中增加一層新的網絡架構，將網站的內容發布到最接近用戶的網絡"邊緣"，使用戶可 以就近取得所需的內容，解決Internet網絡擁塞狀況，提高用戶訪問網站的響應速度。從技術上全面解決由於網絡帶寬小、用戶訪問量大、網點分布不均等 原因，解決用戶訪問網站的響應速度慢的根本原因。

　　通過上圖，我們可以了解到，使用了CDN緩存後的網站的訪問過程為：
　　1)、用戶向瀏覽器提供要訪問的域名；
　　2)、瀏覽器調用域名解析庫對域名進行解析，由於CDN對域名解析過程進行了調整，所以解析函數庫一般得到的是該域名對應的CNAME記錄，為了得到實際IP地址，瀏覽器需要再次對獲得的CNAME域名進行解析以得到實際的IP地址；在此過程中，使用的全局負載均衡DNS解析，如根據地理位置信 息解析對應的IP地址，使得用戶能就近訪問。
　　3)、此次解析得到CDN緩存服務器的IP地址，瀏覽器在得到實際的IP地址以後，向緩存服務器發出訪問請求；
　　4)、若請求文件並未修改，返回304（充當服務器的角色）。若當前文件已過期，則緩存服務器根據瀏覽器提供的要訪問的域名，通過Cache內部專用DNS解析得到此域名的實際IP地址，再由緩存服務器向此實際IP地址提交訪問請求；
　　5)、緩存服務器從實際IP地址得得到內容以後，一方面在本地進行保存，以備以後使用，二方面把獲取的數據返回給客戶端，完成數據服務過程；
　　6)、客戶端得到由緩存服務器返回的數據以後顯示出來並完成整個瀏覽的數據請求過程。

參考文章：
1 瀏覽器 HTTP 協議緩存機制詳解
2 CDN的實現原理
3 寫給後端程序員的HTTP緩存原理介紹

https://segmentfault.com/a/1190000006741200

說說web緩存-強緩存、協商緩存