使用YSlow 分析網(wǎng)頁(yè)的效率網(wǎng)站最基本的東西是什么？網(wǎng)站最基本的東西是什么？——內(nèi)容？SEO （搜索引擎優(yōu)化）？UE （用戶體驗(yàn)）？都不對(duì)！是速度！內(nèi)容再豐富的網(wǎng)站，如果慢到無(wú)法訪問(wèn)也是毫無(wú)意義的；

使用YSlow 分析網(wǎng)頁(yè)的效率

網(wǎng)站最基本的東西是什么？

網(wǎng)站最基本的東西是什么？

——內(nèi)容？SEO （搜索引擎優(yōu)化）？UE （用戶體驗(yàn)）？都不對(duì)！是速度！

內(nèi)容再豐富的網(wǎng)站，如果慢到無(wú)法訪問(wèn)也是毫無(wú)意義的； SEO 做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭； UE 設(shè)計(jì)的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談。

所以網(wǎng)頁(yè)的效率絕對(duì)是最值得關(guān)注的方面。如何才能提高一個(gè)網(wǎng)頁(yè)的效率呢？Steve Souders(Steve Souders的資料http://www.oreillynet.com/pub/au/2951) 提出的提高網(wǎng)頁(yè)效率的14條準(zhǔn)則，而這些準(zhǔn)則也將是為了介紹的YSlow 工具的理論基礎(chǔ)：

?

?

?

?

?

?

?

?

?

?

?

?

?

? Make Fewer HTTP Requests Use a Content Delivery Network Add an Expires Header Gzip Components Put CSS at the Top Move Scripts to the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript Avoid Redirects Remove Duplicate Scripts Configure ETags Make Ajax Cacheable

這里我們將逐一的講解這些準(zhǔn)則, 對(duì)其中開(kāi)發(fā)者密切相關(guān)的準(zhǔn)則我將詳細(xì)講解。小弟個(gè)人技術(shù)實(shí)在有限，錯(cuò)誤和無(wú)知在所難免，還請(qǐng)高人指點(diǎn)。

第一條：Make Fewer HTTP Requests 盡可能的減少HTTP 的Request 請(qǐng)求數(shù)。

80的用戶響應(yīng)時(shí)間都是浪費(fèi)在前端。而這些時(shí)間主要又是因?yàn)橄螺d圖片、樣式表、JavaScript 腳本、flash 等文件造成的。減少這些資源文件的Request 請(qǐng)求數(shù)將是提高網(wǎng)頁(yè)顯示效率的重點(diǎn)。

這里好像有個(gè)矛盾，就是如果我減少了很多的圖片，樣式，腳本或者flash ，那么網(wǎng)頁(yè)豈不是光禿禿的，那多難看呢？其實(shí)這是一個(gè)誤解。我們只是說(shuō)盡量的減少，并沒(méi)有說(shuō)完全不能使用。減少這些文件的Request 請(qǐng)求數(shù)，當(dāng)然也有一些技巧和建議的：

1：用一個(gè)大圖片代替多個(gè)小圖片。

這的確有點(diǎn)顛覆傳統(tǒng)的思維了。以前我們一直以為多個(gè)小圖片的下載速度之和會(huì)小于一個(gè)大圖片的下載速度。但是現(xiàn)在利用httpwatch 工具的對(duì)多個(gè)頁(yè)面進(jìn)行分析后的結(jié)果表明事實(shí)并不是這樣。

第一張圖是一個(gè)大小為40528bytes 的337*191px的大圖片的分析結(jié)果。

第二張圖是一個(gè)大小為13883bytes 的280*90px的小圖片的分析結(jié)果。

一個(gè)大小為

40528bytes 的337*191px的大圖片的分析結(jié)果（點(diǎn)擊圖片可以查看完整大圖片）

一個(gè)大小為13883bytes 的280*90px的小圖片的分析結(jié)果（點(diǎn)擊圖片可以查看完整大圖片）

第一張大圖片花費(fèi)時(shí)間為：

Blocked ：13.034s

Send ：0.001s

Wait ：0.163s

