Testing jQuery.fn.each vs Native Loop

by martinaglv

HTML

<ul>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
    <li>This is a li</li>
</ul>

CSS

ul{
    display:none;
}

JavaScript

var console = {
    times:{},
    time:function(name){
        this.times[name] = +new Date();
    },
    timeEnd:function(name){
        $(document.body).append('<div>'+name+' : '+((+new Date()) - this.times[name])+' ms</div>');
    }
};

var arr = $('li'),
    iterations = 100000;

console.time('Native Loop');

for(var z=0;z<iterations;z++){
    
    var length = arr.length;
    for(var i=0; i < length; i++){
      arr[i];
    }
}
console.timeEnd('Native Loop');

console.time('jQuery Each');

for(z=0;z<iterations;z++){
    
    arr.each(function(i, val) {
      this;
    });
}
console.timeEnd('jQuery Each');