轉(zhuǎn)載自http://www.reibang.com/p/47f3406c8084

一砾肺、CDN的定義

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

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

沒(méi)有CDN：

1防嗡、用戶在瀏覽器訪問(wèn)欄中輸入要訪問(wèn)的域名变汪；

2、瀏覽器向DNS服務(wù)器請(qǐng)求對(duì)該域名的解析蚁趁；

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

4、瀏覽器使用該IP地址向服務(wù)器請(qǐng)求內(nèi)容他嫡。

5番官、服務(wù)器將用戶請(qǐng)求的內(nèi)容返回給瀏覽器。

使用了CDN：

1涮瞻、用戶在瀏覽器中輸入要訪問(wèn)的域名鲤拿。

2、瀏覽器向DNS服務(wù)器請(qǐng)求對(duì)域名進(jìn)行解析署咽。由于CDN對(duì)域名解析進(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訪問(wèn)請(qǐng)求慕匠。

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

選擇的依據(jù)包括：根據(jù)用戶IP地址台谊，判斷哪一臺(tái)服務(wù)器距離用戶最近蓉媳；根據(jù)用戶所請(qǐng)求的URL中攜帶的內(nèi)容名稱，判斷哪一臺(tái)服務(wù)器上有用戶所需內(nèi)容锅铅；查詢各個(gè)服務(wù)器的負(fù)載情況酪呻，判斷哪一臺(tái)服務(wù)器的負(fù)載較小。

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

6、用戶向緩存服務(wù)器發(fā)出請(qǐng)求贼邓。

7阶冈、緩存服務(wù)器響應(yīng)用戶請(qǐng)求，將用戶所需內(nèi)容傳送到用戶塑径。

如果這臺(tái)緩存服務(wù)器上并沒(méi)有用戶想要的內(nèi)容女坑，而負(fù)載均衡設(shè)備依然將它分配給了用戶，那么這臺(tái)服務(wù)器就要向它的上一級(jí)緩存服務(wù)器請(qǐng)求內(nèi)容统舀，直至追溯到網(wǎng)站的源服務(wù)器將內(nèi)容拉取到本地匆骗。

二、關(guān)于緩存

沒(méi)有CDN：瀏覽器緩存

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

在用戶第一次訪問(wèn)網(wǎng)站后绑咱，網(wǎng)站的一些靜態(tài)資源如圖片等就會(huì)被下載到本地绰筛，作為緩存，當(dāng)用戶第二次訪問(wèn)該網(wǎng)站的時(shí)候描融，瀏覽器就會(huì)從緩存中加載資源铝噩，不用向服務(wù)器請(qǐng)求資源，從而提高了網(wǎng)站的訪問(wèn)速度窿克，而若使用了CDN骏庸，當(dāng)瀏覽器本地緩存的資源過(guò)期之后，瀏覽器不是直接向源站點(diǎn)請(qǐng)求資源年叮，而是向CDN邊緣節(jié)點(diǎn)請(qǐng)求資源具被，CDN邊緣節(jié)點(diǎn)中也存在緩存，若CDN中的緩存也過(guò)期只损，那就由CDN邊緣節(jié)點(diǎn)向源站點(diǎn)發(fā)出回源請(qǐng)求來(lái)獲取最新資源一姿。

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

瀏覽器在加載資源時(shí)，先根據(jù)這個(gè)資源的一些http header判斷它是否命中強(qiáng)緩存跃惫，如果命中叮叹，瀏覽器直接從自己的緩存中讀取資源，不會(huì)發(fā)請(qǐng)求到服務(wù)器爆存，當(dāng)強(qiáng)緩存沒(méi)有命中的時(shí)候蛉顽，瀏覽器一定會(huì)發(fā)送一個(gè)請(qǐng)求到服務(wù)器，服務(wù)器端依據(jù)資源的另外一些http header驗(yàn)證這個(gè)資源是否命中協(xié)商緩存先较，如果命中携冤，服務(wù)器會(huì)將這個(gè)請(qǐng)求返回悼粮，但是不會(huì)返回這個(gè)資源的數(shù)據(jù)，而是告訴客戶端可以直接從緩存中加載這個(gè)資源曾棕，于是瀏覽器還是從自己的緩存中加載資源扣猫，當(dāng)協(xié)商緩存也沒(méi)有命中的時(shí)候，瀏覽器直接從服務(wù)器加載資源數(shù)據(jù)睁蕾。

CDN節(jié)點(diǎn)緩存機(jī)制在不同服務(wù)商中是不同的苞笨，但一般都遵循HTTP協(xié)議，通過(guò)http響應(yīng)頭中的Cache-Control:max-age的字段來(lái)設(shè)置CDN節(jié)點(diǎn)文件緩存時(shí)間子眶。當(dāng)客戶端向CDN節(jié)點(diǎn)請(qǐng)求數(shù)據(jù)時(shí)瀑凝，CDN會(huì)判斷緩存數(shù)據(jù)是否過(guò)期，若沒(méi)有過(guò)期臭杰，則直接將緩存數(shù)據(jù)返回給客戶端粤咪，否則就向源站點(diǎn)發(fā)出請(qǐng)求，從源站點(diǎn)拉取最新數(shù)據(jù)渴杆，更新本地緩存寥枝，并將最新數(shù)據(jù)返回給客戶端。CDN服務(wù)商一般會(huì)提供基于文件后綴磁奖、目錄多個(gè)維度來(lái)指定CDN緩存時(shí)間囊拜，為用戶提供更精細(xì)化的緩存管理。CDN緩存時(shí)間會(huì)對(duì)“回源率”產(chǎn)生直接的影響比搭，若CDN緩存時(shí)間短冠跷，則數(shù)據(jù)經(jīng)常失效，導(dǎo)致頻繁回源身诺，增加了源站的負(fù)載蜜托，同時(shí)也增大了訪問(wèn)延時(shí)；若緩存時(shí)間長(zhǎng)霉赡，數(shù)據(jù)更新時(shí)間慢橄务，因此需要針對(duì)不同的業(yè)務(wù)需求來(lái)選擇特定的數(shù)據(jù)緩存管理。

瀏覽器緩存刷新：

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

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

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

瀏覽器會(huì)在請(qǐng)求中附加必要的緩存協(xié)商，但不允許瀏覽器直接使用本地緩存即跳過(guò)強(qiáng)緩存的判斷玻粪，直接進(jìn)行協(xié)商緩存的判斷隅津，Last-Modified诬垂、ETag在這種方式發(fā)揮作用。

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

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

CDN緩存刷新：

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

三谓苟、瀏覽器緩存

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

1.1強(qiáng)緩存：

當(dāng)瀏覽器對(duì)某個(gè)資源的請(qǐng)求命中了強(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)的卑笨，都用來(lái)表示資源在客戶端緩存的有效期

Expires是http1.0提出的一個(gè)header，描述的是一個(gè)絕對(duì)時(shí)間仑撞，由服務(wù)器返回赤兴，用GMT格式的字符串表示，如Exprires：Thu隧哮，31 Dec 2037 23：55：55 GMT

緩存過(guò)程：

1桶良、瀏覽器第一次跟服務(wù)器請(qǐng)求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)沮翔，在response的header加上Expires的header

