如何優(yōu)化網(wǎng)站性能和提高網(wǎng)站訪問速度？有那些技巧呢....

 

 

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

以上是一張web2.0頁面的生命周期圖。工程師很形象地講它分成了“懷孕，出生，畢業(yè)，結(jié)婚”四個(gè)階段。如果在我們點(diǎn)擊網(wǎng)頁鏈接的時(shí)候能夠意識(shí)到 這個(gè)過程而不是簡單的請求-響應(yīng)的話，我們便可以挖掘出很多細(xì)節(jié)上可以提升性能的東西。今天聽了淘寶小馬哥的一個(gè)對yahoo開發(fā)團(tuán)隊(duì)對web性能研究的 一個(gè)講座，感覺收獲很大，想在blog上做個(gè)分享。

相信很多人都聽過優(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. 將腳本移動(dòng)到底部（包括內(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下有一個(gè)插件yslow，集成在firebug中，你可以用它很方便地來看看自己的網(wǎng)站在這幾個(gè)方面的表現(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個(gè)點(diǎn)來看，有很多細(xì)節(jié)我們真得是怎么都不會(huì)去想，有些做法甚至是有些“變態(tài)”了。

第一條、盡可能的減少 HTTP 的請求數(shù) (Make Fewer HTTP Requests )

http請求是要開銷的，想辦法減少請求數(shù)自然可以提高網(wǎng)頁速度。常用的方法，合并css，js(將一個(gè)頁面中的css和js文件分別合并)以及 Image maps和css sprites等。當(dāng)然或許將css，js文件拆分多個(gè)是因?yàn)閏ss結(jié)構(gòu)，共用等方面的考慮。阿里巴巴中文站當(dāng)時(shí)的做法是開發(fā)時(shí)依然分開開發(fā)，然后在后臺(tái) 對js，css進(jìn)行合并，這樣對于瀏覽器來說依然是一個(gè)請求，但是開發(fā)時(shí)仍然能還原成多個(gè)，方便管理和重復(fù)引用。yahoo甚至建議將首頁的css和js 直接寫在頁面文件里面，而不是外部引用。因?yàn)槭醉摰脑L問量太大了，這么做也可以減少兩個(gè)請求數(shù)。而事實(shí)上國內(nèi)的很多門戶都是這么做的。而css sprites是指只用將頁面上的背景圖合并成一張，然后通過css的background-position屬性定義不過的值來取他的背景。淘寶和阿里巴巴中文站目前都是這樣做的。有興趣的可以看下淘寶和阿里巴巴的背景圖。

第二條、使用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(shí)間，提高速度。更詳細(xì)地內(nèi)容大家可以參考百度百科上對于CDN的解釋。Yahoo!把靜態(tài)內(nèi)容分布到CDN減少了用戶影響時(shí)間20%或更多。CDN技術(shù)示意圖：

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

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

現(xiàn)在越來越多的圖片，腳本，css，flash被嵌入到頁面中，當(dāng)我們訪問他們的時(shí)候勢必會(huì)做許多次的http請求。其實(shí)我們可以通過設(shè)置Expires header 來緩存這些文件。Expire其實(shí)就是通過header報(bào)文來指定特定類型的文件在覽器中的緩存時(shí)間。大多數(shù)的圖片，flash在發(fā)布后都是不需要經(jīng)常修 改的，做了緩存以后這樣瀏覽器以后就不需要再從服務(wù)器下載這些文件而是而直接從緩存中讀取，這樣再次訪問頁面的速度會(huì)大大加快。一個(gè)典型的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ù)器本身完成，這些偶就不是很清楚了，