CDN學習筆記一（CDN是什麼？）

CDN是什麼？

談到CDN的做用，能夠用8年買火車票的經從來形象比喻：

8年前，尚未火車票代售點一說，12306.cn更是無從提及。那時候火車票還只能在火車站的售票大廳購買，而我所住的小縣城並不通火車，火車票都要去市裏的火車站購買，而從縣城到市裏，來回就是4個小時車程，簡直就是浪費生命。後來就行了，小縣城裏出現了火車票代售點，能夠直接在代售點購買火車，方便了很多，全市人民不再用在一個點苦逼的排隊買票了。

CDN就能夠理解爲分佈在每一個縣城的火車票代售點，用戶在瀏覽網站的時候，CDN會選擇一個離用戶最近的CDN邊緣節點來響應用戶的請求，這樣海南移動用戶的請求就不會千里迢迢跑到北京電信機房的服務器（假設源站部署在北京電信機房）上了。

CDN的優點很明顯：（1）CDN節點解決了跨運營商和跨地域訪問的問題，訪問延時大大下降；（2）大部分請求在CDN邊緣節點完成，CDN起到了分流做用，減輕了源站的負載。

緩存是什麼？ 

這裏不深究CDN背後高大上的架構，也不討論CDN如何作到全局流量調度策略，本文着重討論在有了CDN後，數據是如何被緩存的。緩存是一個處處都存在的用空間換時間的例子。經過使用多餘的空間，咱們可以獲取更快的速度。

首先，看看沒有網站沒有接入CDN時，用戶瀏覽器與服務器是如何交互的：

用戶在瀏覽網站的時候，瀏覽器可以在本地保存網站中的圖片或者其餘文件的副本，這樣用戶再次訪問該網站的時候，瀏覽器就不用再下載所有的文件，減小了下載量意味着提升了頁面加載的速度。

若是中間加上一層CDN，那麼用戶瀏覽器與服務器的交互以下：

         

客戶端瀏覽器先檢查是否有本地緩存是否過時，若是過時，則向CDN邊緣節點發起請求，CDN邊緣節點會檢測用戶請求數據的緩存是否過時，若是沒有過時，則直接響應用戶請求，此時一個完成http請求結束；若是數據已通過期，那麼CDN還須要向源站發出回源請求（back to the source request）,來拉取最新的數據。CDN的典型拓撲圖以下：

圖片來源：http://grefr.iteye.com/blog/2004248

能夠看到，在存在CDN的場景下，數據經歷了客戶端（瀏覽器）緩存和CDN邊緣節點緩存兩個階段，下面分別對這兩個階段的緩存進行詳細的剖析

客戶端（瀏覽器）緩存

客戶端緩存的缺點 

客戶端緩存減小了的服務器請求，避免了文件重複加載，顯著地提高了用戶地方。可是當網站發生了更新的時候（如替換了css、js以及圖片文件），瀏覽器本地仍保存着舊版本的文件，從而致使沒法預料後果。

曾幾什麼時候，一個頁面加載出來，頁面各元素位置亂飄，按鈕點擊失效，前端GG都會習慣性地問一句：「緩存清了沒？」，而後Ctrl+F5       ，Everything is OK。但有些時候，若是咱們是簡單地在瀏覽器地址欄中敲一個回車，或者是僅僅按F5刷新，問題依然沒有解決，你可知道這三種不一樣的操做方式，決定瀏覽器不一樣的刷新緩存策略？

瀏覽器如何來肯定使用本地文件仍是使用服務器上的新文件？下面來介紹幾種判斷的方法。

瀏覽器緩存策略

Expires 

Expires:Sat, 24 Jan 2015 20:30:54 GMT

若是http響應報文中設置了Expires，在Expires過時以前，咱們就避免了和服務器之間的鏈接。此時，瀏覽器無需想瀏覽器發出請求，只須要本身判斷手中的材料是否過時就能夠了，徹底不須要增長服務器的負擔。

Cache-control: max-age

Expires的方法很好，可是咱們每次都得算一個精確的時間。max-age 標籤可讓咱們更加容易的處理過時時間。咱們只須要說，這份資料你只能用一個星期就能夠了。

Max-age 使用秒來計量，如：Cache-Control:max-age=645672 指定頁面645672秒（7.47天）後過時。

 

Last-Modified

服務器爲了通知瀏覽器當前文件的版本，會發送一個上次修改時間的標籤，例如：

Last-Modified:Tue, 06 Jan 2015 08:26:32 GMT

這樣瀏覽器就知道他收到的這個文件建立時間，在後續的請求中，瀏覽器會按照下面的規則進行驗證：

1.  瀏覽器：Hey，我須要jquery.min.js這個文件，若是是在 Tue, 06 Jan 2015 08:26:32 GMT 以後修改過的，請發給我。

2.  服務器：（檢查文件的修改時間）

3.  服務器：Hey，這個文件在那個時間以後沒有被修改過，你已經有最新的版本了。