2陨帆、瀏覽器在接收到這個(gè)資源后，會(huì)把這個(gè)資源連同所有的response header一起緩存下來(lái)鉴竭，所以緩存命中的請(qǐng)求返回的header并不是來(lái)自服務(wù)器歧譬，而是來(lái)自之前緩存的header

3、瀏覽器再請(qǐng)求這個(gè)資源時(shí)搏存，先從緩存中尋找瑰步，找到這個(gè)資源后，拿出Expires跟當(dāng)前的請(qǐng)求時(shí)間比較璧眠，如果請(qǐng)求時(shí)間在Expires指定的時(shí)間之前缩焦，就能命中緩存，否則就不行责静。

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

Expires是服務(wù)器返回的一個(gè)絕對(duì)時(shí)間题翻，在服務(wù)器時(shí)間與客戶端時(shí)間相差較大時(shí)，緩存管理容易出現(xiàn)問(wèn)題腰鬼，比如隨意修改下客戶端時(shí)間嵌赠，就能影響緩存命中的結(jié)果塑荒，所以在http1.1的時(shí)候，提出了一個(gè)新的header姜挺，也就是Cache-Control齿税，這是一個(gè)相對(duì)時(shí)間，在進(jìn)行緩存命中的時(shí)候炊豪，都是利用客戶端時(shí)間進(jìn)行判斷凌箕，因此更有效安全一些，在配置緩存的時(shí)候词渤，以秒為單位牵舱，用數(shù)值表示：如：Cache-Control：max-age=315360000，它的緩存過(guò)程是：

1掖肋、瀏覽器第一次跟服務(wù)器請(qǐng)求一個(gè)資源仆葡，服務(wù)器在返回這個(gè)資源的同時(shí)，在response的header加上Cache-Control的header

2志笼、瀏覽器在接收到這個(gè)資源的時(shí)候沿盅，會(huì)把這個(gè)資源連同所有response header一起緩存下來(lái)

3、瀏覽器再次請(qǐng)求這個(gè)資源的時(shí)候纫溃，先從緩存中尋找腰涧，找到這個(gè)資源之后，再拿這個(gè)過(guò)期時(shí)間跟當(dāng)前的請(qǐng)求時(shí)間比較紊浩，如果請(qǐng)求時(shí)間在過(guò)期時(shí)間之前窖铡，就能命中緩存，否則就不行坊谁。

4费彼、如果緩存沒(méi)有命中，瀏覽器直接從服務(wù)器加載資源時(shí)口芍，Cache-Control在重新加載的時(shí)候會(huì)被更新

這兩個(gè)header可以只用一個(gè)箍铲，也可以同時(shí)用兩個(gè)，同時(shí)存在時(shí)鬓椭，Cache-Control優(yōu)先級(jí)高于Expires

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

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

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

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

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

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

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

