轉(zhuǎn)載至http://www.cnblogs.com/blogbyhuer/p/9335257.html

一轮锥、CDN的定義

CDN：Content Delivery Network/Content Ddistribute Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)

客戶端訪問網(wǎng)站的過程：

沒有CDN：

1要尔、用戶在瀏覽器訪問欄中輸入要訪問的域名舍杜；

2、瀏覽器向DNS服務(wù)器請求對該域名的解析赵辕；

3既绩、DNS服務(wù)器返回該域名的IP地址給瀏覽器

4、瀏覽器使用該IP地址向服務(wù)器請求內(nèi)容还惠。

5饲握、服務(wù)器將用戶請求的內(nèi)容返回給瀏覽器。

使用了CDN：

1、用戶在瀏覽器中輸入要訪問的域名救欧。

2衰粹、瀏覽器向DNS服務(wù)器請求對域名進(jìn)行解析。由于CDN對域名解析進(jìn)行了調(diào)整笆怠，DNS服務(wù)器會(huì)最終將域名的解析權(quán)交給CNAME指向的CDN專用DNS服務(wù)器铝耻。

3、CDN的DNS服務(wù)器將CDN的負(fù)載均衡設(shè)備IP地址返回給用戶蹬刷。

4瓢捉、用戶向CDN的負(fù)載均衡設(shè)備發(fā)起內(nèi)容URL訪問請求。

5办成、CDN負(fù)載均衡設(shè)備會(huì)為用戶選擇一臺(tái)合適的緩存服務(wù)器提供服務(wù)泡态。

選擇的依據(jù)包括：根據(jù)用戶IP地址，判斷哪一臺(tái)服務(wù)器距離用戶最近迂卢；根據(jù)用戶所請求的URL中攜帶的內(nèi)容名稱某弦，判斷哪一臺(tái)服務(wù)器上有用戶所需內(nèi)容；查詢各個(gè)服務(wù)器的負(fù)載情況而克，判斷哪一臺(tái)服務(wù)器的負(fù)載較小刀崖。

基于以上這些依據(jù)的綜合分析之后，負(fù)載均衡設(shè)置會(huì)把緩存服務(wù)器的IP地址返回給用戶拍摇。

6、用戶向緩存服務(wù)器發(fā)出請求馆截。

7充活、緩存服務(wù)器響應(yīng)用戶請求，將用戶所需內(nèi)容傳送到用戶蜡娶。

如果這臺(tái)緩存服務(wù)器上并沒有用戶想要的內(nèi)容混卵，而負(fù)載均衡設(shè)備依然將它分配給了用戶，那么這臺(tái)服務(wù)器就要向它的上一級緩存服務(wù)器請求內(nèi)容窖张，直至追溯到網(wǎng)站的源服務(wù)器將內(nèi)容拉取到本地幕随。

二、關(guān)于緩存

沒有CDN：瀏覽器緩存

使用了CDN：瀏覽器緩存+CDN緩存

在用戶第一次訪問網(wǎng)站后宿接，網(wǎng)站的一些靜態(tài)資源如圖片等就會(huì)被下載到本地赘淮，作為緩存，當(dāng)用戶第二次訪問該網(wǎng)站的時(shí)候睦霎，瀏覽器就會(huì)從緩存中加載資源梢卸，不用向服務(wù)器請求資源，從而提高了網(wǎng)站的訪問速度副女，而若使用了CDN蛤高，當(dāng)瀏覽器本地緩存的資源過期之后，瀏覽器不是直接向源站點(diǎn)請求資源，而是向CDN邊緣節(jié)點(diǎn)請求資源戴陡，CDN邊緣節(jié)點(diǎn)中也存在緩存塞绿，若CDN中的緩存也過期，那就由CDN邊緣節(jié)點(diǎn)向源站點(diǎn)發(fā)出回源請求來獲取最新資源恤批。

瀏覽器緩存以及CDN緩存都有一套判斷文件是否需要更新的機(jī)制：