Receive ：4.596s

TTFB ：0.164s

NetWork ：4.760s

功耗時(shí)：17.795s

真正用于傳輸大文件花費(fèi)的時(shí)間為Reveive 時(shí)間，即4.596s ，多數(shù)的時(shí)間是用來(lái)檢索緩存和確定鏈接是否有效的Blocked 時(shí)間，供花費(fèi)13.034s ，占總時(shí)間的73.2。

第二張小圖片花費(fèi)時(shí)間為：

Blocked ：16.274s

Send ：小于0.001s

Wait ：0.117s

Receive ：0.397s

TTFB ：0.118s

NetWork ：0.516s

功耗時(shí)：16.790s

真正用于傳輸文件的花費(fèi)時(shí)間是Reveive 時(shí)間，即0.397s ，這的確要比剛才大文件的4.596s 小很多。但是他的Blocked 時(shí)間為16.274s ，占總時(shí)間的97。

如果這些數(shù)據(jù)還不夠說(shuō)服你的話，讓我們看看下面這張圖。這里列出了某個(gè)網(wǎng)頁(yè)中所有圖片中的花費(fèi)時(shí)間示意圖。當(dāng)然，里面的圖片有大有小，規(guī)格不一。

大約80

以上的時(shí)間是用來(lái)檢索緩存和確定鏈接是否有效的Blocked 時(shí)間。

其中藏青色的為傳輸文件花費(fèi)的Reveive 時(shí)間，而前面白色的為檢索緩存和確認(rèn)鏈接是否有效的Blocked 時(shí)間。鐵一樣的事實(shí)告訴我們：

? 大文件和小文件下載所需時(shí)間的確是不同的，差異的絕對(duì)值不大。而且下載所需時(shí)間占總耗費(fèi)時(shí)間

比例很小。

? 大約80以上的時(shí)間是用來(lái)檢索緩存和確定鏈接是否有效的Blocked 時(shí)間。無(wú)論文件大小，這個(gè)

時(shí)間的花費(fèi)大致是相同的。而且所占總耗費(fèi)時(shí)間的比例是極大的。

? 一個(gè)100k 的大圖片總耗費(fèi)時(shí)間絕對(duì)大于4個(gè)25k 的小圖片的總耗費(fèi)時(shí)間。而且主要差別就是4

個(gè)小圖片的Blocked 時(shí)間絕對(duì)大于1個(gè)大圖片的Blocked 時(shí)間。

所以如果可能還是使用大圖片來(lái)替代過(guò)多的瑣碎的小圖片吧。這也是為什么翻轉(zhuǎn)門的效率要高于圖片替換實(shí)現(xiàn)的滑動(dòng)門的原因。

但是，請(qǐng)注意：也不能用太大的單張圖片，因?yàn)槟菢訒?huì)影響到用戶體驗(yàn)。例如個(gè)幾兆的背景圖片的使用絕對(duì)不是一個(gè)好主意。

2：合并你的css 文件。

圖:合并與融合

以前為了方便組織和規(guī)劃樣式表，將用于不同用途的樣式表文件分離開(kāi)來(lái)，形成 不同的css 文件。然后在頁(yè)面中根據(jù)需要引用多個(gè)css 文件。根據(jù)“盡可能的減少HTTP 的Request 請(qǐng)求數(shù)”準(zhǔn)則我們知道，那樣的確是不合理的，因 為那樣會(huì)產(chǎn)生更多的HTTP 的Request 請(qǐng)求數(shù)。從而降低網(wǎng)頁(yè)的效率。所以，從提高網(wǎng)頁(yè)效率的角度上而言，我們還是應(yīng)該將所有的css 寫(xiě)在同一個(gè) css 文件中。但是問(wèn)題又來(lái)了。那么怎么來(lái)很好的組織和規(guī)劃樣式表呢？這的確是個(gè)矛盾。

比較好的做法是采用兩套版本。編輯版和發(fā)布版。編輯版仍然使用多個(gè) css 文件以便于規(guī)劃和組織。

