幫客之家(www.Bkjia.com)教程 相信互聯網已經越來越成為人們生活中不可或缺的一部分。ajax，flex等等富客戶端的應用使得人們越加“幸福”地體驗著許多原先只能在C/S實現的功能。比如Google機會已經把最基本的office應用都搬到了互聯網上。當然便利的同時毫無疑問的也使頁面的速度越來越慢。自己是做前端開發的，在性能方面，根據yahoo的調查，後台只占5%，而前端高達95%之多，其中有88%的東西是可以優化的。
以上是一張web2.0頁面的生命周期圖。工程師很形象地講它分成了“懷孕，出生，畢業，結婚”四個階段。如果在我們點擊網頁鏈接的時候能夠意識到 這個過程而不是簡單的請求-響應的話，我們便可以挖掘出很多細節上可以提升性能的東西。今天聽了淘寶小馬哥的一個對yahoo開發團隊對web性能研究的 一個講座，感覺收獲很大，想在blog上做個分享。
相信很多人都聽過優化網站性能的14條規則。更多的信息可見developer.yahoo.com
1. 盡可能的減少 HTTP 的請求數
[content]
2. 使用 CDN（Content Delivery Network）
[server]
3. 添加 Expires 頭(或者 Cache-control )
[server]
4. Gzip 組件
[server]
5. 將 CSS 樣式放在頁面的上方
[css]
6. 將腳本移動到底部（包括內聯的）
[javascript]
7. 避免使用 CSS 中的 Expressions
[css]
8. 將 JavaScript 和 CSS 獨立成外部文件
[javascript] [css]
9. 減少 DNS 查詢
[content]
10. 壓縮 JavaScript 和 CSS (包括內聯的)
[javascript] [css]
11. 避免重定向
[server]
12. 移除重復的腳本
[javascript]
13. 配置實體標簽（ETags）
[css]
14. 使 AJAX 緩存
在firefox下有一個插件yslow，集成在firebug中，你可以用它很方便地來看看自己的網站在這幾個方面的表現。
這是對用yslow對我的網站西風坊測評的結果，很遺憾，只有51分。呵呵。中國各大網站的分值都不高，剛測了一下，新浪和網易都是31分。然後yahoo（美國）的分值確實97分！可見yahoo在這方面作出的努力。從他們總結的這14條規則，已經現在又新增加的20個點來看，有很多細節我們真得是怎麼都不會去想，有些做法甚至是有些“變態”了。
第一條、盡可能的減少 HTTP 的請求數 （Make Fewer HTTP Requests ）
http請求是要開銷的，想辦法減少請求數自然可以提高網頁速度。常用的方法，合並css，js（將一個頁面中的css和js文件分別合並）以及 Image maps和css sprites等。當然或許將css，js文件拆分多個是因為css結構，共用等方面的考慮。阿裡巴巴中文站當時的做法是開發時依然分開開發，然後在後台對js，css進行合並，這樣對於浏覽器來說依然是一個請求，但是開發時仍然能還原成多個，方便管理和重復引用。yahoo甚至建議將首頁的css和js 直接寫在頁面文件裡面，而不是外部引用。因為首頁的訪問量太大了，這麼做也可以減少兩個請求數。而事實上國內的很多門戶都是這麼做的。
而css sprites是指只用將頁面上的背景圖合並成一張，然後通過css的background-position屬性定義不過的值來取他的背景。淘寶和阿裡巴巴中文站目前都是這樣做的。有興趣的可以看下淘寶和阿裡巴巴的背景圖。
http://www.csssprites.com/ 這是個工具網站，它可以自動將你上傳的圖片合並並給出對應的background-position坐標。並將結果以png和gif的格式輸出。
第二條、使用CDN（內容分發網絡）: Use a Content Delivery Network
說實話，對於CDN這一塊自己並不是很了解，簡單地講，通過在現有的Internet中增加一層新的網絡架構，將網站的內容發布到最接近用戶的 cache服務器內，通過DNS負載均衡的技術，判斷用戶來源就近訪問cache服務器取得所需的內容，杭州的用戶訪問近杭州服務器上的內容，北京的訪問 近北京服務器上的內容。這樣可以有效減少數據在網絡上傳輸的時間，提高速度。更詳細地內容大家可以參考百度百科上對於CDN的解釋。Yahoo!把靜態內容分布到CDN減少了用戶影響時間20%或更多。
