爲你的靜態資源使用cdn（轉載）

玩轉百度加速樂CDN,免費讓本身的網站飛起來

 

[文章做者：磨延城 轉載請註明原文出處： https://mo2g.com/view/70/ ]

前一段時間使用了百度加速樂（如下簡稱加速樂）,就寫了一篇博客《百度加速樂免費版,CDN加速使用體驗》,介紹加速樂的使用感覺,但當時沒仔細研究使用方法,就得出了比較片面的結論.當時之因此這麼認爲,緣由有如下兩點

前一段時間使用了百度加速樂（如下簡稱加速樂），就寫了一篇博客《百度加速樂免費版,CDN加速使用體驗》，介紹加速樂的使用感覺，但當時沒仔細研究使用方法，就得出了比較片面的結論。當時之因此這麼認爲，緣由有如下兩點：

在沒有使用加速樂以前

1）域名爲獨立IP，IP地址爲杭州電信

2）訪問博客的響應時間平均爲50ms，靜態資源加載得也很快

把blog.mo2g.com託管給加速樂以後

1）域名由獨立IP，變成了與2000多個域名共享IP，IP地址分別爲香港網通，與香港電信

2）訪問博客的響應時間波動很大，快則200ms，慢至直接報503 Service Unavailable錯誤

基於上邊的評測，就匆匆得出結論，免費的加速樂不穩定，只推薦使用虛擬空間的用戶使用。

後來我把注意力集中到了另外一家提供免費CDN的七牛雲儲存去了，但就在我準備根據七牛的API寫PHP程序的時候，忽然意識到，其實加速樂，能夠更簡單，更方便。值得關注的是加速樂每小時免費提供2G的流量，而七牛一個月才10G的免費流量（注：能夠經過邀請好友註冊，最高累計每個月提供40G免費流量）。

爲何，我又從新選擇了加速樂，接下來就直奔主題。

在沒使用加速樂的時候，用戶訪問blog.mo2g.com的流程以下圖。

從這張圖片流程能夠清晰的看出，爲了讓瀏覽器完整的展現博客的內容，blog.mo2g.com必須傳輸html中所包含的全部靜態資源文件（css、js、圖片）。這樣的傳輸數據量對於1M的帶寬來講，要想實現高併發，幾乎不可能，畢竟帶寬已是瓶頸了。

我指望的CDN加速功能，不須要太複雜，就是很簡單的幫我存儲靜態數據，減輕blog.mo2g.com的帶寬壓力。如圖所示：

1）當用戶訪問個人網站磨途歌的時候，我那1M帶寬的服務器只返回html數據給用戶，這些html數據大小通過壓縮通常就十幾kb，1M帶寬的響應速度足夠了。

2）當用戶的瀏覽器接收到返回的數據，開始解析html並加載當前頁面須要用到的css、js、圖片的時候，直接從加速樂CDN服務器那裏獲取。

3）若是加速樂CDN服務器尚未緩存相關資源，就從blog.mo2g.com複製並緩存一段時間，下回碰到一樣的訪問請求，就直接返回數據給瀏覽器。

若是上邊的指望可以實現，就能大大的減輕網站的帶寬壓力，讓網站更快，更穩定，響應速度更像飛了起來！沒錯，加速樂的免費版CDN，就能夠實現這一功能。

良好的網站架構，一般都有良好的數據結構，包括目錄的統1、規範。這一點，對於實現上述功能相當重要。

先說靜態資源（css、js、樣式圖片），個人網站blog.mo2g.com把這三類文件分別存儲在css、js、images文件夾中。由於這三類文件都屬於靜態資源，因此又統一移動到根目錄的static文件夾。目錄結構以下：

blog.mo2g.com/staitc/

blog.mo2g.com/staitc/css/

blog.mo2g.com/staitc/js/

blog.mo2g.com/staitc/images/

而後是寫博客時上傳的圖片資源，對於這類動態上傳的文件，我在根目錄新建一個attachments目錄，再附加一個article文件夾，用於分類存儲相關文章須要到的圖片或附件。因而目錄結果以下：

blog.mo2g.com/attachments/

blog.mo2g.com/attachments/article/

我使用的分類方式以下

blog.mo2g.com/attachments/article/文章ID散列數值/文章ID/pictures/ 

基於上述目錄結構，blog.mo2g.com在沒使用加速樂以前，返回給瀏覽器的html代碼相似於：

1 2 3 4 5 6 7 8 9 10

< html >      < head >          < title >CDN加速示例</ title >          < link  rel = "stylesheet"  href = "http://blog.mo2g.com/static/css/style.css"  />      </ head >      < body >          < img  src = "http://blog.mo2g.com/attachments/article/1/1/pictures/cdn.jpg " >          < script  src = "http://blog.mo2g.com/static/js/hello.js" ></ script >      </ body > </ html >

使用加速樂以後，html代碼以下：

1 2 3 4 5 6 7 8 9 10

< html >      < head >          < title >CDN加速示例</ title >          < link  rel = "stylesheet"  href = "http://static.mo2g.com/static/css/style.css"  />      </ head >      < body >          < img  src = "http://img.mo2g.com/attachments/article/1/1/pictures/cdn.jpg " >          < script  src = "http://static.mo2g.com/static/js/hello.js" ></ script >      </ body > </ html >

代碼之間的區別在於：

1）把static類型的資源連接域名，由blog.mo2g.com改爲了static.mo2g.com

2）把動態上傳的圖片連接域名，由blog.mo2g.com改爲了img.mo2g.com

說到這裏，你們應該能想到要怎麼結合加速樂提供的CDN的加速功能了吧。是的，接下來咱們只要把static.mo2g.com，img.mo2g.com這兩個域名託管到加速樂的CDN服務器上，就能實現網站加速。至於怎麼託管到加速樂上邊，能夠直接訪問百度加速樂的官方網站，裏邊有較爲詳細的教程。

http://blog.mo2g.com/view/70/加速後的效果以下

最後，更正一下上一篇文章的結論：免費的加速樂CDN服務是虛擬空間的神器。對於帶寬富裕的朋友，在合理使用方式下，加速樂的提供的免費服務，依然頗有效果。在最後，分享一下本人的思路：

1）添加更多的子域名：

    static0.domain.com，static1.domain.com，static2.domain.com ...

    img0.domain.com，img1.domain.com，img2.domain.com ...

2）申請多個加速樂的賬號，把新增的域名均勻的託管到各個賬號裏

3）PHP程序在生成html代碼的時候作一下處理，把資源連接地址隨機散列到上邊添加的域名中

4）重複1）2）3）