摘要：的優(yōu)勢(shì)很明顯節(jié)點(diǎn)解決了跨運(yùn)營(yíng)商和跨地域訪問(wèn)的問(wèn)題，訪問(wèn)延時(shí)大大降低大部分請(qǐng)求在邊緣節(jié)點(diǎn)完成，起到了分流作用，減輕了源站的負(fù)載。

CDN是什么？

談到CDN的作用，可以用8年買(mǎi)火車(chē)票的經(jīng)歷來(lái)形象比喻：

8年前，還沒(méi)有火車(chē)票代售點(diǎn)一說(shuō)，12306.cn更是無(wú)從說(shuō)起。那時(shí)候火車(chē)票還只能在火車(chē)站的售票大廳購(gòu)買(mǎi)，而我所住的小縣城并不通火車(chē)，火車(chē)票都要去市里的火車(chē)站購(gòu)買(mǎi)，而從縣城到市里，來(lái)回就是4個(gè)小時(shí)車(chē)程，簡(jiǎn)直就是浪費(fèi)生命。后來(lái)就好了，小縣城里出現(xiàn)了火車(chē)票代售點(diǎn)，可以直接在代售點(diǎn)購(gòu)買(mǎi)火車(chē)，方便了不少，全市人民再也不用在一個(gè)點(diǎn)苦逼的排隊(duì)買(mǎi)票了。

CDN就可以理解為分布在每個(gè)縣城的火車(chē)票代售點(diǎn)，用戶在瀏覽網(wǎng)站的時(shí)候，CDN會(huì)選擇一個(gè)離用戶最近的CDN邊緣節(jié)點(diǎn)來(lái)響應(yīng)用戶的請(qǐng)求，這樣海南移動(dòng)用戶的請(qǐng)求就不會(huì)千里迢迢跑到北京電信機(jī)房的服務(wù)器（假設(shè)源站部署在北京電信機(jī)房）上了。

CDN的優(yōu)勢(shì)很明顯：（1）CDN節(jié)點(diǎn)解決了跨運(yùn)營(yíng)商和跨地域訪問(wèn)的問(wèn)題，訪問(wèn)延時(shí)大大降低；（2）大部分請(qǐng)求在CDN邊緣節(jié)點(diǎn)完成，CDN起到了分流作用，減輕了源站的負(fù)載。

緩存是什么？

這里不深究CDN背后高大上的架構(gòu)，也不討論CDN如何做到全局流量調(diào)度策略，本文著重討論在有了CDN后，數(shù)據(jù)是如何被緩存的。緩存是一個(gè)到處都存在的用空間換時(shí)間的例子。通過(guò)使用多余的空間，我們能夠獲取更快的速度。
首先，看看沒(méi)有網(wǎng)站沒(méi)有接入CDN時(shí)，用戶瀏覽器與服務(wù)器是如何交互的：
q111.png

用戶在瀏覽網(wǎng)站的時(shí)候，瀏覽器能夠在本地保存網(wǎng)站中的圖片或者其他文件的副本，這樣用戶再次訪問(wèn)該網(wǎng)站的時(shí)候，瀏覽器就不用再下載全部的文件，減少了下載量意味著提高了頁(yè)面加載的速度。
如果中間加上一層CDN，那么用戶瀏覽器與服務(wù)器的交互如下：
q222.png

客戶端瀏覽器先檢查是否有本地緩存是否過(guò)期，如果過(guò)期，則向CDN邊緣節(jié)點(diǎn)發(fā)起請(qǐng)求，CDN邊緣節(jié)點(diǎn)會(huì)檢測(cè)用戶請(qǐng)求數(shù)據(jù)的緩存是否過(guò)期，如果沒(méi)有過(guò)期，則直接響應(yīng)用戶請(qǐng)求，此時(shí)一個(gè)完成http請(qǐng)求結(jié)束；如果數(shù)據(jù)已經(jīng)過(guò)期，那么CDN還需要向源站發(fā)出回源請(qǐng)求（back to the source request）,來(lái)拉取最新的數(shù)據(jù)。CDN的典型拓?fù)鋱D如下：