瀏覽器在加載資源時(shí)异吻，先根據(jù)這個(gè)資源的一些http header判斷它是否命中強(qiáng)緩存，如果命中开皿，瀏覽器直接從自己的緩存中讀取資源涧黄，不會(huì)發(fā)請求到服務(wù)器，當(dāng)強(qiáng)緩存沒有命中的時(shí)候赋荆，瀏覽器一定會(huì)發(fā)送一個(gè)請求到服務(wù)器笋妥，服務(wù)器端依據(jù)資源的另外一些http header驗(yàn)證這個(gè)資源是否命中協(xié)商緩存，如果命中窄潭，服務(wù)器會(huì)將這個(gè)請求返回春宣，但是不會(huì)返回這個(gè)資源的數(shù)據(jù)，而是告訴客戶端可以直接從緩存中加載這個(gè)資源嫉你，于是瀏覽器還是從自己的緩存中加載資源月帝，當(dāng)協(xié)商緩存也沒有命中的時(shí)候，瀏覽器直接從服務(wù)器加載資源數(shù)據(jù)幽污。

CDN節(jié)點(diǎn)緩存機(jī)制在不同服務(wù)商中是不同的嚷辅，但一般都遵循HTTP協(xié)議，通過http響應(yīng)頭中的Cache-Control:max-age的字段來設(shè)置CDN節(jié)點(diǎn)文件緩存時(shí)間距误。當(dāng)客戶端向CDN節(jié)點(diǎn)請求數(shù)據(jù)時(shí)簸搞，CDN會(huì)判斷緩存數(shù)據(jù)是否過期，若沒有過期准潭，則直接將緩存數(shù)據(jù)返回給客戶端趁俊，否則就向源站點(diǎn)發(fā)出請求，從源站點(diǎn)拉取最新數(shù)據(jù)刑然，更新本地緩存寺擂，并將最新數(shù)據(jù)返回給客戶端。CDN服務(wù)商一般會(huì)提供基于文件后綴泼掠、目錄多個(gè)維度來指定CDN緩存時(shí)間怔软，為用戶提供更精細(xì)化的緩存管理。CDN緩存時(shí)間會(huì)對“回源率”產(chǎn)生直接的影響择镇，若CDN緩存時(shí)間短爽雄，則數(shù)據(jù)經(jīng)常失效，導(dǎo)致頻繁回源沐鼠，增加了源站的負(fù)載挚瘟，同時(shí)也增大了訪問延時(shí)叹谁；若緩存時(shí)間長，數(shù)據(jù)更新時(shí)間慢乘盖，因此需要針對不同的業(yè)務(wù)需求來選擇特定的數(shù)據(jù)緩存管理焰檩。

瀏覽器緩存刷新：

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

瀏覽器以最少的請求來獲取網(wǎng)頁的數(shù)據(jù)订框，瀏覽器會(huì)對所有沒有過期的內(nèi)容直接使用本地緩存即使用強(qiáng)緩存析苫，從而減少了對服務(wù)器的請求，Expires穿扳、max-age標(biāo)志只對這種方式有效衩侥。

2、按F5或?yàn)g覽器刷新按鈕

瀏覽器會(huì)在請求中附加必要的緩存協(xié)商矛物，但不允許瀏覽器直接使用本地緩存即跳過強(qiáng)緩存的判斷茫死，直接進(jìn)行協(xié)商緩存的判斷，Last-Modified履羞、ETag在這種方式發(fā)揮作用峦萎。

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

強(qiáng)制刷新忆首，完全不使用緩存

CDN緩存刷新：

CDN節(jié)點(diǎn)對開發(fā)者時(shí)透明的爱榔，可以通過CDN服務(wù)商提供的“刷新緩存”接口來達(dá)到清理CDN節(jié)點(diǎn)緩存的效果，強(qiáng)制使數(shù)據(jù)過期糙及，從而獲取到最新的數(shù)據(jù)详幽。

三、瀏覽器緩存

