Javascript效能分析——工具（YUI Profiler）上

http://drupal.org/node/201916

http://drupal.org/node/206792

http://www.newhua.com/2012/1205/187066_4.shtml

 

原文http://www.2cto.com/kf/201204/126311.html

http://www.cnblogs.com/Miser/archive/2012/04/04/2432505.html

 

 

最近看完了《高效能JavaScript》http://book.douban.com/subject/5362856/，打算寫一系列的文章把知識點鞏固下，儘管工具介紹在書的最後，但是為了能在後續文章中有個更為直觀的認識，我打算先介紹下工具，這樣在示範代碼的時候可以看到效能分析資料更加理解深刻。
YUI Profiler 官方地址http://developer.yahoo.com/yui/profiler/
介紹
YUI是個很贊的工具，它提供了方法（Profiling Functions），建構函式（Profiling Constructors）和對象（Profiling Objects）的分析以及其它的一些輔助協助。
如果你想分析上訴某種東東，需要先向YUI Profiler中註冊那個東東，如YAHOO.tool.Profiler.registerFunction //分析方法
YAHOO.tool.Profiler.registerConstructor//分析建構函式
YAHOO.tool.Profiler.registerObject//分析對象
註冊晚之後便可以通過
getAverage —— 得到平均執行時間
getCallCount —— 被調用次數
getMax(name) ——最大執行時間
getMin(name) ——最小執行時間
getFunctionReport(name) —— 上訴幾個方法的報告
 
如何用呢？
JavaScript在不同瀏覽器裡的字串拼接的效能消耗是不同的，下面我們看看它在Chrome 18和IE10裡的不同表現。
function UIDraw(){
}
UIDraw.prototype.Draw = function(){
       for (var i = 1000; i >= 0; i--) {
              var test_box = document.getElementById("test_box");
              test_box.innerHTML += '<span>'+ i + '</span>';
       };
}
 

測試的對象很簡單，就是找到Id為test_box的HTML對象，迴圈拼接1000次字串，添加到該對象中。
YUI測試代碼：
//2個待測試對象
var ui1 = new UIDraw();
var ui2 = new UIDraw();

//將UIDraw對象註冊到YUI Profiler中
YAHOO.tool.Profiler.registerConstructor("UIDraw", window);
//分別執行2個對象的方法

ui1.Draw();
ui2.Draw();

//得到反饋報告並輸出
var report = YAHOO.tool.Profiler.getFunctionReport("UIDraw.prototype.Draw");
console.log(report)
 

IE10的表現比我預計的慘烈：

 

其中,avg就是平均執行時間，calls是被調用次數，max最大執行時間，min最小執行時間

 

再來看看Chrome18的表現：

比IE10少消耗約1/3的時間。
 
因為我調用的註冊方法是YAHOO.tool.Profiler.registerConstructor，它對所UIDraw對象進行測試，如果是YAHOO.tool.Profiler.registerObject的話，那麼僅對被註冊的對象進行測試，如YAHOO.tool.Profiler.registerObject("ui1");那麼不在對ui2的效能做測試了,後續代碼也需要做修改，將var report = YAHOO.tool.Profiler.getFunctionReport("UIDraw.prototype.Draw");改為var report = YAHOO.tool.Profiler.getFunctionReport("ui1.Draw");
代碼如下：
var ui1 = new UIDraw();
var ui2 = new UIDraw();
YAHOO.tool.Profiler.registerObject("ui1");
ui1.Draw();
ui2.Draw();
var report = YAHOO.tool.Profiler.getFunctionReport("ui1.Draw");
console.log(report)

 
大家不妨自己動手實踐下。