Yslow性能指標

YSLOW是YAHOO開發者團隊發佈的一款基於FIREBUG的插件。用於分析網頁,並根據一些高性能網站的規則進行相應的評級打分,對於網頁性能優化有很好的幫助作用,告訴你那些部分影響了你的網頁速度,WHY SLOW!!
主要規則有13條,其中11條比較關鍵:


1.Make fewer HTTP requests--更少的http請求,也就是說頁面中儘量少的引用外部靜態資源,js、css以及圖片


2.Use a CDN--使用CDN網絡,將頁面中的靜態資源分佈到離用戶最近的網絡節點上


3.Add an Expires header--爲靜態資源文件增加過期時間,讓用戶通過本地緩存來更快的訪問網站


4.Gzip components--壓縮靜態資源內容,減少網絡傳輸時間


5.Put CSS at the top--將CSS放在頁面頭部,能夠更快渲染頁面


6.Put JS at the bottom--將JS放在頁面底部,一般情況下JS的下載是阻塞模式的,放在頁面頂部會阻塞其他資源的下載


7.Avoid CSS expressions--不要使用CSS表達式,因爲CSS表達式需要很多資源,有時甚至會造成頁面假死


8.Make JS and CSS external--將CSS和JS使用外部的獨立文件,這點有點和1衝突,但是仔細分析下,並不矛盾


9.educe DNS lookups--減少DNS查找(這點我後面詳細解釋下)


10.Minify JS--最小化壓縮JS,和第4點不同,使用YUI Compressor或者JSMin將JS文件進行分析,將一些變量名變短,去除不必要的空格和符號


11.Avoid redirects--避免無意義的跳轉


12.Remove duplicate scripts--去除重複的腳本,不光是文件,甚至是同功能的函數


13.Configure ETags--配置實體標籤(要說清楚這個問題就要引申出很多情況,不做展開了)

 
先講講比較容易做到的幾點(實現難易程度不一樣,注意先後次序):
YSlow第八條:這點我相信大家比較容易理解,而且很多都已經實施,就是將CSS和JS獨立成相應的文件,使用link和script標籤應用;
 
YSlow第三條:因爲靜態資源文件(CSS\JS\IMG統稱靜態資源文件)往往是變化不大的,那麼可以在HTTP頭中增加相應的過期時間,讓瀏覽器緩存在本地,這樣當第二次使用的時候,就不會下載全部內容,只是進行狀態檢查;
 
YSlow第四條:也很好理解,將靜態內容壓縮後,減少網絡傳輸時間;因爲IIS的壓縮設置相對較煩,可以使用第三方工具,如IISxpress,支持32位和64位,而且還有一個技術交流版的授權;
 
做到以上三點,網頁速度已經有比較明顯的加速了,還有幾點雖然略微麻煩,但是也是很好的加分手段:
 
YSlow第十條:最小化JS文件,我們寫的JS往往包含空格、TAB等對JS執行沒用影響的字符,但是這卻實實在在的增加了JS的體積,使用工具能夠去除這些無用的字符,減少文件體積。但是同樣帶來的問題就是,JS不能有錯誤,另外壓縮後的JS代碼很難閱讀,所以如何在開發時和發佈時協調好就是很大的問題,爲了這點我們使用不同的文件引用,在開發時(DEBUG)使用未壓縮版,在發佈時(RELEASE)使用壓縮版,使用#if #else #endif引用不同的文件;
詳細解釋下YSlow的第9點,減少DNS查找。
通常情況下按照我們的理解,靜態資源文件都是放在本站點目錄下的。由於以前大家的網絡速度都不快,IE瀏覽器爲了防止大量的http請求阻塞了網絡連接,所以同一域名下的http請求,只允許2個併發線程,所以這就導致我們看到有的頁面的圖片是逐步逐步顯示出來的。通過Safari的網絡時間線工具就能看出來。
顯而易見,爲了突破這個限制,我們可以增加幾個域名,從而增加併發下載,加快速度。
最好的方式是自己指定每個文件的域名,按照i1、i1、i2、i2、i3、i3、i1、i1的排列方式,但是同時還要考慮引用的文件大小,進行合理的排列,這對於團隊開發就過於複雜了。我們使用了i1.dpfile.com、i2.dpfile.com和i3.dpfile.com三個域名,然後在每個調用靜態資源文件地方都是用函數調用:DianPing.Common.StaticFile("/s/js/g.mt.min.js"),函數會根據文件進行hash,分配一個域名,這樣就能最大化的散列靜態文件的域名,雖然有缺點,卻是比較平衡的方式。


就在我寫文章的同時,仔細分析了YSlow的評分標準,找到我們丟失的一分原因,也是因爲第9點。第9點滿分是100分,YSlow認爲一個頁面上最合理的是2個以內域名,每增加一個扣除5分,我們的頁面有4個域名(www\i1\i2\i3),扣除了10分。這個佔總比例的1/12,所以四捨五入,被扣除了1分。(不過我認爲這1分還是值得的,頁面加速很明顯,而且DNS查找是可以緩存噠~~~)
從Safari的網絡時間線工具上看到JS(橙色)的加載會阻塞其他資源的下載,所以我打算再獨立一個域名j1.dpfile.com,專門加載JS文件。
不管怎麼說,總體來說性能還是提升了不少。




YSlow第十三條:對於一般性網站來講是雞肋,所以純粹爲了加分。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章