q333.png

圖片來(lái)源：http://grefr.iteye.com/blog/2004248

可以看到，在存在CDN的場(chǎng)景下，數(shù)據(jù)經(jīng)歷了客戶端（瀏覽器）緩存和CDN邊緣節(jié)點(diǎn)緩存兩個(gè)階段，下面分別對(duì)這兩個(gè)階段的緩存進(jìn)行詳細(xì)的剖析

客戶端（瀏覽器）緩存

客戶端緩存的缺點(diǎn)

客戶端緩存減少了的服務(wù)器請(qǐng)求，避免了文件重復(fù)加載，顯著地提升了用戶地方。但是當(dāng)網(wǎng)站發(fā)生了更新的時(shí)候（如替換了css、js以及圖片文件），瀏覽器本地仍保存著舊版本的文件，從而導(dǎo)致無(wú)法預(yù)料后果。

曾幾何時(shí)，一個(gè)頁(yè)面加載出來(lái)，頁(yè)面各元素位置亂飄，按鈕點(diǎn)擊失效，前端GG都會(huì)習(xí)慣性地問(wèn)一句：“緩存清了沒(méi)？”，然后Ctrl+F5 ，Everything is OK。但有些時(shí)候，如果我們是簡(jiǎn)單地在瀏覽器地址欄中敲一個(gè)回車(chē)，或者是僅僅按F5刷新，問(wèn)題依然沒(méi)有解決，你可知道這三種不同的操作方式，決定瀏覽器不同的刷新緩存策略？

瀏覽器如何來(lái)確定使用本地文件還是使用服務(wù)器上的新文件？下面來(lái)介紹幾種判斷的方法。

瀏覽器緩存策略

Expires

Expires:Sat, 24 Jan 2015 20:30:54 GMT
q444.png
如果http響應(yīng)報(bào)文中設(shè)置了Expires，在Expires過(guò)期之前，我們就避免了和服務(wù)器之間的連接。此時(shí)，瀏覽器無(wú)需想瀏覽器發(fā)出請(qǐng)求，只需要自己判斷手中的材料是否過(guò)期就可以了，完全不需要增加服務(wù)器的負(fù)擔(dān)。

Cache-control: max-age
q555.png

Expires的方法很好，但是我們每次都得算一個(gè)精確的時(shí)間。max-age 標(biāo)簽可以讓我們更加容易的處理過(guò)期時(shí)間。我們只需要說(shuō)，這份資料你只能用一個(gè)星期就可以了。

Max-age 使用秒來(lái)計(jì)量，如：Cache-Control:max-age=645672 指定頁(yè)面645672秒（7.47天）后過(guò)期。

Last-Modified

服務(wù)器為了通知瀏覽器當(dāng)前文件的版本，會(huì)發(fā)送一個(gè)上次修改時(shí)間的標(biāo)簽，例如：
Last-Modified:Tue, 06 Jan 2015 08:26:32 GMT
q666.png
這樣瀏覽器就知道他收到的這個(gè)文件創(chuàng)建時(shí)間，在后續(xù)的請(qǐng)求中，瀏覽器會(huì)按照下面的規(guī)則進(jìn)行驗(yàn)證：

1. 瀏覽器：Hey，我需要jquery.min.js這個(gè)文件，如果是在 Tue, 06 Jan 2015 08:26:32 GMT 之后修改過(guò)的，請(qǐng)發(fā)給我。
2. 服務(wù)器：（檢查文件的修改時(shí)間）
3. 服務(wù)器：Hey，這個(gè)文件在那個(gè)時(shí)間之后沒(méi)有被修改過(guò)，你已經(jīng)有最新的版本了。
4. 瀏覽器：太好了，那我就顯示給用戶了。

