Yslow

Yslow視圖

YSlow顯示測試結果的分析,分爲等級、組件、統計信息。你能夠瀏覽這些觀點之間選擇標籤以觀的名字在YSlow標籤的Firebug控制檯。

如下是說明的等級、組件、統計信息。

1、等級視圖

　　查看一個分析,選擇頁面的性能等級標籤或點擊網頁的字母等級在狀態欄這頁紙的底部。

視圖顯示了等級爲網頁的成績單。整個字母等級爲頁面顯示在頂部隨着全面數值的表現。這個頁面是基於22可分級的高性能網頁的規則(見性能規則)。這些規則是列在按重要性的順序,從最重要不重要。從 A 級到 F 級，A 級爲最高。

下面是一個等級的例子：

 

若是頁面與某一個規則無關，則顯示 N/A ，表示不適用。

點擊每一規則，都給出了改進建議。要查看更全面的改進方法進入前端性能優化指南

2、組件視圖

 

分組顯示頁面組件，表格列出組件的信息，點擊 Expand All展開顯示給個分組內各的組件信息。

下面簡要列在組件檢視表：

TYPE：該組件的類型。該網頁是由組成部分的下列類型： doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.

SIZE(KB)：該組件的大小以千字節。

GZIP(KB)：該組件的gzip壓縮的大小以千字節。

COOKIE RECEIVED(bytes)：字節數在HTTP設置的Cookie響應頭。

COOKIE SENT(bytes)：節數的Cookie在HTTP請求報頭

HEADERS：HTTP信息頭，點擊放大鏡查看全面信息。

URL：連接地址

EXPIRES(Y/M/D)：日期的Expires頭，屬於緩存設置一種。

RESPONSE TIME (ms)：響應時間

ETAG：ETag響應頭，也是緩存設置的一種

ACTION：額外的性能分析

3、統計信息視圖

 

 左側圖表顯示是頁面元素在空緩存的加載狀況，右側爲頁面元素使用緩存後的頁面加載狀況。咱們能夠看到，頁面元素緩存後的使頁面的http請求和頁面總大小都減小，從而加快了頁面打開時間。參看（頁面的緩存設置）

YSlow菜單欄

 

1、規則集

     1 、YSlow （ 2版） -這一規則集包含了全部22個測試的規則。
     2 、精英（ V1導聯） -這個規則集包含原始13規則中使用了YSlow 1.0 。
     3、小網站或博客-這個規則集包含14個規則，適用於小型網站或博客。參照下方的圖片，看看哪種規則，在這個規則集。

 

請注意，最後選定的規則集成爲默認的規則集。默認規則集能夠是一個預約義的三個之一或您本身建立的一個。

要建立您本身的規則集，單擊Rulesets下拉菜單旁邊的 Edit 按鈕。新的規則集屏幕將顯示：

 

    1、點擊左側 New Set 按鈕，出現所有22調規則，勾選你所需的

    2、點擊 Save ruleset as... 保存，會彈出個命名窗口，命名就能夠了。

    3、你還能夠對自定義的規則再次編輯或者刪除。

 

 

YSlow 工具

YSlow的工具菜單上提供了多種報告工具，您可使用得到的信息，以幫助您的網頁分析。如下是截圖工具菜單：

1、JSLint

JSLint收集全部外部和內部的JavaScript從目前的網頁，提交給JSLint ，一個JavaScript驗證，並打開一個單獨的窗口了一份報告，存在問題，該網頁的JavaScript的。該報告包括大體位置的源代碼的問題。不少 時候，這些問題是語法錯誤，但JSLint尋找風格公約的問題和結構性問題。

 

2、All JS

收集全部外部和內部的JavaScript的網頁，並顯示在一個單獨的腳本窗口。您可能想要使用這個工具來查看某個腳本，以及是否實際使用是正確的。

 

3、All JS Beautified

將js以人們可讀的方式展現。

 

4、All JS Minified

收集全部外部和內嵌JavaScript，刪除評論和白色空間以縮小的腳本。以改善網頁的性能。

 

5、All CSS

收集全部的行內和外部的樣式表在網頁上，並將其顯示在一個單獨的窗口。

 