而等到發(fā)布的時(shí)候，再將多個(gè)css 文件合并到一個(gè)文件中去，從而達(dá)到減少HTTPRequest 請(qǐng)求數(shù)的目的。

3：合并你的javascript 文件。

原因和處理方法同上，不再贅言。

第二條：Use a Content Delivery Network 使用CDN

這個(gè)看上去好像很深?yuàn)W的樣子，但是只要結(jié)合中國(guó)的網(wǎng)絡(luò)特色，這個(gè)便不難理解了。“北方服務(wù)器”、“南方服務(wù)器”、“電信服務(wù)器”、“網(wǎng)通服務(wù)器 ”……這些詞聽(tīng)起來(lái)是那么熟悉和壓抑。如果，一個(gè)北京的電信用戶試圖從廣東的網(wǎng)通服務(wù)器上打開(kāi)一個(gè)類似《壁紙合集》帖子的網(wǎng)頁(yè)時(shí)，你就能很深刻的理解。

鑒于這個(gè)不是我們開(kāi)發(fā)人員力所能及的準(zhǔn)則，所以這里也就不多言了。

圖:這個(gè)圖也算有點(diǎn)中國(guó)特色了

第三條：Add an Expires Header 添加周期頭

這個(gè)也并非開(kāi)發(fā)人員來(lái)控制，而是網(wǎng)站服務(wù)器管理員的職責(zé)。所以，如果作為開(kāi)發(fā)人員的你不了解和明白也沒(méi)有關(guān)系。還是把這個(gè)準(zhǔn)則告訴公司的網(wǎng)站服務(wù)器管理員。

第四條：Gzip Components 啟用Gzip 壓縮

這個(gè)大家應(yīng)該比較熟悉。Gzip 的思想就是把文件先在服務(wù)器端進(jìn)行壓縮，然后再傳輸。這對(duì)于體積較大的純文字型的文件有特效。鑒于這也并非開(kāi)發(fā)人員，而是網(wǎng)站服務(wù)器管理員的工作范疇，這里就不詳細(xì)講解了。如果你對(duì)此感興趣，可以資訊貴公司的網(wǎng)站服務(wù)器管理人員。

第五條：Put CSS at the Top 把CSS 樣式放在頁(yè)面的上方。

無(wú)論是HTML 還是XHTML 還是CSS 都是解釋型的語(yǔ)言，而非編譯型的。所以CSS 到上方的話，那么瀏覽器解析結(jié)構(gòu)的時(shí)候，就已經(jīng)可以對(duì)頁(yè)面進(jìn)行 渲染。這樣就不會(huì)出現(xiàn)，頁(yè)面結(jié)構(gòu)光禿禿的先出來(lái)，然后CSS 渲染，頁(yè)面又突然華麗起來(lái)，這樣太具有“戲劇性”的頁(yè)面瀏覽體驗(yàn)了。

第六條：Move Scripts to the Bottom 將腳本放在底部

原因同第五條一樣。只是腳本一般是用來(lái)于用戶交互的。所以如果頁(yè)面還沒(méi)有出來(lái)，用戶連頁(yè)面都不知道什么樣子，那談交互簡(jiǎn)直就是扯談。所以，腳本和CSS 正好相反，腳本應(yīng)該放在頁(yè)面的底部。

第七條：Avoid CSS Expressions 避免使用CSS

中的Expressions

圖:CSS中的Expressions 其實(shí)也是一種if 判斷

首先有必要先說(shuō)明一下CSS Expressions是什么一個(gè)東西。其實(shí)它就像其它語(yǔ)言中的if……else……語(yǔ)句。這樣在CSS 中就可以進(jìn)行簡(jiǎn)單的邏輯判斷了。舉個(gè)簡(jiǎn)單的例子——

這樣css 就可以根結(jié)一些情況分別使用不同的樣式了。但是CSS 中Expressions 的代價(jià)卻是極高的。當(dāng)你的頁(yè)面需要根據(jù)判斷來(lái)渲染效果的元素很多的時(shí)候，那么你的瀏覽器將長(zhǎng)期處于假死狀態(tài)，從而給用戶帶來(lái)極差的用戶體驗(yàn)。