這一點(diǎn)主要解析瀏覽器緩存以及緩存機(jī)制的詳細(xì)過程浸锨。

1.1強(qiáng)緩存：

當(dāng)瀏覽器對某個(gè)資源的請求命中了強(qiáng)緩存時(shí)妒潭，返回的http狀態(tài)碼為200，在chrome開發(fā)者工具中的network中的size會(huì)顯示from cache

強(qiáng)緩存時(shí)利用Expires或者Cache-Control這兩個(gè)http header實(shí)現(xiàn)的揣钦，都用來表示資源在客戶端緩存的有效期

Expires是http1.0提出的一個(gè)header，描述的是一個(gè)絕對時(shí)間漠酿，由服務(wù)器返回冯凹，用GMT格式的字符串表示，如Exprires：Thu炒嘲，31 Dec 2037 23：55：55 GMT

緩存過程：

1宇姚、瀏覽器第一次跟服務(wù)器請求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)夫凸，在response的header加上Expires的header

2浑劳、瀏覽器在接收到這個(gè)資源后，會(huì)把這個(gè)資源連同所有的response header一起緩存下來夭拌，所以緩存命中的請求返回的header并不是來自服務(wù)器魔熏，而是來自之前緩存的header

3衷咽、瀏覽器再請求這個(gè)資源時(shí)，先從緩存中尋找蒜绽，找到這個(gè)資源后镶骗，拿出Expires跟當(dāng)前的請求時(shí)間比較，如果請求時(shí)間在Expires指定的時(shí)間之前躲雅，就能命中緩存鼎姊，否則就不行。

4相赁、如果緩存沒有命中相寇，瀏覽器直接從服務(wù)器加載資源時(shí)，Expires Header在重新加載的時(shí)候會(huì)被更新

Expires是服務(wù)器返回的一個(gè)絕對時(shí)間钮科，在服務(wù)器時(shí)間與客戶端時(shí)間相差較大時(shí)唤衫，緩存管理容易出現(xiàn)問題，比如隨意修改下客戶端時(shí)間跺嗽，就能影響緩存命中的結(jié)果战授，所以在http1.1的時(shí)候，提出了一個(gè)新的header桨嫁，也就是Cache-Control植兰，這是一個(gè)相對時(shí)間，在進(jìn)行緩存命中的時(shí)候璃吧，都是利用客戶端時(shí)間進(jìn)行判斷楣导，因此更有效安全一些，在配置緩存的時(shí)候畜挨，以秒為單位筒繁，用數(shù)值表示：如：Cache-Control：max-age=315360000，它的緩存過程是：

1巴元、瀏覽器第一次跟服務(wù)器請求一個(gè)資源毡咏，服務(wù)器在返回這個(gè)資源的同時(shí)，在response的header加上Cache-Control的header

2逮刨、瀏覽器在接收到這個(gè)資源的時(shí)候呕缭，會(huì)把這個(gè)資源連同所有response header一起緩存下來

3、瀏覽器再次請求這個(gè)資源的時(shí)候修己，先從緩存中尋找恢总，找到這個(gè)資源之后，再拿這個(gè)過期時(shí)間跟當(dāng)前的請求時(shí)間比較睬愤，如果請求時(shí)間在過期時(shí)間之前片仿，就能命中緩存，否則就不行尤辱。

4砂豌、如果緩存沒有命中厢岂，瀏覽器直接從服務(wù)器加載資源時(shí)，Cache-Control在重新加載的時(shí)候會(huì)被更新

這兩個(gè)header可以只用一個(gè)奸鸯，也可以同時(shí)用兩個(gè)咪笑，同時(shí)存在時(shí)，Cache-Control優(yōu)先級高于Expires

1.2 強(qiáng)緩存的管理

兩種方式來設(shè)置是否啟用強(qiáng)緩存：

1娄涩、通過代碼的方式窗怒，在web服務(wù)器返回的響應(yīng)中添加Expires和Cache-Control Header

