Reading about the jQuery 1.3's new selector engine Sizzle and its speed improvements I thought I would do a performance comparison between jQuery 1.2.6 and jQuery 1.3. I was prepared for something good, but the test results blew my mind.
I had a page with one unordered list with 1000 items each with a class (class="1", class="2", etc).
Here is are the tests and results:
console.time("testClass"); for(i=0;i<100;i++){ $('.'+i); } console.timeEnd("testClass");
/** * jQuery 1.2.6 1235 ms 1326 ms 1342 ms ======= 1301 ms */ | /** * jQuery 1.3 54 ms 52 ms 53 ms ======= 53 ms */ |
As you can see the new selector engine is freakishly fast :) Actually with this specific test it is 25 times fast. Taking into the consideration that class selection is one of the most used selectors, we can assume that our code will work considerably faster.
NOTE:
I have performed the same tests with selection with id
's. The result were exactly the same (9 ms). Taking into the consideration that both versions of jQuery use browser's built in getElementById()
function for ID
selections, there is not much one can do to beat that.
What browser was this on? I believe that some of the newer, decent browsers (FF 3.1, Safari, Opera) have the document.querySelectorAll function which would help a lot. The performance increase mightn't be as dramatic in Internet Explorer... (but screw those people).
ReplyDeleteEnjoyed reading your jquery insights. Keep up the good work!
ReplyDeleteTests were performed in FF 3.0.5
ReplyDeleteIn IE7, whether an element is hidden or not, Sizzle is always returning false for :hidden. It works in Firefox, Chrome, Safari, Opera, and it even works in IE7 if the doctype is HTML, but not if it's XHTML.
ReplyDelete