很小的一个函数执行时间调试器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执行时间。

 

posted @ 2013-11-04 14:45  金广国  阅读(1154)  评论(2编辑  收藏  举报