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

在線網站類:

WebPageTest

說明:

在線的站點性能評測網站,地址http://www.webpagetest.org/

補充:

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


ShowSlow

說明:

showslowyslow的數據收集與展示平臺http://www.showslow.com/,它是一個開源的php項目,可以用來與firefoxyslow插件、page speed插件或者dynatrace通信,收集插件或程序所發送過來的信息並集中展示。只需要在dynatrace安裝目錄下進行一些設置,即可自動實現上傳結果到showslow平臺作爲存檔、分析及監控。 



瀏覽器插件類: 

FireBug

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


Page Speed

說明:

基於firebugweb頁面優化的評測工具,同時還有支持chrome的插件,因爲是google產的。

使用:

直接打開FFfirebugchrome的開發人員工具,切換到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

補充:

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


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

說明:

基於IEfirefox的插件,對於FF需要版本支持,需要獨立安裝文件(50M)。其可支持到函數級的度量分析,此外其它工具能支持的功能這個工具都支持的。

DynaTrace優化建議規則:

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


Fiddler

說明:

Microsoft的一款web調試工具,它會記錄所有本地的http通信。同時支持ie插件版


HttpAnalyzer

說明:

fiddler原理一樣的工具,不過功能比fiddler更加易用。同時支持ieff插件版,此外獨立版程序提供http調試功能,寫基於http通信的程序使用這個調試比較不錯,之前寫接口測試工具時就用的這個調試的。


HttpWatch

說明:

以前這個和httpanalyzer都用過,後來就只用後者了;今天突然發現放棄它的原因是它只支持插件版的,即只能在瀏覽器上使用,而且只能抓對應瀏覽器的http通信,且不支持http通信的調試;不過現在發現了一個比httpanalyzer好的就是它的頁面加載用時的統計功能,是可以統計一個頁面總用時什麼的,所以這個工具更適合用於站點的頁面性能分析。


總結:

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


原文地址:https://blog.csdn.net/five3/article/details/7686376

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章