WEB前端效能分析--工具篇【轉】

標籤：style   tar   ext   color   int   get   

線上網站類：

WebPageTest

說明：

線上的網站效能評測網站，地址http://www.webpagetest.org/

補充：

其實這網站也是個開源項目，所以支援自己搭建一個內部的測試網站

ShowSlow

說明：

showslow是yslow的資料收集與展示平台http://www.showslow.com/，它是一個開源的php項目，可以用來與firefox的yslow外掛程式、page speed外掛程式或者dynatrace通訊，收集外掛程式或程式所發送過來的資訊並集中展示。只需要在dynatrace安裝目錄下進行一些設定，即可自動實現上傳結果到showslow平台作為存檔、分析及監控。 

瀏覽器外掛程式類： 

FireBug

這個不用說了，它可以對頁面進行調試，可以記錄所有網頁的訪問耗時，下載的資源等。

Page Speed

說明：

基於firebug的web頁面最佳化的評測工具，同時還有支援chrome的外掛程式，因為是google產的。

使用：

直接開啟FF的firebug或chrome的開發人員工具，切換到page speed標籤，瀏覽一個網頁然後點擊分析即可，分析完成後會針對規則打出一個成績，並告訴你哪些規則你沒有符合。

其評分規則27條規則：

https://developers.google.com/speed/docs/best-practices/rules_intro 

對幾個網站的分析結果如下：

Google.cn 99分

Baidu.com 98分

360buy.com 98分

Taobao.com 89分

Dangdang.com 83分

補充：

其實這個更像是代碼的白盒測試分析工具，因為其都是根據一定的規範來檢測網頁的 最佳化程度，而不是實際的去監聽和過濾頁面訪問所花費的時間。當然一個網頁的載入時間和很多因素有關；比如網速，比如頁面上的內容，不同的網站載入時間肯定 是不一樣的，這個就每一個用一個規則來確定一個怎麼的網站應該要多長的載入時間了，因此這隻是一個最佳實務規則和建議的偵查工具；還有一點就是如果想看頁 面訪問時間的細節，firebug和chrome的開發人員工具本身就已經有了。

Speed Tracer

說明：

基於chrome的外掛程式，同樣是有google產的，這個是web前端頁的效能記錄和分析工具，同時還提供一個規則和建議的評測。

使用：

https://developers.google.com/web-toolkit/speedtracer/get-started 

補充：

這個工具收集的東西主要是資源或事件消耗的時間，它會即時的記錄某個頁面的載入過程，並且一直跟蹤所有的事件；在易用性方面資料可以到出來，還有可以根據時間軸來分析具體某端的效能規則和建議。

Yslow

說明：

基於firebug的評測分析工具，yahoo產；和page speed類似工具，會給出頁面的評分和最佳化說規則，同時會提供頁面下載資源的統計分析功能，還提供了一些小工具，如js運行檢測，圖片的最佳化工具，未符合規則的資源有哪些等等。總的來說是page speed的增強版。

Yslow最佳化建議23條規則：

http://developer.yahoo.com/performance/rules.html 

各網站的評分：

Google.cn 67分

Baidu.com 94分

360buy.com 77分

Taobao.com 70分

Dangdang.com 71分

獨立程式類：

DynaTrace Ajax Edition

說明：

基於IE，firefox的外掛程式，對於FF需要版本支援，需要獨立安裝檔案（50多M）。其可支援到函數級的度量分析，此外其它工具能支援的功能這個工具都支援的。

DynaTrace最佳化建議規則：

http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization 

Fiddler

說明：

Microsoft的一款web調試工具，它會記錄所有本地的http通訊。同時支援ie外掛程式版

HttpAnalyzer

說明：

和fiddler原理一樣的工具，不過功能比fiddler更加易用。同時支援ie，ff外掛程式版，此外獨立版程式提供http調試功能，寫基於http通訊的程式使用這個調試比較不錯，之前寫介面測試載入器時就用的這個調試的。

HttpWatch：

說明：

以前這個和httpanalyzer都用過，後來就只用後者了；今天突然發現放棄它的原因是它只支援外掛程式版的，即只能在瀏覽器上使用，而且只能抓對 應瀏覽器的http通訊，且不支援http通訊的調試；不過現在發現了一個比httpanalyzer好的就是它的頁面載入用時的統計功能，是可以統計一 個頁面總用時什麼的，所以這個工具更適合用於網站的頁面效能分析。

總結：

這些個工具裡有些類似，有些用處各不相同，有些事專門的web前端效能評測工具，有些並不是為了web前端效能而做的工具。總的來說就是要結合實際情況，綜合這些個工具來用，需要分析什麼情況就用什麼工具。如果是通常意義上的web前端效能測試的話，可以選擇一個固定的方案，比如：DynaTrace + showslow，前者擷取非常豐富的資料，後者則在服務端專門展示這些資料，即方便使用又方便儲存。如果要支援持續測試的話，可以寫自動化的指令碼來跑具體的頁面，每次新版本都執行一次自動化測試即可。