首页 > 程序开发 > web前端 > JavaScript >

Javascript性能分析——工具(YUI Profiler)上

2012-04-06

最近看完了《高性能JavaScript》http://book.douban.com/subject/5362856/,打算写一系列的文章把知识点巩固下,尽管工具介绍在书的最后,但是为了能在后续文章中有个更为直观的认识,我打算先介绍下工具,这样在...

最近看完了《高性能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 += &#39;<span>&#39;+ i + &#39;</span>&#39;;
};
}

测试的对象很简单,就是找到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)


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


摘自 MiserLab

相关文章
最新文章
热点推荐