在這種情況下，服務(wù)器僅僅返回了一個(gè)304的響應(yīng)頭，減少了響應(yīng)的數(shù)據(jù)量，提高了響應(yīng)的速度。關(guān)于304響應(yīng)，請(qǐng)參考：
http://www.cnblogs.com/ziyunfei/archive/2012/11/17/2772729.html
下圖是按F5刷新頁(yè)面后，頁(yè)面返回304響應(yīng)頭。
q777.png

ETag

通常情況下，通過(guò)修改時(shí)間來(lái)比較文件是可行的。但是在一些特殊情況，例如服務(wù)器的時(shí)鐘發(fā)生了錯(cuò)誤，服務(wù)器時(shí)鐘進(jìn)行修改，夏時(shí)制DST到來(lái)后服務(wù)器時(shí)間沒(méi)有及時(shí)更新，這些都會(huì)引起通過(guò)修改時(shí)間比較文件版本的問(wèn)題。

ETag可以用來(lái)解決這種問(wèn)題。ETag是一個(gè)文件的唯一標(biāo)志符。就像一個(gè)哈?；蛘咧讣y，每個(gè)文件都有一個(gè)多帶帶的標(biāo)志，只要這個(gè)文件發(fā)生了改變，這個(gè)標(biāo)志就會(huì)發(fā)生變化。

服務(wù)器返回ETag標(biāo)簽：ETag:"39001d-1762a-50bf790757e00"
q888.png
接下來(lái)的訪問(wèn)順序如下所示：

1. 瀏覽器：Hey，我需要jquery.min.js這個(gè)文件，有沒(méi)有不匹配"39001d-1762a-50bf790757e00"這個(gè)串的
2. 服務(wù)器：（檢查ETag…）
3. 服務(wù)器：Hey，我這里的版本也是"39001d-1762a-50bf790757e00"，你已經(jīng)是最新的版本了
4. 瀏覽器：好，那就可以使用本地緩存了

如同 Last-modified 一樣，ETag 解決了文件版本比較的問(wèn)題。只不過(guò) ETag 的級(jí)別比 Last-Modified 高一些。

額外的標(biāo)簽

緩存標(biāo)簽永遠(yuǎn)不會(huì)停止工作，但是有時(shí)候我們需要對(duì)已經(jīng)緩存的內(nèi)容進(jìn)行一些控制。
l Cache-control: public 表示緩存的版本可以被代理服務(wù)器或者其他中間服務(wù)器識(shí)別。
l Cache-control: private 意味著這個(gè)文件對(duì)不同的用戶是不同的。只有用戶自己的瀏覽器能夠進(jìn)行緩存，公共的代理服務(wù)器不允許緩存。
l Cache-control: no-cache 意味著文件的內(nèi)容不應(yīng)當(dāng)被緩存。這在搜索或者翻頁(yè)結(jié)果中非常有用，因?yàn)橥瑯拥腢RL，對(duì)應(yīng)的內(nèi)容會(huì)發(fā)生變化。
q999.png

瀏覽器緩存刷新

1. 在地址欄中輸入網(wǎng)址后按回車(chē)或點(diǎn)擊轉(zhuǎn)到按鈕

瀏覽器以最少的請(qǐng)求來(lái)獲取網(wǎng)頁(yè)的數(shù)據(jù)，瀏覽器會(huì)對(duì)所有沒(méi)有過(guò)期的內(nèi)容直接使用本地緩存，從而減少了對(duì)瀏覽器的請(qǐng)求。所以，Expires，max-age標(biāo)記只對(duì)這種方式有效。

1. 按F5或?yàn)g覽器刷新按鈕

瀏覽器會(huì)在請(qǐng)求中附加必要的緩存協(xié)商，但不允許瀏覽器直接使用本地緩存，它能夠讓 Last-Modified、ETag發(fā)揮效果，但是對(duì)Expires無(wú)效。

1. 按Ctrl+F5或按Ctrl并點(diǎn)擊刷新按鈕

