相信互聯(lián)網(wǎng)已經(jīng)越來越成為人們生活中不可或缺的一部分,。ajax,，flex等等富客戶端的應(yīng)用使得人們越 加“幸福”地體驗(yàn)著許多原先只能在C/S實(shí) 現(xiàn)的功能。比如Google機(jī)會已經(jīng)把最基本的office應(yīng)用都搬到了互聯(lián)網(wǎng)上,。當(dāng)然便利的同時毫無疑問的也使頁面的速度越來越慢,。自己是做前端開發(fā) 的,，在性能方面，根據(jù)yahoo的調(diào)查,，后臺只占5%,，而前端高達(dá)95%之多，其中有88%的東西是可以優(yōu)化的,。

以上是一張web2.0頁面的生命周期圖,。工程師很形象地講它分成了“懷孕，出生,，畢業(yè),，結(jié)婚”四個階段。如果在我們點(diǎn)擊網(wǎng)頁鏈接的時候能夠意識到 這個過程而不是簡單的請求-響應(yīng)的話,，我們便可以挖掘出很多細(xì)節(jié)上可以提升性能的東西,。今天聽了淘寶小馬哥的一個對yahoo開發(fā)團(tuán)隊(duì)對web性能研究的 一個講座，感覺收獲很大,，想在blog上做個分享,。
相信很多人都聽過優(yōu)化網(wǎng)站性能的14條規(guī)則。更多的信息可見developer.yahoo.com
1. 盡可能的減少 HTTP 的請求數(shù) [content]
2. 使用 CDN（Content Delivery Network） [server]
3. 添加 Expires 頭(或者 Cache-control ) [server]
4. Gzip 組件 [server]
5. 將 CSS 樣式放在頁面的上方 [css]
6. 將腳本移動到底部（包括內(nèi)聯(lián)的） [javascript]
7. 避免使用 CSS 中的 Expressions [css]
8. 將 JavaScript 和 CSS 獨(dú)立成外部文件 [javascript] [css]
9. 減少 DNS 查詢 [content]
10. 壓縮 JavaScript 和 CSS (包括內(nèi)聯(lián)的) [javascript] [css]
11. 避免重定向 [server]
12. 移除重復(fù)的腳本 [javascript]
13. 配置實(shí)體標(biāo)簽（ETags） [css]
14. 使 AJAX 緩存  
在firefox下有一個插件yslow,，集成在firebug中,，你可以用它很方便地來看看自己的網(wǎng)站在這幾個方面的表現(xiàn)。

這是對用yslow對我的網(wǎng)站西風(fēng)坊測評的結(jié)果,，很遺憾,，只有51分。呵呵,。中國各大網(wǎng)站的分值都不高,，剛測了一下，新浪和網(wǎng)易都是31分,。然后 yahoo(美國)的分值確實(shí)97分!可見yahoo在這方面作出的努力,。從他們總結(jié)的這14條規(guī)則，已經(jīng)現(xiàn)在又新增加的20個點(diǎn)來看,，有很多細(xì)節(jié)我們真 得是怎么都不會去想，有些做法甚至是有些“變態(tài)”了,。
第一條、盡可能的減少 HTTP 的請求數(shù) (Make Fewer HTTP Requests )
http請求是要開銷的,，想辦法減少請求數(shù)自然可以提高網(wǎng)頁速度,。常用的方法，合并css,，js(將一個頁面中的css和js文件分別合并)以及 Image maps和css sprites等,。當(dāng)然或許將css，js文件拆分多個是因?yàn)閏ss結(jié)構(gòu),，共用等方面的考慮,。阿里巴巴中文站當(dāng)時的做法是開發(fā)時依然分開開發(fā)，然后在后臺 對js,，css進(jìn)行合并,，這樣對于瀏覽器來說依然是一個請求，但是開發(fā)時仍然能還原成多個,，方便管理和重復(fù)引用,。yahoo甚至建議將首頁的css和js 直接寫在頁面文件里面，而不是外部引用,。因?yàn)槭醉摰脑L問量太大了,，這么做也可以減少兩個請求數(shù)。而事實(shí)上國內(nèi)的很多門戶都是這么做的,。
而css sprites是指只用將頁面上的背景圖合并成一張,，然后通過css的background-position屬性定義不過的值來取他的背景。淘寶和阿里巴巴中文站目前都是這樣做的,。有興趣的可以看下淘寶和阿里巴巴的背景圖,。
http://www./ 這是個工具網(wǎng)站，它可以自動將你上傳的圖片合并并給出對應(yīng)的background-position坐標(biāo),。并將結(jié)果以png和gif的格式輸出,。
第二條、使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò)): Use a Content Delivery Network
說實(shí)話,，對于CDN這一塊自己并不是很了解,，簡單地講，通過在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu),，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的 cache服務(wù)器內(nèi),，通過DNS負(fù)載均衡的技術(shù)， 判斷用戶來源就近訪問cache服務(wù)器取得所需的內(nèi)容,，杭州的用戶訪問近杭州服務(wù)器上的內(nèi)容，北京的訪問 近北京服務(wù)器上的內(nèi)容,。這樣可以有效減少數(shù)據(jù)在網(wǎng)絡(luò)上傳輸?shù)臅r間，提高速度,。更詳細(xì)地內(nèi)容大家可以參考百度百科上對于CDN的解釋。Yahoo!把靜態(tài)內(nèi) 容分布到CDN減少了用戶影響時間20%或更多。
CDN技術(shù)示意圖：

