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

最近看完了《高性能JavaScript》，打算寫一系列的文章把知識點鞏固下，盡管工具介紹在書的最后，但是為了能在后續文章中有個更為直觀的認識，我打算先介紹下工具，這樣在演示代碼的時候可以看到性能分析數據更加理解深刻。

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)

 

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