第八條：Make JavaScript and CSS External 將javascript 和css 獨(dú)立成外部文件

這一條好像和第一條有點(diǎn)矛盾。的確，如果從HTTP 的request 請(qǐng)求數(shù)來(lái)講的話，這樣做的確是降低了效率。但是之所以這么做，是因?yàn)榱硗庖粋€(gè)重 要的考慮因素——緩存。因?yàn)橥獠康囊梦募?huì)被瀏覽器緩存，所以如果javascript 和css 體積較大的時(shí)候，我們將它們獨(dú)立成外部文件。這樣當(dāng)用戶 只要瀏覽一次以后，這些體積較大的js 和css 文件就能被緩存起來(lái)，從而極高地提高用戶再次訪問(wèn)時(shí)的效率。

第九條：Reduce DNS Lookups 減少DNS 查詢

DNS 域名解析系統(tǒng)。大家都知道我們之所以能記住那么多的網(wǎng)址，是因?yàn)槲覀冇涀〉亩际菃卧~，而非

1：如果不是必須，請(qǐng)不要把網(wǎng)站放到兩臺(tái)服務(wù)器上。

2：網(wǎng)頁(yè)中的圖片、css 文件、js 文件、flash 文件等等，不要太多的分散在不同的網(wǎng)絡(luò)空間中。這就是為什么那種只發(fā)一個(gè)網(wǎng)站中的壁紙圖片的帖子，要比壁紙圖片來(lái)源于不同網(wǎng)站的帖子顯示要快得多的原因。

第十條：Minify JavaScript and CSS 減少JavaScript 和CSS 文件的體積

這點(diǎn)很好理解。在你的最終發(fā)布版本中把沒(méi)有必要的空行、空格和注釋全部去掉。顯然手工去處理效率太低，好在網(wǎng)上到處都是用于壓縮這些東西的工具。壓縮JavaScript

代碼體積的工具隨處可見(jiàn)，我便不再列舉了，這里我只提供一個(gè)用于壓縮css 代碼體積的在線工具網(wǎng)站——http://www.cssdrive.com/index.php/main/csscompressor 它提供了多種壓縮方式，可以適應(yīng)多種要求。

第十一條：Avoid Redirects 避免跳轉(zhuǎn)

我只從網(wǎng)頁(yè)開(kāi)發(fā)人員的角度來(lái)解讀此條。那么我們可以解讀到什么東西呢？2點(diǎn)——

1：“此域名已過(guò)期，5秒鐘以后，頁(yè)面將跳轉(zhuǎn)到http://www.xxxxxx.com/index.html頁(yè)面”，這句話看起來(lái)的確很熟悉。但是，我就奇怪了，為什么不直接鏈接到那個(gè)頁(yè)面呢？

2：一些鏈接地址請(qǐng)更明確的寫(xiě)出來(lái)。例如:將http://justinyoung.cnblogs.com/ 寫(xiě)成

第十二條 Remove Duplicate Scripts 移除重復(fù)的腳本

這個(gè)準(zhǔn)則的道理很淺顯，但是真正在工作中，很多人卻因?yàn)椤绊?xiàng)目時(shí)間緊”、“太累了”、“初期沒(méi)有規(guī)劃好”……這樣的理由搪塞過(guò)去了。你，的確可以找很多的理由不去處理這些多余重復(fù)的腳本代碼，如果你的網(wǎng)站不需要更高的效率和后期維護(hù)的話。

也正是這點(diǎn)，我提醒大家一些，一些javascript 框架、javascript 包一定要慎用。至少要問(wèn)一下：用了這個(gè)js kit 到底給我們多少方便，提高了多少工作效率。然后，再與它因?yàn)槎嘤嗟?、重?fù)的代碼帶來(lái)的負(fù)面效果比較一下。 第十三條：Configure ETags 配置你的實(shí)體標(biāo)簽

