序

瀏覽器緩存只是為了提升頁(yè)面再次被訪問(wèn)的速度，而對(duì)于提升首次訪問(wèn)的響應(yīng)能力，通常是采用CDN進(jìn)行加速。CDN在前端優(yōu)化過(guò)程中起著關(guān)鍵性的作用，理解CDN的工作原理對(duì)前端開發(fā)人員提升網(wǎng)站性能有著很大的幫助，本文從CDN工作原理、CDN緩存相關(guān)、前端優(yōu)化三個(gè)角度對(duì)CDN常見(jiàn)問(wèn)題進(jìn)行基礎(chǔ)介紹。

CDN工作原理

CDN是什么？

CDN（Content delivery networks，內(nèi)容分發(fā)網(wǎng)絡(luò)），其目的是通過(guò)在源服務(wù)器和用戶之間增加一層新的網(wǎng)絡(luò)架構(gòu)，將網(wǎng)站的內(nèi)容分發(fā)到最接近用戶的網(wǎng)絡(luò)“邊緣”，使用戶可以就近取得所需的內(nèi)容，提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度。我們的日常生活中，無(wú)論是在網(wǎng)站上看新聞，網(wǎng)上購(gòu)物，觀看視頻，還是聊天，都和CDN息息相關(guān)。

使用CDN好處？

• 提升網(wǎng)頁(yè)加載速度

• 處理高流量負(fù)載

• 無(wú)需?本完成本地化覆蓋

• 減少帶寬消耗

• 在多臺(tái)服務(wù)器間均衡負(fù)載

• 使你的網(wǎng)站免于DDoS（拒絕服務(wù)）的攻擊

• ……

CDN是如何工作的？

為了使用戶和網(wǎng)站源服務(wù)器之間的“距離”最短，CDN需要在不同的地理位置（PoPs，接入點(diǎn)）存儲(chǔ)網(wǎng)站內(nèi)容的緩存。一般來(lái)說(shuō)，每個(gè)PoP都包含多個(gè)緩存服務(wù)器，它們的主要作用是使用戶訪問(wèn)到最近的緩存服務(wù)器，?此減少信息的往返時(shí)間，達(dá)到減少響應(yīng)時(shí)間的目的。緩存服務(wù)器負(fù)責(zé)存儲(chǔ)和分發(fā)緩存文件，主要功能是提升網(wǎng)站相應(yīng)速度和減少帶寬消耗。這些緩存文件會(huì)被存儲(chǔ)在固態(tài)硬盤或者RAM中。

CDN緩存相關(guān)

CDN緩存？

用戶在瀏覽網(wǎng)站的時(shí)候，瀏覽器在硬盤上保存網(wǎng)站中的圖片或者其他文件的副本，用戶再次訪問(wèn)該網(wǎng)站的時(shí)候，瀏覽器就不用再下載全部的文件，減少了HTTP請(qǐng)求數(shù)量。與服務(wù)器在硬盤上存儲(chǔ)緩存文件類似，CDN將網(wǎng)站的內(nèi)容移動(dòng)到更為強(qiáng)大的代理服務(wù)器上，通過(guò)動(dòng)態(tài)域名解析，用戶的請(qǐng)求被分到離自己最快的服務(wù)器，CDN服務(wù)器直接返回緩存文件或通過(guò)專線代理原站的內(nèi)容，進(jìn)而提升內(nèi)容分發(fā)的速度。此時(shí)，瀏覽器和服務(wù)器的交互可以用下圖表示：

CDN緩存內(nèi)容的更新？

客戶端瀏覽器先檢查是否有本地緩存是否過(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緩存靜態(tài)資源，常用的有：圖片、視頻、音樂(lè)、css、js文件等。

CDN緩存內(nèi)容的有效期?

1. 原站apache吐出的靜態(tài)文件：由apache的expire和header模塊控制

主要兩項(xiàng)：last-modified，cache-control：max-age

apache缺省配置，所有靜態(tài)文件在cdn只緩存3600s（需要我們按需求調(diào)整被加速服務(wù)器的apache設(shè)置），3600s后CDN失效，用戶訪問(wèn)時(shí)會(huì)重新請(qǐng)求原站，如果沒(méi)有變化，緩存失效周期自動(dòng)延長(zhǎng)10%。

2. 原站jsp或php吐出的動(dòng)態(tài)內(nèi)容（url形式必須是靜態(tài)的）

由程序控制last-modified，cache-control：max-age public ，apache的設(shè)置將不起作用，CDN根據(jù)這兩項(xiàng)判斷是否需要到原站更新內(nèi)容。

CDN和應(yīng)用的結(jié)合策略？

1. 變?不頻繁的頁(yè)面，在原站生成靜態(tài)頁(yè)面，原站apache上定義過(guò)期時(shí)間，例如1天。原站上靜態(tài)文件更新后，可以等待CDN過(guò)期?；蛘咧鲃?dòng)通知CDN更新（隨著CDN節(jié)點(diǎn)越來(lái)越多，代價(jià)會(huì)非常高）。

