JQuery iterate over elements vs. JavaScript

http://stackoverflow.com/q/8747086/508537

by briguy37

HTML

<body>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
    <div/>
</body>

JavaScript

console.log('start');
var counter = 0;


var timePerformance = function (func, numRuns, name){
    counter = 0;
    var startTime = new Date().getTime();

    for(var i=0; i<1000; i++){
        func();
    }

    var endTime = new Date().getTime();
    console.log(name + ':  Processed ' + counter + ' elements in ' + (endTime - startTime) + 'ms');
};

var testJQuery = function (){
    $('body *').each(function(){                                var $this = $(this);                                      counter++;                             
    });    
};

var testJavaScript = function (){
    var items = document.getElementsByTagName("*");
    for (var i = 0; i < items.length; i++) {
        var $this = items[i];
        counter++;
    }    
};

timePerformance(testJQuery, 1000, 'JQuery');
timePerformance(testJavaScript, 1000, 'JavaScript');
timePerformance(testJavaScript, 1000, 'JavaScript');
timePerformance(testJQuery, 1000, 'JQuery');