首先來(lái)講講什么是Etag 吧。Etag （Entity tags ）實(shí)體標(biāo)簽。這個(gè)tag 和你在網(wǎng)上經(jīng)?？吹降臉?biāo)簽云那種tag 有點(diǎn)區(qū)別。這個(gè)Etag 不是給用戶用的，而是給瀏覽器緩存用的。Etag 是服務(wù)器告訴瀏覽器 緩存，緩存中的內(nèi)容是否已經(jīng)發(fā)生變化的一種機(jī)制。通過(guò)Etag ，瀏覽器就可以知道現(xiàn)在的緩存中的內(nèi)容是不是最新的，需不需要重新從服務(wù)器上重新下載。這和 “Last-Modified”的概念有點(diǎn)類似。很遺憾作為網(wǎng)頁(yè)開(kāi)發(fā)人員對(duì)此無(wú)能為力。他依然是網(wǎng)站服務(wù)器人員的工作范疇。如果，你對(duì)此有興趣，可以咨詢公司的網(wǎng)站服務(wù)器管理員。

第十四條：Make Ajax Cacheable 上面的準(zhǔn)則也適用Ajax

圖:Ajax的使用要恰當(dāng)

現(xiàn)在的Ajax 好像有點(diǎn)被神話了，好像網(wǎng)頁(yè)只要Ajax 了，那么就不存在效率問(wèn)題了。其實(shí)這是一種誤解。拙劣的使用Ajax 不會(huì)讓你的網(wǎng)頁(yè)效率更高，反而會(huì)降低你的網(wǎng)頁(yè)效率。Ajax 的確是個(gè)好東西，但是請(qǐng)不要過(guò)分的神話它。使用Ajax 的時(shí)候也要考慮上面的那些準(zhǔn)則。

當(dāng)然，上面的這些也只是供你參考的理論上的準(zhǔn)則。具體的情況還是要具體的去對(duì)待。理論和準(zhǔn)則只是用來(lái)指導(dǎo)現(xiàn)實(shí)工作的，卻是萬(wàn)萬(wàn)不可死記硬套。

如何知道我們現(xiàn)在的網(wǎng)頁(yè)的效率到底如何？到底處于怎樣一個(gè)級(jí)別？又有哪些方面做的不夠好，需要改進(jìn)呢？也許，你會(huì) 說(shuō)，問(wèn)一下用戶不就知道了嗎？但是相比感性比例占據(jù)太大的用戶感受而言，理性的工具和數(shù)據(jù)更具有說(shuō)服力。本篇就將向你介紹一款評(píng)測(cè)網(wǎng)頁(yè)效率的工具

—— YSlow（why slow，這個(gè)名字起的太好了）。

yslow

YSlow 是由Yahoo 開(kāi)發(fā)者團(tuán)隊(duì)發(fā)布的一款基于Firebug 的插件。而Firebug 又是一款基于FireFox 的插件。所以說(shuō)YSlow 是一款基于FireFox 插件的插件。雖然有點(diǎn)繞，但是最終說(shuō)明的問(wèn)題是：

?

?

?

? 很遺憾，微軟的IE 系列瀏覽器不能使用YSlow 。 YSlow 只能使用在FireFox 瀏覽器上。 如果要想使用YSlow ，那么你必須先安裝FireFox 。 如果要想使用YSlow ，那么你就要安裝FireFox 上的Firebug 插件。

這看上去好像有點(diǎn)令人沮喪，但是事實(shí)上它并不像想象中的那么麻煩，只要按照下面的步驟你將能很快的使用YSlow ：

1. 到http://www.mozilla.net.cn/firefox/ 下載最新版的FireFox ，并安裝它。當(dāng)然

下載最新版

下載最新版的如果你已經(jīng)安裝了FireFox 可以跳過(guò)此步。 2. 到https://addons.mozilla.org/zh-CN/firefox/search?q=Firebug3. 到https://addons.mozilla.org/zh-CN/firefox/search?q=yslow

YSlow ，并安裝它。當(dāng)然如果你已經(jīng)安裝了YSlow 可以跳過(guò)此步。 的Firebug ，并安裝它。當(dāng)然如果你已經(jīng)安裝了Firebug 可以跳過(guò)此步。

