This post is an outcome of 15 minutes of free time and a question that I had yesterday. This question were:
- How fast jQuery’s
.each()method is? - How does it compare to javascript’s native
forloop?
It is clear without any performance tests that native javascript for loop is faster, but I always used jQuery’s .each() utility with caution. It always felt like I will get a performance penalty for using it. So I tried to never use it.
So today, I wrote up a little javascript performance test and got my answers. Basically, I created an array and iterated through it using native for loop and jQuery’s .each() iterator. All I did was just an iteration and no array amendments or any other logic. I know it is very basic, but that’s exactly what I want to know. How fast they iterate!
Performance test code:
console.time('TestNative');
for( i=0; i < myArray.length; i++){
myArray[i];
}
console.timeEnd('TestNative');
console.time('TestjQuery');
jQuery.each(myArray, function(i, val) {
val;
});
console.timeEnd('TestjQuery');
Performance test results:
JavaScript Native FOR loop Array size Time ========== ====== 10,000 7ms 100,000 62ms 1,000,000 613ms jQuery .each() loop Array size Time ========== ====== 10,000 10ms 100,000 177ms 1,000,000 1100ms
As you can see native for loop is never over 1ms. That’s probably because we are not doing anything with our array and browser simply optimizes the code or maybe its that fast :)
Usually we don’t have more than 1000 items in our arrays and objects, that is why I guess it can be concluded that using .each() loop in our code will not cause any performance penalties.
10 comments:
By using "lenght" instead of "length", you've optimized the native for loop to run at O(1) speed :)
My results are:
TestNative: 512ms
TestjQuery: 2527ms
myArray.lenght => myArray.length
@paxvel, @js Thanks for pointing out.
I knew there was something wrong here :)
Updating the post!!!
for( var i=0, l = myArray.length; i < l; i++){
myArray[i];
}
var i = myArray.length;
while ( i-- ) {
myArray[i];
}
both of these should speed up your native javascript for-loop a bit.
@js, Yeap, saving .length to variable speeds up the process.
100,000 = 62ms => 38ms
1000000 = 613ms => 370ms
I've never had an qualms about using $.each ... your post is further confirmation that the performance of $.each vs native JS is negligible.
I've found just the opposite. I'm working on a web app right now that iterates through a huge (300+k, 13,000+ line) JSON array, and the original coder had built it using multiple instances of $.each(). While the app ran fine in Firefox and Safari, IE 7 & 6 would both hang for 30 seconds or more, and then eventually throw their "A script on this page is casing Internet Explorer to run slowly and may cause your computer to become unresponsive" error message.
I went through his code and replaced all of the $.each() instances with standard for(x in y) loops and now the app loads in about 10 seconds in IE and nearly instantly in Firefox/Safari.
$.each() is simpler to use and faster to write, and in small loops is still fine to use, but in large applications I'll never use it. It just doesn't scale well.
As a follow up to my last comment, using console.time on $.each() vs for(x in y):
$.each(): 1668ms
for(x in y): 85ms
Um... yeah. Almost TWENTY TIMES FASTER.
Awesome! thanks for showing this testing and result. :)
Post a Comment