아주 작은 함수 실행 시간 디버거 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);

크롬과 Firefox에 비해 후자의 집행 시간은 약간 짧다.IE의 경우 전자의 실행 시간이 약간 짧습니다.
여기서 start와 stop 방법은 함수 내부의 코드 실행 시간에 대한 테스트에 사용되며, 간단하게 템플릿을 작성합니다.

function tester() {

    //  1 ...

    

    var timer = new Timer().start();

    //  2 ...

    timer.stop();    //  2 

    

    //  3 ...

}

성능에 영향을 미칠 수 있는 모든 코드를 테스트하는 데 사용할 수 있습니다.
　　 
한 마디로 하면 이 아주 작은 시간 디버깅기는 날로 보완되어야 한다. 기능의 확장점은 여러분들이 많이 제공해야 한다. 모두가 함께 생각하고 js의 실행 시간을 더욱 잘 디버깅해야 한다.