詳解web緩存

說說web緩存

網上關於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 瀏覽器請求流程圖
瀏覽器第一次請求流程圖

瀏覽器再次請求時

三、用戶行爲與緩存

瀏覽器緩存行爲還有用戶的行爲有關，引用文章瀏覽器 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緩存原理介紹