這種方式就是強(qiáng)制刷新，總會(huì)發(fā)起一個(gè)全新的請(qǐng)求，不使用任何緩存。

CDN緩存

瀏覽器本地緩存失效后，瀏覽器會(huì)向CDN邊緣節(jié)點(diǎn)發(fā)起請(qǐng)求。類(lèi)似瀏覽器緩存，CDN邊緣節(jié)點(diǎn)也存在著一套緩存機(jī)制。

CDN緩存的缺點(diǎn)

CDN的分流作用不僅減少了用戶的訪問(wèn)延時(shí)，也減少的源站的負(fù)載。但其缺點(diǎn)也很明顯：當(dāng)網(wǎng)站更新時(shí)，如果CDN節(jié)點(diǎn)上數(shù)據(jù)沒(méi)有及時(shí)更新，即便用戶再瀏覽器使用Ctrl +F5的方式使瀏覽器端的緩存失效，也會(huì)因?yàn)镃DN邊緣節(jié)點(diǎn)沒(méi)有同步最新數(shù)據(jù)而導(dǎo)致用戶訪問(wèn)異常。

CDN緩存策略

CDN邊緣節(jié)點(diǎn)緩存策略因服務(wù)商不同而不同，但一般都會(huì)遵循h(huán)ttp標(biāo)準(zhǔn)協(xié)議，通過(guò)http響應(yīng)頭中的Cache-control: max-age的字段來(lái)設(shè)置CDN邊緣節(jié)點(diǎn)數(shù)據(jù)緩存時(shí)間。

當(dāng)客戶端向CDN節(jié)點(diǎn)請(qǐng)求數(shù)據(jù)時(shí)，CDN節(jié)點(diǎn)會(huì)判斷緩存數(shù)據(jù)是否過(guò)期，若緩存數(shù)據(jù)并沒(méi)有過(guò)期，則直接將緩存數(shù)據(jù)返回給客戶端；否則，CDN節(jié)點(diǎn)就會(huì)向源站發(fā)出回源請(qǐng)求，從源站拉取最新數(shù)據(jù)，更新本地緩存，并將最新數(shù)據(jù)返回給客戶端。

CDN服務(wù)商一般會(huì)提供基于文件后綴、目錄多個(gè)維度來(lái)指定CDN緩存時(shí)間，為用戶提供更精細(xì)化的緩存管理。

CDN緩存時(shí)間會(huì)對(duì)“回源率”產(chǎn)生直接的影響。若CDN緩存時(shí)間較短，CDN邊緣節(jié)點(diǎn)上的數(shù)據(jù)會(huì)經(jīng)常失效，導(dǎo)致頻繁回源，增加了源站的負(fù)載，同時(shí)也增大的訪問(wèn)延時(shí)；若CDN緩存時(shí)間太長(zhǎng)，會(huì)帶來(lái)數(shù)據(jù)更新時(shí)間慢的問(wèn)題。開(kāi)發(fā)者需要增對(duì)特定的業(yè)務(wù)，來(lái)做特定的數(shù)據(jù)緩存時(shí)間管理。

CDN緩存刷新

CDN邊緣節(jié)點(diǎn)對(duì)開(kāi)發(fā)者是透明的，相比于瀏覽器Ctrl+F5的強(qiáng)制刷新來(lái)使瀏覽器本地緩存失效，開(kāi)發(fā)者可以通過(guò)CDN服務(wù)商提供的“刷新緩存”接口來(lái)達(dá)到清理CDN邊緣節(jié)點(diǎn)緩存的目的。這樣開(kāi)發(fā)者在更新數(shù)據(jù)后，可以使用“刷新緩存”功能來(lái)強(qiáng)制CDN節(jié)點(diǎn)上的數(shù)據(jù)緩存過(guò)期，保證客戶端在訪問(wèn)時(shí)，拉取到最新的數(shù)據(jù)。