轉 WEB前端性能分析--工具篇

在線網站類：

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，前者獲取很是豐富的數據，後者則在服務端專門展現這些數據，即方便使用又方便存儲。若是要支持持續測試的話，能夠寫自動化的腳原本跑具體的頁面，每次新版本都執行一次自動化測試便可