4.  瀏覽器：太好了，那我就顯示給用戶了。

在這種狀況下，服務器僅僅返回了一個304的響應頭，減小了響應的數據量，提升了響應的速度。關於304響應，請參考：

http://www.cnblogs.com/ziyunfei/archive/2012/11/17/2772729.html

下圖是按F5刷新頁面後，頁面返回304響應頭。

ETag 

一般狀況下，經過修改時間來比較文件是可行的。可是在一些特殊狀況，例如服務器的時鐘發生了錯誤，服務器時鐘進行修改，夏時制DST到來後服務器時間沒有及時更新，這些都會引發經過修改時間比較文件版本的問題。

ETag能夠用來解決這種問題。ETag是一個文件的惟一標誌符。就像一個哈希或者指紋，每一個文件都有一個單獨的標誌，只要這個文件發生了改變，這個標誌就會發生變化。

服務器返回ETag標籤：ETag:"39001d-1762a-50bf790757e00"

接下來的訪問順序以下所示：

1. 瀏覽器：Hey，我須要jquery.min.js這個文件，有沒有不匹配"39001d-1762a-50bf790757e00"這個串的

2. 服務器：（檢查ETag…）

3. 服務器：Hey，我這裏的版本也是"39001d-1762a-50bf790757e00"，你已是最新的版本了

4. 瀏覽器：好，那就可使用本地緩存了

如同 Last-modified 同樣，ETag 解決了文件版本比較的問題。只不過 ETag 的級別比 Last-Modified 高一些。

額外的標籤

緩存標籤永遠不會中止工做，可是有時候咱們須要對已經緩存的內容進行一些控制。

l  Cache-control: public 表示緩存的版本能夠被代理服務器或者其餘中間服務器識別。

l  Cache-control: private 意味着這個文件對不一樣的用戶是不一樣的。只有用戶本身的瀏覽器可以進行緩存，公共的代理服務器不容許緩存。

l  Cache-control: no-cache 意味着文件的內容不該當被緩存。這在搜索或者翻頁結果中很是有用，由於一樣的URL，對應的內容會發生變化。

瀏覽器緩存刷新 

1.  在地址欄中輸入網址後按回車或點擊轉到按鈕

瀏覽器以最少的請求來獲取網頁的數據，瀏覽器會對全部沒有過時的內容直接使用本地緩存，從而減小了對瀏覽器的請求。因此，Expires，max-age標記只對這種方式有效。

2.  按F5或瀏覽器刷新按鈕

瀏覽器會在請求中附加必要的緩存協商，但不容許瀏覽器直接使用本地緩存，它可以讓 Last-Modified、ETag發揮效果，可是對Expires無效。

3.  按Ctrl+F5或按Ctrl並點擊刷新按鈕

這種方式就是強制刷新，總會發起一個全新的請求，不使用任何緩存。

CDN緩存 

瀏覽器本地緩存失效後，瀏覽器會向CDN邊緣節點發起請求。相似瀏覽器緩存，CDN邊緣節點也存在着一套緩存機制。

CDN緩存的缺點 

CDN的分流做用不只減小了用戶的訪問延時，也減小的源站的負載。但其缺點也很明顯：當網站更新時，若是CDN節點上數據沒有及時更新，即使用戶再瀏覽器使用Ctrl +F5的方式使瀏覽器端的緩存失效，也會由於CDN邊緣節點沒有同步最新數據而致使用戶訪問異常。

CDN緩存策略 

CDN邊緣節點緩存策略因服務商不一樣而不一樣，但通常都會遵循http標準協議，經過http響應頭中的Cache-control: max-age的字段來設置CDN邊緣節點數據緩存時間。

當客戶端向CDN節點請求數據時，CDN節點會判斷緩存數據是否過時，若緩存數據並無過時，則直接將緩存數據返回給客戶端；不然，CDN節點就會向源站發出回源請求，從源站拉取最新數據，更新本地緩存，並將最新數據返回給客戶端。

CDN服務商通常會提供基於文件後綴、目錄多個維度來指定CDN緩存時間，爲用戶提供更精細化的緩存管理。

CDN緩存時間會對「回源率」產生直接的影響。若CDN緩存時間較短，CDN邊緣節點上的數據會常常失效，致使頻繁回源，增長了源站的負載，同時也增大的訪問延時；若CDN緩存時間太長，會帶來數據更新時間慢的問題。開發者須要增對特定的業務，來作特定的數據緩存時間管理。

CDN緩存刷新

CDN邊緣節點對開發者是透明的，相比於瀏覽器Ctrl+F5的強制刷新來使瀏覽器本地緩存失效，開發者能夠經過CDN服務商提供的「刷新緩存」接口來達到清理CDN邊緣節點緩存的目的。這樣開發者在更新數據後，可使用「刷新緩存」功能來強制CDN節點上的數據緩存過時，保證客戶端在訪問時，拉取到最新的數據。