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