Tuesday, April 15th, 2008

jQuery and Prototype Benchmarks

Category: JavaScript, jQuery, Performance, Prototype

Piotr Solnica did a couple of posts on jQuery and Prototype benchmarks back in the day, and John-David Dalton just found them.

In part one, he runs tests such as:

javascript

  1. $('td.first').addClass('marked'); // jQuery
  2.  
  3. $$('td.first').each(function(cell){
  4.   cell.addClassName('marked');
  5. });
  6.  
  7. // or
  8.  
  9. $$('td.first').invoke('addClassName', 'marked');

and concludes:

Executed tests show that Prototype seems to be faster then jQuery, with the exception of the new insertion method, which performance should be improved. Although I like jQuery syntax more then Prototype, the performance is way more important then saving few lines of code. Of course tests that I made don’t show how these libraries act in a real application, which is my task for the next part(s) of this article. Despite the results I must admit that I’m very excited about jQuery, my general impression is that this library is more mature then Prototype.

In part two, Piotr uses a custom JavaScript-based testing environment instead of running tests using Firebug profiler. This allows the test suite to run in many browsers, and this time concludes:

Prototype was at least 2 times faster then jQuery in 15 cases, and jQuery was faster then Prototype in 8 cases. What library should I choose? In my case I will stick with Prototype, because it offers the same functionality as jQuery does + more and it’s faster. jQuery is probably better for projects where there’s a need for some fancy UI effects and that’s it, but it’s just an assumption, correct me if I’m wrong…

Posted by Dion Almaer at 5:13 am
16 Comments

++++-
4.5 rating from 170 votes

16 Comments »

Comments feed TrackBack URI

Isn’t the main difference between Prototype and jQuery that Prototype extends DOM methods which is problematic (see the workaround for the next versions of Firefox) in many eyes?

Comment by Albert Kühner — April 15, 2008

“lthough I like jQuery syntax more then Prototype, the performance is way more important then saving few lines of code.”

Maintainability is just as important as speed. I would sacrifice some speed for a few easier lines of code to read…

Comment by Steve — April 15, 2008

I tend to see the main difference in Prototype vs jQuery in that the first offers some OO stuff while the second tries to promote a more functional style.

I personally don’t need/like “uglying” Javascript with inheritance OO models, so I tend to prefer jQuery better. Choosing a library purely on performance criteria is not something I’d do anyway. Specially when they’re not so far apart from each other.

Comment by Venkman — April 15, 2008

Mootools developers all over the web are making awesome plugins. That’s why I use it. Not because of some benchmark.

Comment by Jordan — April 15, 2008

I love moo too, that’s why I “ported” it’s class system to jquery; not a big deal though it’s not uglying imho :)

Comment by deadcabbit — April 15, 2008

Interesting. Yesterday I took the source of jquery 1.2.3 and replaced every .each with for loops, and every call to jQuery.extend to jQuery.prop=value….Then I ran some DOM tests over a few thousand elements and found the optimized version to be 10-15% faster. Of course, it’s not practical for me to keep this version as merging new versions of jQuery would be incredibly time-consuming…but I was curious to see the results….The next test I’d like to do is eliminate many of the closures within the source.

Comment by luke — April 15, 2008

One, I wonder if anything has changed since that was 6 months ago as I am genuinely interested. I use and love jQuery but I’m not some fanboy who wouldn’t switch if something else were obviously superior.

Second, most tests I see have jQuery coming out ahead. Anybody care to explain the discrepancy?

Comment by JonBad — April 15, 2008

@JonBad – Look again no discrepancy.
Tests from Feb 08: http://blog.solnic.eu/2008/2/3/jquery-vs-prototype-part-ii
jQuery did a little better but still overall Prototype takes the cake :)

@Steve/Venkman – Maintainability/Readability/Uglying??
The syntax between the two are very similar :P.

@ Albert Kühner Prototype extends natives such Number, Math, RegExp, String, Array and Elements (future versions of Prototype may avoid the extension of elements by using a wrapper)

Comment by jdalton — April 15, 2008

jdalton: I simply don’t care for inheritance-based OO in Javascript. Just that. I didn’t imply anything about the syntax, just the style.

Comment by Venkman — April 15, 2008

>>Second, most tests I see have jQuery coming out ahead.

jQuery has not fared well lately in speed tests. Seems like there are all of the sudden several libraries that are super-fast at finding page elements. Example: http://www.domassistant.com/slickspeed/

I know John Rsig hates those tests because some or most of the selectors tested are rarely used. But still, there’s some ass-kicking going on speed-wise, even if it’s not real-world cases.

jQuery isn’t about speed. It’s about power. If you can write better code with jQuery you may not need the speed of quirky selectors.

Comment by Nosredna — April 15, 2008

Jquery is just way too nice to not use. Even if the performance issue were an issue (which according to slickspeed, JQuery does way better than Prototype) I would still use it just for the well-thought out programming model.

It’s just too clean on the code, whereas the others are just so verbose and large.

Comment by functionform — April 15, 2008

I am not really saying anything about neither the importance of performance nor the “best JS library” though what I AM saying is that with the current focus on JS execution speed in all browsers (ref; “browser JS speed ‘war'”) I think all this will be of very little interest in 6 months from now ;)
We use prototype and we are very happy about it even though it brings some challenges due to extending DOM elements and extending Object etc…
But overall we’re very comfortable with it apart from the fact of that it’s BIG…! :(

Comment by polterguy — April 15, 2008

The slickspeed tests are a flawed mechanism to compare jQuery, because

a) Slickspeed doesn’t account for timer resolution and jitter my blog entry

b) jQuery is a “pure DOM” implementation last time I looked, whereas DOM Assistant uses document.evaluate (XPath), querySelector/querySelectorAll, and other native acceleration depending on browser. An apple-to-apples comparison would have to factor this in if you want to compare raw JS implementation speed.

Comment by cromwellian — April 15, 2008

@polterguy – Prototype hasn’t extended Object.prototype since before ver 1.4 (over 3 years ago). Prototype can be compressed to 20kb, if you are using 1.4 or earlier then it’s around 7kb. Currently there are no major problems with the Element extensions on any of the stable supported browsers (not counting the Firefox betas).
compressed Prototype versions: http://code.google.com/p/protosafe/downloads/list

Comment by jdalton — April 15, 2008

Quote: jQuery is probably better for projects where there’s a need for some fancy UI effects and that’s it, but it’s just an assumption, correct me if I’m wrong…

This is why I moved away from Prototype. I wanted more than “some fancy UI effects”. To their credit, Prototype made this easy, too each.

The biggest hurdle for jQuery is to get the documentation available in PDF format for downloads. Not only core, but also jQuery UI, etc. This is also a big factor

Comment by tohir — April 16, 2008

>>An apple-to-apples comparison would have to factor this in if you want to compare raw JS implementation speed.

I don’t think people care HOW it works.

Comment by Nosredna — April 16, 2008

Leave a comment

You must be logged in to post a comment.