很小的一个函数执行时间调试器Timer
对于函数的执行性能(这里主要考虑执行时间,所耗内存暂不考虑),这里写了一个简单的类Timer,用于量化函数执行所耗时间。
整体思路很简单,就是new Date()的时间差值。我仅仅了做了一层简单的封装——
/** * 执行时间调试器 * * Timer类 */ (function(win) { var Timer = function() { return this; }; Timer.log = function(content) { if (typeof console == "undefined") { // IE6/7 if(win.navigator.userAgent.indexOf("MSIE")>0) { alert(content); } } else { console.log(content); } }; Timer.prototype = { // 开始执行时间 start: function() { this.startTime = +new Date(); return this; }, // 结束执行时间,并记录与开始执行时间的差值 stop: function(canLog) { if (canLog && canLog === false) { return this; } Timer.log(+new Date - this.startTime); return this; }, // 指定次数内,函数的执行时间 forFn: function(fn, times) { var start, end; start = +new Date; if (times && typeof times === 'number') { for (var i = 0; i < times; i++) { fn(); } } else { fn(); } end = +new Date; Timer.log(end - start); return this; } }; win.Timer = Timer; })(window);
举两个调式的例子。
首先,测试一下是否使用事件委托绑定事件——
(function(doc, $) { // 创建元素 - 10000个li function createElement() { var ulElement = doc.createElement('ul'), liList = [], i; for (i = 0; i < 10000; i++) { liList.push('<li>' + i + '</li>'); } ulElement.innerHTML = liList.join(''); doc.body.appendChild(ulElement); } // 非委托事件绑定 function bind() { $('ul li').bind('click', function() { alert('bind') }); } // 委托事件绑定 function delegate() { $('ul').delegate('li', 'click', function() { alert('delegate'); }); } createElement(); var timer = new Timer(); timer.forFn(bind); timer.forFn(delegate); })(document, jQuery);
数据就不罗列了,能够看出来,使用事件委托的方式,明显效率更快。
第二个子,列举一下jQuery选择器的效率性能测试——
// 对比ID选择器和类选择器 new Timer().forFn(function() { $('#test'); }, 10000); // 13ms new Timer().forFn(function() { $('.test') }, 10000); // 65ms
如果,这里的test类的元素有两个以上,这里的执行时间会有所递增,但浮动不大。
再列举一下,在Classes前面是否使用Tags的执行时间——
new Timer().forFn(function() { $('.test') }, 10000); new Timer().forFn(function() { $('div.test') }, 10000);
相对于chrome及firefox而言,后者的执行时间略短一些。而对于IE而言,前者的执行时间略短一些。
对于这里的start与stop方法,主要是用于函数内部的一段代码执行时间的测试,简单写个模板——
function tester() { // 逻辑1 ... var timer = new Timer().start(); // 逻辑2 ... timer.stop(); // 便可得出逻辑2中代码的执行时间 // 逻辑3 ... }
可用于测试任何可能影响性能相关的代码。
总之,这个很小的时间调试器有待日益完善,功能扩展点还需要各位博友多提供一些,大家一起思考,以更好的去调试js执行时间。