圖2：在菜單中先打開(kāi)Firebug 插件

這時(shí)候打開(kāi)FireFox ，你將在【工具】菜單中看到【firebug 】（如圖2）。打開(kāi)firebug ，然后在firebug 中點(diǎn)擊YSlow 菜單，便看進(jìn)入YSlow 的主界面（如圖3）。

圖3

：在菜單中先打開(kāi)Firebug 插件(點(diǎn)擊小圖查看完整大圖)

點(diǎn)擊【Yslow 】菜單

YSlow 便開(kāi)始分析此頁(yè)的效率，并從13個(gè)最影響網(wǎng)頁(yè)效率的方面給出評(píng)估（如圖4）。

圖4：YSlow 給出的本頁(yè)面效率評(píng)估

可以看出來(lái)，YSlow 評(píng)估的依據(jù)就是前面13條。前面藍(lán)色的字母表示這一條準(zhǔn)則的得分。A 最高。

點(diǎn)擊【Stats 】菜單

這個(gè)視圖會(huì)告訴你頁(yè)面的總體統(tǒng)計(jì)信息。包括頁(yè)面大小、css 樣式表大小、腳本文件大小、總體圖片大小、flash 文件大小和css 中用到的圖片文件大小。還會(huì)告訴你，哪些東西被緩存了，緩存了多少等等。

圖6

：【Stats 】視圖信息

點(diǎn)擊【Components 】菜單

這個(gè)視圖是一個(gè)頁(yè)面所有部件的信息列表。從中我們可以得知每個(gè)部件的各種詳細(xì)信息。如：類型、URL 、Expires 數(shù)據(jù)、狀態(tài)、大小、讀取時(shí)間、ETag 信息等等。通過(guò)對(duì)這個(gè)列表的分析，我們就可以知道到底是什么東西最耗費(fèi)我們的資源，從而有針對(duì)性的進(jìn)行優(yōu)化。

圖7：【Components 】視圖信息，點(diǎn)擊“放大鏡”圖標(biāo)我們可以知道更詳細(xì)的信息（點(diǎn)擊小圖查看完整大圖） 點(diǎn)擊【Tools 】菜單

【Tools 】菜單包含4個(gè)子菜單，就是4個(gè)實(shí)用工具?！綣SLint 】工具運(yùn)行JSLint 對(duì)于所有的腳本, 【ALL JS】工具，將生成本頁(yè)面所有腳本代碼便于閱讀和打印的報(bào)表頁(yè)面。【ALL CSS】工具，將生成本頁(yè)面 所有CSS 樣式表代碼便于閱讀和打印的報(bào)表頁(yè)面。【All Smush.it?】將你網(wǎng)站上的所有圖片發(fā)送到Y(jié)ahoo 提供的一個(gè)平臺(tái)，分析圖片文件的大小，【Printable View】將【Performance 】和【Stats 】視圖中的信息生成一份更適合閱讀和打印的報(bào)表頁(yè)面。

圖8

：【Tools 】菜單，包含了7個(gè)子菜單

點(diǎn)擊【Help 】菜單

【Help 】主要是些常用的幫助途徑的入口。從這里你可以很方面的訪問(wèn)YSlow 的官方網(wǎng)絡(luò)和博客。如果你還對(duì)YSlow 的使用有什么疑惑的話，那么在這里你將獲得滿意的解答。

圖8：【Help 】菜單是些常用的幫助入口

后記

“工欲善其事，必先厲其器！”好的工具的確能很大的提高我們的工作效率。但是“阿斗”就算手里拿著“方天畫(huà)戟”，估計(jì)也沒(méi)有幾個(gè)人怕他。好的工具是一方面，但是更重要的還是提高我們自身的知識(shí)水平。就如同這款YSlow ，如果沒(méi)有了解《提高網(wǎng)頁(yè)效率的14條準(zhǔn)則》中的理論知識(shí)，工具提供的信息我們看到的可能只是表面，就算看懂了數(shù)據(jù)，我們也很難知道對(duì)應(yīng)的手段和措施。壯漢拿厲斧，這樣伐木才能又快又輕松。