天天看點

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

 線上網站類:

  webpagetest

  說明:

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

  補充:

  showslow

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

  浏覽器插件類:

  firebug

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

  page speed

  使用:

  直接打開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分

  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,前者擷取非常豐富的資料,後者則在服務端專門展示這些資料,即友善使用又友善存儲。如果要支援持續測試的話,可以寫自動化的腳本來跑具體的頁面,每次新版本都執行一次自動化測試即可。

最新内容請見作者的github頁:http://qaseven.github.io/