6、All Smush.it

若是您按一下全部Smush.it ， Smush.it將運行在網頁上全部的圖片組成。此工具將告訴你該圖像可被優化，並建立一個壓縮文件，來優化圖像。當您選擇此工具你會看到輸出以下所示：

 

 

1.Minimize HTTP Requests 減小HTTP請求
　　圖片、css、script、flash等等這些都會增長 http請求數，減小這些元素的數量就能減小響應時間。把多個JS、CSS在可能的狀況下寫進一個文件，頁面裏直接寫入圖片也是很差的作法，應該寫進 CSS裏，利用 CSS sprites 將小圖拼合後利用background來定位。
　　2.Use a Content Delivery Network 利用CDN技術
　　CDN 確實是好東西，8過服務器提供商的這項服務通常是要收費的，我之前買的國內空間是有這個的可是我當時根本不知道啥用，如今沒了。。。
　　3.Add an Expires or a Cache-Control Header 設置頭文件過時或者靜態緩存
　 　瀏覽器會用緩存來減小http請求數來加快頁面加載的時間，若是頁面頭部加一個很長的過時時間，瀏覽器就會一直緩存頁面裏的元素。不過這樣若是頁面裏的 東西變更的話就要更名字了，不然用戶端不會主動刷新，看本身衡量了~ 這項能夠經過修改.htaccess文件來實現。
　　4.Gzip Components Gzip壓縮
　　Gzip格式是一種很廣泛的壓縮技術，幾乎全部的瀏覽器都有解壓Gzip格式的能力，並且它能夠壓縮的比例很是大，通常壓縮率爲85%。壓縮沒壓縮，能夠到 這裏 作下測試。
　　5.Put Stylesheets at the Top 把CSS放頂部
　　讓瀏覽者能儘早的看到網站的完整樣式。
　　6.Put Scripts at the Bottom 把JS放底部
　　網站呈現完畢後再進行功能設置，固然這些JS要在你的加載過程當中不影響內容表現。
　　7.Avoid CSS Expressions 避免CSS Expressions
　　CSS表達式很可怕，這個只被IE支持的東西執行時候的運算量很是大，你移動一下鼠標它都要進行重計算的，但有時候爲了作瀏覽器的兼容必需要用到這個||| IE6去死去死！~
　　8.Make JavaScript and CSS External 將JS和CSS外鏈
　　前面講到了緩存這個事情，一些較爲公用的JS和CSS，咱們可使用外鏈的形式，譬如我就是從Google外鏈來的Jquery文件，若是個人瀏覽者在瀏覽別的使用了這個外鏈文件的網站時已經下載並緩存了這個文件，那麼他在瀏覽個人網站的時候就不須要再進行下載了！~
　　9.Reduce DNS Lookups 減小DNS查找
　　貌似是要減小網站從外部調用資源，個人Google分析和picasa的外鏈圖片都算在裏面了。
　　10.Minify JavaScript and CSS 減少JS和CSS的體積
　　寫JS和CSS都是有技巧的，用最少的代碼實現一樣的功能，減小空白，加強邏輯性，用縮寫方式等等，固然也有很多工具也可以幫你實現這一點。
　　11. Avoid Redirects 避免重定向
　 　再寫入連接時，雖然」http://www. today-s-ooxx. com」和」http://www. today-s-ooxx. com/」 僅有一個最後的」/」只差，可是結果是不一樣的，服務器須要花時間把前者重定向爲後者而後進行跳轉，這個要本身注意，也能夠在Apache裏用Alias 或者mod_rewrite或者DirectorySlash解決。
　　12. Remove Duplicate Scripts 刪除重複腳本
　　重複調用的代碼瀏覽器並不會識別忽略，而是會再次運算一遍，這固然是大大的浪費。
　　13. Configure ETags 配置ETags
　　搞不清楚咋回事，總之我是在. htaccess裏把它刪除了。
　　14. Make Ajax Cacheable 緩存Ajax
　　Ajax是實時響應的，在瀏覽器接收到新的數據前，舊的數據被緩存，這樣可以更好的提升效率。
　　15. Flush the Buffer Early 儘早的釋放緩衝
　　當用戶進行頁面請求時，服務器端須要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩衝，這樣能夠將文件頭先發送出去，而後再發送文件內容，提升效率。
　　16. Use GET for AJAX Requests 用GET方式進行AJAX請求
　　Get 方法和服務器只有一次交互（發送數據），而 Post 要兩次（發送頭部再發送數據）。
　　17. Post-load Components 延遲加載組件
　　最早加載必須的組件進行頁面初始化，而後再加載其餘，YUI Image Loader 是很好的例子。
　　18. Preload components 預加載組件
　　提早加載之後可能用到的東西，和延遲加載並不衝突，它的目的是爲後續請求提供更快的響應，參見Google首頁上的CSS sprites應用。
　　19. Reduce the Number of DOM Elements 減小DOM元素數量
　　複雜的頁面結構意味着更長的下載及響應時間，更合理更高效的使用標籤來架構頁面，是好的前端的必備條件。
　　20. Split Components Across Domains 跨域分離組件
　　頁面組件多個來源能夠增大你的平行下載量，但注意不要過多，超過2-4個域名會引發上面說到的DNS查找浪費。
　　21. Minimize the Number of iframes 減小iframe數量
　　須要更有效的利用 ifames。
　　iframe 優勢：有利於下載緩慢的廣告等第三方內容，安全沙箱，並行下載腳本
　　iframe 缺點：即便爲空也會有較大資源消耗，會阻止頁面的onload，非語義
　　22. No 404s 不要出現404頁面
　　站點自己裏（非搜索結果）出現404頁面，無心義的404頁面會影響用戶體驗而且會消耗服務器資源。
　　23. Reduce Cookie Size 減少Cookie
　　Cookie在服務器及瀏覽器之間的經過文件頭進行交換，儘量減少Cookie體積，設置合理的過時時間，可以很好的提升效率。
　　24. Use Cookie-free Domains for Components 對組件使用無Cookie的域名
　　對靜態組件的Cookie讀取是一種浪費，使用另外一個無Cookie的域名來存放你的靜態組件式一個好方法，或者也能夠在Cookie中只存放帶www的域名。
　　25. Minimize DOM Access 減小DOM的訪問次數
　　JS訪問DOM是很慢的，儘可能不要用JS來設置頁面佈局。
　　26. Develop Smart Event Handlers 開發靈活的事件處理句柄
　　DOM樹上過多的元素被加入事件句柄的話，反應效率確定會低，YUI事件工具備一個 onAvailable 方法能夠幫助你靈活的設置DOM事件句柄
　　27. Choose < link >over @import 使用< link >而非 @import
　　在IE中使用@import就和在頁面底部用< link >同樣，咱們前面說要把< link >放頂部的。
　　28. Avoid Filters 避免過濾器的使用
　　若是須要Alpha透明，不要使用AlphaImageLoader，它效率低下並且只對IE6及如下的版本適用，用PNG8圖片。若是你非要使用，加上_filter以避免影響IE7+用戶。
　　29. Optimize Images 優化圖片
　　將你的GIF轉爲PNG8會是個減少體積的好辦法，另外有不少方法處理你的JPG及PNG圖片以達到優化效果。
　　30. Optimize CSS Sprites 優化CSS Sprites
　　在CSS Sprites中豎直並儘可能緊湊的排列圖片，儘可能將顏色類似的圖片排在一塊兒，會減少圖片自己的大小及提升頁面圖片顯示速度。
　　31. Don’t Scale Images in HTML 不要在HTML中縮放圖片
　　圖片要用多大的就用多大的，1000X1000的圖片被width=」100″ height=」100″之後，自己的KB數是不會減小的。
　　32. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小並緩存它
　　站點的瀏覽器ICO應該不是常常換吧，那就長時間的緩存它，而且最好控制在1K如下。
　　33. Keep Components under 25K 保證組件在25K如下
　　iPhone不能緩存25K以上的組件，而且這仍是要在被壓縮前。
　　34. Pack Components into a Multipart Document 將組件打包進一個多部分的文檔中
　　就好像在郵件中加入附件同樣，一個HTTP請求就夠了，可是這一技術須要確保你的代理支持，iPhone就不支持。