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)

 

大家不妨自己动手实践下。