2. 變化頻繁的頁(yè)面，不生成靜態(tài)頁(yè)面，由jsp或php定義過(guò)期時(shí)間，例如5s或60s。CDN過(guò)期后，如果有用戶訪問(wèn)就從原站上抓取。

優(yōu)點(diǎn)：相關(guān)頁(yè)面內(nèi)容更新后，不需要主動(dòng)通知100個(gè)原站都來(lái)抓取，有效降低原站的壓力。

如果頁(yè)面內(nèi)容沒(méi)有變化，返回last-modified不變，這樣原站會(huì)直接返回304給CDN，CDN也會(huì)返回304給用戶。減少網(wǎng)絡(luò)傳輸和速度。

3. 特靜態(tài)資源，或者頻繁訪問(wèn)、頻繁更新的頁(yè)面，通過(guò)apache no-cache告訴IE不緩存，html中就不需要使用pinglun.js?123456這樣的代碼形式，然后用max-age告訴CDN緩存1s，這樣避免每次用戶請(qǐng)求都轉(zhuǎn)到原站。

CDN緩存策略？

開發(fā)人員采用HTTP緩存頭來(lái)標(biāo)記可緩存的內(nèi)容以及設(shè)置緩存過(guò)期時(shí)間，采用緩存策略來(lái)確保內(nèi)容的新鮮度。如“Cache-Control: max-age=600”表示該文件在用戶瀏覽器緩存的副本將在10分鐘后過(guò)期，F(xiàn)iddler可以方便地查看緩存的header。瀏覽器緩存相關(guān)內(nèi)容在此不做介紹。

CDN有兩種方式可以檢測(cè)瀏覽器中緩存和源服務(wù)器上文件是否匹配：比較最新修改日期Last-Modified和比較ETag。

如果每個(gè)文件都進(jìn)行標(biāo)記，會(huì)導(dǎo)致效率非常低下。如果發(fā)現(xiàn)緩存頭指令不再適合，開發(fā)人員可以對(duì)緩存頭進(jìn)行重寫?，F(xiàn)有的很多智能緩存控制算法都可以通過(guò)機(jī)器學(xué)習(xí)，識(shí)別動(dòng)態(tài)生成對(duì)象的緩存。

前端優(yōu)化

HTTP請(qǐng)求數(shù)？

我們都知道減少HTTP請(qǐng)求可以提升網(wǎng)站的響應(yīng)能力，雖然CDN本身不能減少請(qǐng)求的數(shù)量，但是CDN可以通過(guò)預(yù)池連接（pre-pooling connection）來(lái)減少關(guān)閉和重新打開TCP連接引起的時(shí)間延遲。

緩存控制？

很多CDN都提供緩存控制選項(xiàng)，允許我們根據(jù)文件類型或者位置對(duì)單個(gè)文件甚至整個(gè)文件組設(shè)置緩存規(guī)則。CDN通過(guò)機(jī)器學(xué)習(xí)可以緩存動(dòng)態(tài)內(nèi)容，這就減輕了幾乎所有的緩存管理任務(wù)。

Gzip和Minify？

CDN在前端優(yōu)化的過(guò)程中起著關(guān)鍵性作用，經(jīng)常被用來(lái)簡(jiǎn)化很多耗時(shí)的優(yōu)化任務(wù)。例如CDN會(huì)提供自動(dòng)壓縮文件功能，避免了手動(dòng)壓縮。

圖片優(yōu)化？

CDN往往是圖片緩存的首選項(xiàng)，并且需要購(gòu)買才能使用這項(xiàng)服務(wù)。很多先進(jìn)的CDN在原來(lái)無(wú)損壓縮的概念上提出一種漸進(jìn)渲染的方法，先加載像素化版本的圖片，隨后用一系列更“清晰”的版本代替該圖片，直到實(shí)際的圖片做好了加載的準(zhǔn)備。漸進(jìn)渲染可以在不犧牲圖片質(zhì)量的條件下縮短加載時(shí)間。

總結(jié)

本文對(duì)CDN的工作原理和CDN緩存進(jìn)行了基礎(chǔ)介紹，了解CDN緩存和瀏覽器緩存將對(duì)前端工作人員的優(yōu)化之路提供很大的幫助，更多前端優(yōu)化的技術(shù)將在后續(xù)陸續(xù)為大家呈現(xiàn)。

若有理解不對(duì)的地方歡迎大家批評(píng)指正。