優化網站設計之使用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文件,瀏覽器可能會緩存多個版本,例如下面這個截圖所示

image

之所以會這樣做,是因爲瀏覽器是根據域(Domain)來緩存內容資源的,只要域不一樣,那麼它就需要重複下載這些資源,而且使用同樣的方式將它們緩存起來。

但是,這會帶來一些小的問題:重複地下載,緩存這些同樣的腳本文件是需要佔用帶寬和本地緩存文件空間的

於是,人們想出來一個解決方法:既然瀏覽器是根據域來區分這些內容資源的,那麼是否可以將這些內容都放在統一的一個域裏面呢?這樣就算是我們有很多網站,我們都可以使用同樣的地址引用這些內容資源,那麼就不會產生重複下載和緩存的問題了。

 

3.如何使用CDN

很多問題,關鍵在於想到了,只要想到了,接下去怎麼做其實不難。就好比我們現在討論的這個CDN的問題。

我們可以繼續以博客園的主頁爲例來進行分析

image

發展到今天,我們知道博客園是有很多站點的,例如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

image

Google的CDN服務

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

image

選擇誰的服務,完全取決你自己的喜好。事實上,他們的用法也很接近,例如

<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

 

很驚奇嗎?爲什麼這些原則(同時也號稱爲最佳實踐)會自相矛盾呢?其實一點都不奇怪,世界本來就是辯證統一的。這些矛盾是客觀存在的,我們要做的是,綜合他們的利弊,進行權衡。你說呢


原文地址:http://www.cnblogs.com/chenxizhang/archive/2013/04/30/3051686.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章