通過(guò)更新頁(yè)面中引用的資源路徑烫堤，讓瀏覽器主動(dòng)放棄緩存荣赶，加載新資源。

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

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

解決方法：

1、ctrl+F5

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

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

4口注、在開發(fā)階段变擒，給資源加上一個(gè)動(dòng)態(tài)的參數(shù)，由于每次資源的修改都要更新引用的位置寝志，同時(shí)修改參數(shù)的值娇斑，所以操作起來(lái)不是很方便，除非是在動(dòng)態(tài)頁(yè)面比如jsp里開發(fā)就可以用服務(wù)器變量來(lái)解決材部，或者用前端構(gòu)建工具來(lái)處理這個(gè)參數(shù)修改的問(wèn)題毫缆。

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

6苦丁、如果緩存問(wèn)題出現(xiàn)在ajax請(qǐng)求中，最有效的解決辦法就是ajax的請(qǐng)求地址追加隨機(jī)數(shù)

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

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

1.5 發(fā)布問(wèn)題

發(fā)布問(wèn)題：若頁(yè)面和它引用的資源路徑同時(shí)更新了泽本，不管是先部署頁(yè)面還是先部署資源都會(huì)帶來(lái)各種問(wèn)題淘太，這是由于資源是覆蓋式發(fā)布的，即用待發(fā)布資源覆蓋已發(fā)布資源。

解決辦法就是實(shí)現(xiàn)非覆蓋式發(fā)布：把有修改的資源文件作為一個(gè)新的文件發(fā)布蒲牧，不對(duì)已有的資源文件進(jìn)行覆蓋撇贺，這樣用戶還可以請(qǐng)求舊的資源文件，不至于發(fā)生頁(yè)面錯(cuò)亂的問(wèn)題冰抢，這樣先部署靜態(tài)資源松嘶，再覆蓋式部署頁(yè)面，等到用戶訪問(wèn)新頁(yè)面的時(shí)候挎扰，新的資源文件也已發(fā)布翠订，就可以正確請(qǐng)求，即可解決問(wèn)題遵倦。

2.1 協(xié)商緩存

如果命中協(xié)商緩存尽超，請(qǐng)求響應(yīng)返回的http狀態(tài)為304以及一個(gè)Not Modified字符串，協(xié)商緩存利用的是【Last-Modified梧躺、If-Modified-Since】似谁、【ETag、If-None-Match】這兩對(duì)header來(lái)管理的掠哥。

【****Last-Modified巩踏、If-Modified-Since】：

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

2目代、瀏覽器再次向服務(wù)器請(qǐng)求這個(gè)資源時(shí)屈梁，在request的header加上If-Modified-Since的header，這個(gè)header的值就是上一次請(qǐng)求時(shí)返回的Last-Modified的值

3榛了、服務(wù)器再次收到資源請(qǐng)求時(shí)在讶，根據(jù)瀏覽器傳過(guò)來(lái)If-Modified-Since和資源在服務(wù)器上的最后修改時(shí)間判斷資源是否有變化，如果沒(méi)有變化則返回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源沒(méi)有變化，Last-Modified的值也不變

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

5、如果協(xié)商緩存沒(méi)有命中囊卜，瀏覽器直接從服務(wù)器加載資源時(shí)娜扇，Last-Modofied header在重新加載的時(shí)候會(huì)被更新错沃，下次請(qǐng)求時(shí)，If-Modified-Since會(huì)采用上一次返回的Last-Modified的值

這一對(duì)header都是根據(jù)服務(wù)器時(shí)間返回的雀瓢，有時(shí)候會(huì)有服務(wù)器資源有變化枢析，但最后修改時(shí)間卻沒(méi)有變化的情況，因此有了

【Etag刃麸、If-None-Match】：

1醒叁、瀏覽器第一次向服務(wù)器請(qǐng)求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)嫌蚤，在response的header加上ETag的header辐益，這個(gè)header是服務(wù)器根據(jù)當(dāng)前請(qǐng)求的資源生成的一個(gè)唯一標(biāo)識(shí)，是一個(gè)字符串脱吱，只要資源內(nèi)容發(fā)生改變，這個(gè)字符串也會(huì)改變认罩，跟時(shí)間沒(méi)有關(guān)系

2箱蝠、瀏覽器再次請(qǐng)求這個(gè)資源的時(shí)候，在request的header上加上If-None-Match的header垦垂。這個(gè)header的值是上一次請(qǐng)求返回的ETag的值

3宦搬、服務(wù)器再次收到資源請(qǐng)求時(shí)，根據(jù)客戶端傳過(guò)來(lái)的If-None-Match和重新生成的該資源的新的ETag做比較劫拗，相同則返回304 Not Modified间校，不會(huì)返回資源內(nèi)容，如果不同則返回資源內(nèi)容页慷，但這里即使資源沒(méi)有發(fā)生變化憔足，也會(huì)返回ETag，因?yàn)檫@個(gè)ETag重新生成過(guò)酒繁，即使沒(méi)有ETag沒(méi)有變化

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

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

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