優化網站設計（二）：使用CDN

前言

網站設計的優化是一個很大的話題,有一些通用的原則,也有針對不一樣開發平臺的一些建議。這方面的研究一直沒有中止過，我在不一樣的場合也分享過這樣的話題。

做爲通用的原則，雅虎的工程師團隊曾經給出過35個最佳實踐。這個列表請參考

Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html

同時，他們還發布了一個相應的測試工具Yslow http://developer.yahoo.com/yslow/

我強烈推薦全部的網站開發人員都應該學習這些最佳實踐，並結合本身的實際項目狀況進行應用。

接下來的一段時間，我將結合ASP.NET這個開發平臺，針對這些原則，經過一個系列文章的形式，作些講解和演繹，以幫助你們更好地理解這些原則，而且更好地使用他們。

準備工做

爲了跟隨我進行後續的學習，你須要準備以下的開發環境和工具

1. Google Chrome 或者firefox ，而且安裝 Yslow這個擴展組件.請注意，這個組件是雅虎提供的，但目前沒有針對IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你應該對這些瀏覽器的開發人員工具備所瞭解，你能夠經過按下F12鍵調出這個工具。
2. Visaul Studio 2010 SP1 或更高版本，推薦使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你須要對ASP.NET的開發基本流程和核心技術有至關的瞭解，本系列文章很難對基礎知識作普及。

本文要談討論的話題

這篇文章，我未來和你們探討CDN的問題，這是第二條原則，相關概念能夠參考這裏 http://developer.yahoo.com/performance/rules.html#cdn

我將從幾個方面來介紹這個話題：

1.什麼是CDN?

CDN的全稱是Content Delivery Network，中文直譯過來是：內容交付網絡。它的主要意思是，將某些內容進行交付的網絡。對於網站開發而言，咱們所講的內容一般指的是內容文件（例如javascript，css，圖片等等），也就是說，這裏所說的CDN的意思是指，創建（或者使用）一個更加有利於交付這些內容交付的網絡。

2.爲何須要CDN?

咱們必須認可，在很早的時候，是沒有CDN的概念和需求的。那時候咱們網站所須要的javascript等文件，就是放在咱們的網站目錄中，其實這也是一種內容交付的方式，並且每每仍是比較高效的。但直到有一天，咱們作了各類各樣的網站，咱們就會發現另一個問題：就是針對同一個javascript文件，瀏覽器可能會緩存多個版本，例以下面這個截圖所示

之因此會這樣作，是由於瀏覽器是根據域(Domain)來緩存內容資源的，只要域不同，那麼它就須要重複下載這些資源，並且使用一樣的方式將它們緩存起來。

可是，這會帶來一些小的問題：重複地下載，緩存這些一樣的腳本文件是須要佔用帶寬和本地緩存文件空間的。

因而，人們想出來一個解決方法：既然瀏覽器是根據域來區分這些內容資源的，那麼是否能夠將這些內容都放在統一的一個域裏面呢？這樣就算是咱們有不少網站，咱們均可以使用一樣的地址引用這些內容資源，那麼就不會產生重複下載和緩存的問題了。

 

3.如何使用CDN

不少問題，關鍵在於想到了，只要想到了，接下去怎麼作其實不難。就比如咱們如今討論的這個CDN的問題。

咱們能夠繼續以博客園的主頁爲例來進行分析

發展到今天，咱們知道博客園是有不少站點的，例如www.cnblogs.com, news.cnblogs.com , q.cnblogs.com 等等。他們應該或多或少都會用到jquery這個通用庫。那麼博客園是怎麼作到底呢？

從上圖中我發現，他們作了一個所謂的公用的子站點：common.cnblogs.com ，裏面存放了他們使用的jquery最終的版本。

實際上這就是一個最直接也是最簡單的使用CDN的作法：若是你有不少站點，他們之間能夠共享某些內容（例如javascript，css，image等），那麼與其每一個站點放一份，就不如將他們統一地存在在一個地方，這樣就能夠減小下載的次數和緩存的體積了。

這樣作還有一個好處就是：因爲主流瀏覽器對於同一個域所容許保持的鏈接數都是有限制的（可參考 http://www.impng.com/web-dev/browser-max-parallel-connections.html 的介紹），HTTP 1.1協議甚至明確地建議將這個鏈接數限制爲2（Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion）。那麼，咱們採用CDN的作法來將某些內容放在不一樣的域裏面，從必定意義上能夠增長下載的並行度。關於這個原則，也能夠參考 http://developer.yahoo.com/performance/rules.html#split 

 

除了上述的作法（本身單獨建一個站點來保存這些內容資源），若是你是作一個互聯網應用，那麼還能夠享受到一些業界知名的廠商所提供的CDN服務，他們將不少最經常使用的javascript庫，放在了統一的位置（一般他們的服務器是很快的），能夠供全世界的網站開發人員無償使用，這樣作的好處是擴大了共享的範圍，例如若是你要訪問cnblogs.com ，它使用jquery的庫，也許你在訪問microsoft.com的時候就下載過了，因此連第一次都無需下載。

這些提供CDN服務的廠商有：

微軟的CDN服務

http://www.asp.net/ajaxlibrary/cdn.ashx

Google的CDN服務

https://developers.google.com/speed/libraries/devguide

選擇誰的服務，徹底取決你本身的喜愛。事實上，他們的用法也很接近，例如

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js" type="text/javascript"></script>

 

另外，我在上一篇文章中提到了爲了減小請求數，咱們能夠採用Bundle的形式將多個文件進行打包合併，若是遇到咱們但願對某個文件使用CDN的狀況，應該如何改進呢？請參考下面的代碼

            config.UseCdn = true;
            config.Add(new ScriptBundle("~/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js").Include("~/scripts/jquery-2.0.0.min.js"));

須要注意的是，只有當web.config文件中，將compilation的debug設置爲false,纔會使用CDN, 不然將使用本地的文件。這也是爲何咱們須要定義兩個路徑的緣由。

<compilation debug="false" targetFramework="4.5"/>

 

看起來不錯，不是嗎？可是CDN的使用，也有一些額外須要考慮到負面做用。

 

4.使用CDN的負面做用

使用CDN，尤爲是使用第三方的CDN，須要考慮網絡的可到達性。這些內容既然是Host在別人的服務器上面，那麼從必定意義上說，並不是很可控。例如，由於衆所周知的緣由，我上面沒有使用Google提供的CDN地址。

另外，使用CDN由於會涉及到多個域，那麼將違背下面兩條原則：

Minimize HTTP Requests （這個我在上一篇文章詳細介紹過）

http://developer.yahoo.com/performance/rules.html#num_http 

Reduce DNS Lookups （後續再介紹）

http://developer.yahoo.com/performance/rules.html#dns_lookups

 

很驚奇嗎？爲何這些原則（同時也號稱爲最佳實踐）會自相矛盾呢？其實一點都不奇怪，世界原本就是辯證統一的。這些矛盾是客觀存在的，咱們要作的是，綜合他們的利弊，進行權衡。你說呢