相信互聯網已經越來越成為人們生活中不可或缺的一部分。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 直接寫在頁面文件里面,而不是外部引用。因為首頁的訪問量太大了,這么做也可以減少兩個請求數。而事實上國內的很多門戶都是這么做的。
新聞熱點
疑難解答
圖片精選