CDN組網(wǎng)示意圖：

第三條,、 添加Expire/Cache-Control 頭：Add an Expires Header
現(xiàn)在越來越多的圖片,，腳本,，css，flash被嵌入到頁面中,，當(dāng)我們訪問他們的時候勢必會做許多次的http請求,。其實(shí)我們可以通過設(shè)置Expires header 來緩存這些文件。Expire其實(shí)就是通過header報文來指定特定類型的文件在覽器中的緩存時間,。大多數(shù)的圖片,，flash在發(fā)布后都是不需要經(jīng)常修 改的，做了緩存以后這樣瀏覽器以后就不需要再從服務(wù)器下載這些文件而是而直接從緩存中讀取,，這樣再次訪問頁面的速度會大大加快,。一個典型的HTTP 1.1協(xié)議返回的頭信息：
HTTP/1.1 200 OK
Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: “3e86-410-3596fbbc”
Content-Length: 1040
Content-Type: text/html
其中通過服務(wù)器端腳本設(shè)置Cache-Control和Expires可以完成。
如,，在php中設(shè)置30天后過期：

以下為引用的內(nèi)容： <!--pHeader("Cache-Control: must-revalidate"); $offset = 60 * 60 * 24 * 30; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);-->

也可以通過配置服務(wù)器本身完成,，這些偶就不是很清楚了，呵呵,。想了解跟多的朋友可以參考http://www./
據(jù)我了解,，目前阿里巴巴中文站的Expires過期時間是30天。不過期間也有過問題,，特別是對于腳本過期時間的設(shè)置還是應(yīng)該仔細(xì)考慮下,，不然相應(yīng)的腳本 功能更新后客戶端可能要過很長一段時間才能“感知”到這樣的變化。以前做[suggest項(xiàng)目] 的時候就遇到過這個問題,。所以,，哪些應(yīng)該緩存，哪些不該緩存還是應(yīng)該仔細(xì)斟酌一番,。
第四條,、啟用Gzip壓縮：Gzip Components
Gzip的思想就是把文件先在服務(wù)器端進(jìn)行壓縮，然后再傳輸,。這樣可以顯著減少文件傳輸?shù)拇笮?。傳輸完畢后瀏覽器會 重新對壓縮過的內(nèi)容進(jìn)行解壓縮，并執(zhí)行,。目前的瀏覽器都能“良好”地支持 gzip,。不僅瀏覽器可以識別，而且各大“爬蟲”也同樣可以識別,，各位seoer可以放下心了,。而且gzip的壓縮比例非常大，一般壓縮率為85%，就是 說服務(wù)器端100K的頁面可以壓縮到25K左右再發(fā)送到客戶端,。具體的Gzip壓縮原理大家可以參考csdn上的《gzip壓縮算法》 這篇文章,。雅虎特別強(qiáng)調(diào)， 所有的文本內(nèi)容都應(yīng)該被gzip壓縮: html (php), js, css, xml, txt… 這一點(diǎn)我們網(wǎng)站做得不錯,，是一個A,。以前我們的首頁也并不是A，因?yàn)槭醉撋线€有很多廣告代碼投放的js,，這些廣告代碼擁有者的網(wǎng)站的js沒有經(jīng)過gzip 壓縮,，也會拖累我們網(wǎng)站。
以上三點(diǎn)大多屬于服務(wù)器端的內(nèi)容,，本人也是粗淺地了解而已,。說得不對的地方有待各位指正。
第五條,、將css放在頁面最上面 ( Put Stylesheets at the Top)
將css放在頁面最上面,，這是為什么?因?yàn)? ie，firefox等瀏覽器在css全部傳輸完全之前不會去渲染任何的東西,。理由誠如小馬哥說得那樣很簡單,。css，全稱Cascading Style Sheets (層疊樣式表單),。層疊即意味這后面的css可以覆蓋前面的css,，級別高的css可以覆蓋級別低的css。在[css之!important] 這篇文章的最下面曾簡單地提到過這層級關(guān)系,，這里我們只需要知道css可以被覆蓋的,。既然前面的可以被覆蓋，瀏覽器在他完全加載完畢之后再去渲染無疑也是 合情合理的很多瀏覽器下,，如IE,，把樣式表放在頁面的底部的問題在于它禁止了網(wǎng)頁內(nèi)容的順序顯示。瀏覽器阻止顯示以免重畫頁面元素,，那用戶只能看到空白頁 了,。Firefox不會阻止顯示，但這意味著當(dāng)樣式表下載后,，有些頁面元素可能需要重畫,，這導(dǎo)致閃爍問題。所以我們應(yīng)該盡快讓css加載完畢
順著這層意思,，如果我們再細(xì)究的話,，其實(shí)還有可以優(yōu)化的地方。比如本站上面包含的兩個css文件,，<link rel=“stylesheet” rev=“stylesheet” href=“http://www./themes/google/style/google.css” type=“text/css” media=“screen” /> 和<link rel=“stylesheet” rev=“stylesheet” href=“http://www./css/print.css” type=“text/css” media=“print” />,。   從media就可以看出第一個css是針對瀏覽器的,，第二個css文件是針對打印樣式的。從用戶的行為習(xí)慣上來將,，要打印頁面的動作一定是發(fā)生在頁面頁面 顯示出來之后的。所以比較好的方法應(yīng)該是在頁面加載完畢之后再動態(tài)地為這張頁面加上針對打印設(shè)備的css,，這樣又可以提高一點(diǎn)速度,。(哈哈)
第六條、將script放在頁面最下面 (Put Scripts at the Bottom )
將腳本放在頁面最下面的目的有那么兩點(diǎn)： 1,、 因?yàn)榉乐箂cript腳本的執(zhí)行阻塞頁面的下載,。在頁面loading的過程中，當(dāng)瀏覽器讀到j(luò)s執(zhí)行語句的時候一定會把它全部解釋完畢后在會接下來讀下 面的內(nèi)容,。不信你可以寫一個js死循環(huán)看看頁面下面的東西還會不會出來,。(setTimeout 和 setInterval的執(zhí)行有點(diǎn)類似于多線程，在相應(yīng)的響應(yīng)時間之前也會繼續(xù)下面的內(nèi)容渲染,。)瀏覽器這么做的邏輯是因?yàn)閖s隨時可能執(zhí) 行 location.href或是其他可能完全中斷此頁面過程的函數(shù),，即如此，當(dāng)然得等他執(zhí)行完畢之后再加載咯,。所以放在頁面最后,，可以有效減少頁面可 視元素的加載時間。 2,、腳本引起的第二個問題是它阻塞并行下載數(shù)量,。HTTP/1.1規(guī)范建議瀏覽器每個主機(jī)的并行下載數(shù)不超過2個(IE只能為2個，其他瀏覽器如ff等都 是默認(rèn)設(shè)置為2個,，不過新出的ie8可以達(dá)6個),。因此如果您把圖像文件分布到多臺機(jī)器的話，您可以達(dá)到超過2個的并行下載,。但是當(dāng)腳本文件下載時,，瀏覽 器不會啟動其他的并行下載。
當(dāng)然對各個網(wǎng)站來說,，把腳本都放到頁面底部加載的可行性還是值得商榷的,。就比如阿里巴巴中文站的頁面。很多地方有內(nèi)聯(lián)的js,，頁面的顯示嚴(yán)重依賴于此,，我承認(rèn)這和無侵入腳本的理念相差甚遠(yuǎn)，但是很多“歷史遺留問題”卻不是那么容易解決的,。
第七條,、避免在CSS中使用Expressions (Avoid CSS Expressions )
不過這樣就多了兩層無意義的嵌套，肯定不好,。還需要一個更好的辦法,。
第八條,、把javascript和css都放到外部文件中 (Make JavaScript and CSS External )
這點(diǎn)我想還是很容易理解的。不僅從性能優(yōu)化上會這么做,，用代碼易于維護(hù)的角度看也應(yīng)該這么做,。把css和js寫在頁面內(nèi)容可以減少2次請求，但也增 大了頁面的大小,。如果已經(jīng)對css和js做了緩存,，那也就沒有2次多余的http請求了。當(dāng)然,，我在前面中也說過,，有些特殊的頁面開發(fā)人員還是會選擇內(nèi)聯(lián) 的css和js文件。
第九條,、減少DNS查詢 (Reduce DNS Lookups)
在 Internet上域名與IP地址之間是一一對應(yīng)的,，域名()很好記，但計算機(jī)不認(rèn)識,，計算機(jī)之間的“相認(rèn)”還要轉(zhuǎn)成ip地址,。在網(wǎng)絡(luò) 上每臺計算機(jī)都對應(yīng)有一個獨(dú)立的ip地址。在域名和ip地址之間的轉(zhuǎn)換工作稱為域名解析,，也稱DNS查詢,。一次DNS的解析過程會消耗20-120毫秒的 時間,在dns查詢結(jié)束之前，瀏覽器不會下載該域名下的任何東西,。所以減少dns查詢的時間可以加快頁面的加載速度,。yahoo的建議一個頁面所包含的域 名數(shù)盡量控制在2-4個。這就需要對頁面整體有一個很好的規(guī)劃,。目前我們這點(diǎn)做的不好,，很多打點(diǎn)的廣告投放系統(tǒng)拖累了我們。
第十條,、壓縮 JavaScript 和 CSS (Minify JavaScript )
壓縮js和css的左右很顯然,，減少頁面字節(jié)數(shù)。容量小頁面加載速度自然也就快,。而且壓縮除了減少體積以外還可以起到一定的保護(hù)左右,。這點(diǎn)我們做得不錯。常用的壓縮工具有JsMin,、YUI compressor等,。另外像http://dean./packer/還給我們提供了一個非常方便的在線壓縮工具。你可以在jQuery的網(wǎng)頁看到壓縮過的js文件和沒有壓縮過的js文件的容量差別：