2、通過配置web服務(wù)器的方式蓄拣，讓web服務(wù)器在響應(yīng)資源的時(shí)候統(tǒng)一添加Expires和Cache-Control Header

1.3 強(qiáng)緩存的應(yīng)用

強(qiáng)緩存是前端性能優(yōu)化最有力的工具扬虚，對于有大量靜態(tài)資源的網(wǎng)頁，一定要利用強(qiáng)緩存球恤，提高響應(yīng)速度辜昵，通常是為這些靜態(tài)資源全部配置一個(gè)超時(shí)時(shí)間超長的Expires或Cache-Control，這樣用戶只會(huì)在第一次訪問網(wǎng)站時(shí)加載靜態(tài)資源咽斧，其他時(shí)間只要緩存沒有失效并且用戶沒有強(qiáng)制刷新的條件下都會(huì)從緩存中加載堪置。

然而這種緩存配置方式會(huì)帶來一個(gè)問題，就是當(dāng)資源更新時(shí)张惹，客戶端由于有緩存不會(huì)向服務(wù)器請求最新的資源舀锨，這個(gè)問題已有解決方案：

通過更新頁面中引用的資源路徑，讓瀏覽器主動(dòng)放棄緩存宛逗，加載新資源坎匿。

但要實(shí)現(xiàn)有更新的文件才需要瀏覽器重新加載，因此必須讓url的修改與文件內(nèi)容相關(guān)聯(lián)雷激，利用數(shù)據(jù)摘要算法對文件求摘要信息替蔬，摘要信息與文件內(nèi)容一一對應(yīng)，這一點(diǎn)許多前端構(gòu)建工具都做到了屎暇，如webpack

1.4 瀏覽器默認(rèn)緩存使開發(fā)環(huán)境下常因?yàn)橘Y源沒有及時(shí)更新而看不到效果

解決方法：

1承桥、ctrl+F5

2、瀏覽器隱私模式開發(fā)

3根悼、chrome開發(fā)者工具里將Disable cache選項(xiàng)打勾凶异，阻止緩存

4、在開發(fā)階段番挺，給資源加上一個(gè)動(dòng)態(tài)的參數(shù)，由于每次資源的修改都要更新引用的位置屯掖，同時(shí)修改參數(shù)的值玄柏，所以操作起來不是很方便，除非是在動(dòng)態(tài)頁面比如jsp里開發(fā)就可以用服務(wù)器變量來解決贴铜，或者用前端構(gòu)建工具來處理這個(gè)參數(shù)修改的問題粪摘。

5瀑晒、如果資源引用的頁面被嵌入到了一個(gè)iframe里面，可以在iframe的區(qū)域右鍵重新加載該頁面

6徘意、如果緩存問題出現(xiàn)在ajax請求中苔悦，最有效的解決辦法就是ajax的請求地址追加隨機(jī)數(shù)

7、動(dòng)態(tài)設(shè)置iframe的src時(shí)椎咧，有可能因?yàn)榫彺鎲栴}導(dǎo)致看不到最新效果玖详，在src后面添加隨機(jī)數(shù)即可

8、通過前端開發(fā)工具grunt gulp等的插件來啟動(dòng)一個(gè)靜態(tài)服務(wù)器勤讽，則在這個(gè)服務(wù)器下所有資源返回的response header中蟋座，Cache-Control始終被設(shè)置為不緩存

1.5 發(fā)布問題

發(fā)布問題：若頁面和它引用的資源路徑同時(shí)更新了，不管是先部署頁面還是先部署資源都會(huì)帶來各種問題脚牍，這是由于資源是覆蓋式發(fā)布的向臀，即用待發(fā)布資源覆蓋已發(fā)布資源。

