如何優化網站性能和提高網站訪問速度？有那些技巧呢....

 

 

相信互聯網已經越來越成為人們生活中不可或缺的一部分。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屬性定義不過的值來取他的背景。淘寶和阿里巴巴中文站目前都是這樣做的。有興趣的可以看下淘寶和阿里巴巴的背景圖。

第二條、使用CDN(內容分發網絡): Use a Content Delivery Network

說實話，對于CDN這一塊自己并不是很了解，簡單地講，通過在現有的Internet中增加一層新的網絡架構，將網站的內容發布到最接近用戶的 cache服務器內，通過DNS負載均衡的技術，判斷用戶來源就近訪問cache服務器取得所需的內容，杭州的用戶訪問近杭州服務器上的內容，北京的訪問 近北京服務器上的內容。這樣可以有效減少數據在網絡上傳輸的時間，提高速度。更詳細地內容大家可以參考百度百科上對于CDN的解釋。Yahoo!把靜態內容分布到CDN減少了用戶影響時間20%或更多。CDN技術示意圖：

CDN組網示意圖：

第三條、 添加Expire/Cache-Control 頭：Add an Expires Header

現在越來越多的圖片，腳本，css，flash被嵌入到頁面中，當我們訪問他們的時候勢必會做許多次的http請求。其實我們可以通過設置Expires header 來緩存這些文件。Expire其實就是通過header報文來指定特定類型的文件在覽器中的緩存時間。大多數的圖片，flash在發布后都是不需要經常修 改的，做了緩存以后這樣瀏覽器以后就不需要再從服務器下載這些文件而是而直接從緩存中讀取，這樣再次訪問頁面的速度會大大加快。一個典型的HTTP 1.1協議返回的頭信息：

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

其中通過服務器端腳本設置Cache-Control和Expires可以完成。

如，在php中設置30天后過期：

以下為引用的內容：

<!--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);-->

也可以通過配置服務器本身完成，這些偶就不是很清楚了，