當(dāng)然,，壓縮帶來的一個弊端就是代碼的可讀性沒了,。相信很多做前端的朋友都遇到過這個問題：看Google的效果很酷，可是去看他的源代碼卻是一大堆 擠在一起的字符,，連函數(shù)名都是替換過的,，汗死!自己的代碼也這樣豈不是對維護(hù)非常不方便,。所有阿里巴巴中文站目前采用的做法是在js和css發(fā)布的時候在 服務(wù)器端進(jìn)行壓縮。這樣在我們很方便地維護(hù)自己的代碼,。
第十一條,、避免重定向 (Avoid Redirects )
不久前在ieblog上看到過《Internet Explorer and Connection Limits》這篇文章，比如 當(dāng)你輸入http://www./ 的時候服務(wù)器會自動產(chǎn)生一個301服務(wù)器轉(zhuǎn)向 http://www./ ,，你看瀏覽器的地址欄就能看出來,。這種重定向自然也是需要消耗時間的。當(dāng)然這只是一個例子,，發(fā)生重定向的原因還有很多，但是不變的是每增加一次重定向就會增加一次web請求,，所以因該盡量減少,。
第十二條、移除重復(fù)的腳本 (Remove Duplicate Scripts )
這點(diǎn)我想不說也知道,，不僅是從性能上考慮,，代碼規(guī)范上看也是這樣。但是不得不承認(rèn),，很多時候我們會因?yàn)閳D一時之快而加上一些或許是重復(fù)的代碼,。或許一個統(tǒng)一的css框架和js框架可以比較好的解決我們的問題,。小豬的觀點(diǎn)很對,，不僅是要做到不重復(fù)，更是要做到可重用,。
第十三條,、配置實(shí)體標(biāo)簽(ETags) (Configure ETags )
這點(diǎn)我也不懂，呵呵,。在inforQ上找到一篇解釋得比較詳細(xì)的說明《使用ETags減少Web應(yīng)用帶寬和負(fù)載》,，有興趣的同學(xué)可以去看看。
第十四條,、使 AJAX 緩存 (Make Ajax Cacheable )
ajax還要去緩存?做ajax請求的時候往往還要增加一個時間戳去避免他緩存,。It’s important to remember that “asynchronous” does not imply “instantaneous”.(記住“異步”不是“瞬間”這一點(diǎn)很重要)。記住,，即使AJAX是動態(tài)產(chǎn)生的而且只對一個用戶起作用,，他們依然可以被緩 存。