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/