解決辦法就是實(shí)現(xiàn)非覆蓋式發(fā)布：把有修改的資源文件作為一個(gè)新的文件發(fā)布诸狭，不對已有的資源文件進(jìn)行覆蓋券膀，這樣用戶還可以請求舊的資源文件，不至于發(fā)生頁面錯(cuò)亂的問題驯遇，這樣先部署靜態(tài)資源芹彬，再覆蓋式部署頁面，等到用戶訪問新頁面的時(shí)候妹懒，新的資源文件也已發(fā)布雀监，就可以正確請求，即可解決問題眨唬。

2.1 協(xié)商緩存

如果命中協(xié)商緩存会前，請求響應(yīng)返回的http狀態(tài)為304以及一個(gè)Not Modified字符串，協(xié)商緩存利用的是【Last-Modified匾竿、If-Modified-Since】瓦宜、【ETag、If-None-Match】這兩對header來管理的岭妖。

【Last-Modified临庇、If-Modified-Since】：

1、瀏覽器第一次跟服務(wù)器請求一個(gè)資源昵慌，服務(wù)器在返回這個(gè)資源時(shí)假夺，在response的header加上Last-Modified的header，表示這個(gè)資源在服務(wù)器上的最后修改時(shí)間

2斋攀、瀏覽器再次向服務(wù)器請求這個(gè)資源時(shí)已卷，在request的header加上If-Modified-Since的header，這個(gè)header的值就是上一次請求時(shí)返回的Last-Modified的值

3淳蔼、服務(wù)器再次收到資源請求時(shí)侧蘸，根據(jù)瀏覽器傳過來If-Modified-Since和資源在服務(wù)器上的最后修改時(shí)間判斷資源是否有變化裁眯，如果沒有變化則返回304 Not Modified，但是不會(huì)返回資源內(nèi)容讳癌，如果有變化就返回資源內(nèi)容穿稳，當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時(shí)，response header中不會(huì)再添加Last-Modified的header晌坤，因?yàn)橘Y源沒有變化逢艘，Last-Modified的值也不變

4、瀏覽器收到304的響應(yīng)后泡仗，就會(huì)從緩存中加載資源

5埋虹、如果協(xié)商緩存沒有命中，瀏覽器直接從服務(wù)器加載資源時(shí)娩怎，Last-Modofied header在重新加載的時(shí)候會(huì)被更新搔课，下次請求時(shí)，If-Modified-Since會(huì)采用上一次返回的Last-Modified的值

這一對header都是根據(jù)服務(wù)器時(shí)間返回的截亦，有時(shí)候會(huì)有服務(wù)器資源有變化爬泥，但最后修改時(shí)間卻沒有變化的情況，因此有了

【Etag崩瓤、If-None-Match】：

1袍啡、瀏覽器第一次向服務(wù)器請求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)却桶，在response的header加上ETag的header境输，這個(gè)header是服務(wù)器根據(jù)當(dāng)前請求的資源生成的一個(gè)唯一標(biāo)識，是一個(gè)字符串颖系，只要資源內(nèi)容發(fā)生改變嗅剖，這個(gè)字符串也會(huì)改變，跟時(shí)間沒有關(guān)系

2嘁扼、瀏覽器再次請求這個(gè)資源的時(shí)候信粮，在request的header上加上If-None-Match的header。這個(gè)header的值是上一次請求返回的ETag的值

3趁啸、服務(wù)器再次收到資源請求時(shí)强缘，根據(jù)客戶端傳過來的If-None-Match和重新生成的該資源的新的ETag做比較，相同則返回304 Not Modified不傅，不會(huì)返回資源內(nèi)容旅掂，如果不同則返回資源內(nèi)容，但這里即使資源沒有發(fā)生變化访娶，也會(huì)返回ETag商虐，因?yàn)檫@個(gè)ETag重新生成過，即使沒有ETag沒有變化

4、瀏覽器收到304響應(yīng)后称龙，就從緩存中加載資源

2.2 協(xié)商緩存的管理

一般服務(wù)器上的【Last-Modified、If-Modified-Since】和【Etag戳晌、If-None-Match】會(huì)同時(shí)啟用鲫尊，協(xié)商緩存需要配合強(qiáng)緩存使用