Sunday, October 15th, 2006

Benchmark: Prototype and jQuery

Category: Prototype

Claudio Cicali thinks benchmarks are boring and useless, so he decided to conduct a series of micro-benchmarks of CSS selector tests with both Prototype and jQuery. He decided to do this after he saw others observe:

  • Prototype (1.5+) has CSS selector syntax now
  • “jQuery is horribly SLOW”

Some Examples

javascript

  1. Add event test:
  2.  
  3. // For jquery:
  4.  
  5.     for (var i=0; i < 100; i++) {
  6.       $('#test').bind('click', function() { alert(this) })
  7.     }
  8.  
  9. // For prototype:
  10.     for (var i=0; i < 100; i++) {
  11.       $$('#test').each(function (el) {
  12.         Event.observe(el, 'click', function() { alert(this) }, true)
  13.       }
  14.       )
  15. }
  16.  
  17. (NOTE: could have used the new $(el).observe('click', function() {...}) syntax)
  18.  
  19. Add class test
  20.  
  21. // For jquery:
  22.     for (var i=0; i < 1000; i++) {
  23.       $('.test').addClass('another')
  24.     }
  25.  
  26. // For prototype:
  27.  
  28.     for (var i=0; i < 1000; i++) {
  29.       $$('.test').each(function(el) { Element.addClassName(el, 'another') })
  30.     }

jQuery Prototype Benchmark

Posted by Dion Almaer at 2:34 pm
17 Comments

+++--
3.6 rating from 71 votes

17 Comments »

Comments feed TrackBack URI

[…] Ya era hora que alguien se pusiera ha hacer pruebas de entre las librerías JS más conocidas, en este caso ha tocado Prototype y jQuery. Parece que la conclusión a dicho benchmark es claro y rotundo. […]

Pingback by Prototype vs jQuery - aNieto2K — October 15, 2006

Prototype is very slow to process a large resultset. I’m guessing these tests were performed on very small DOMs.

These benchmarks are probably meaningless.

Comment by Dean Edwards — October 15, 2006

Meaningless, yes, just about every benchmarks and statistics :) My tests were run just to have a “feel” of how they COULD compare. DOM was very simple.

Maybe I could only have helped someone (with more spare time), to test more complex DOMs having not to re-think which KIND of tests to perform (or, yes, part of them) ;)

As you asked, code is here: http://claudio.cicali.org/files/benchmark_j.html
http://claudio.cicali.org/files/benchmark.html

Comment by Claudio Cicali — October 15, 2006

I agree with Dean; also, which browser did you use for these benchmarks? Prototype is even slower on IE.

Comment by Rob Gonda — October 15, 2006

Addevent test in jQuery could also have been:

$(‘#test’).click(function() { alert(this) });

No idea on the speed differences.

Would love John Resig’s thoughts on this testing overall!

You there, John?!

– Alister

Comment by Alister Cameron — October 15, 2006

I like JQuery’s easy pattern following the CSS selection. also, i like most the power of prototype.. definitely this post is worth some time ..

Comment by Google Logs — October 16, 2006

[…] Dion Almer reports […]

Pingback by jQuery is Slow! huh! « Mental Vomits — October 16, 2006

results doesn’t change my choice… besides the person doing the benchmark is a prototype user, c”,)

jquery still rules for me!

Comment by r00t — October 17, 2006

Cute. The guy does some tests, notes that it looks like that jQuery isn’t actually much (if at all significantly) slower than Prototype, and the jQuery fans bridle and try to cast the thing as a hit piece.

Comment by Eric — October 17, 2006

Try Simon Willison’s document.getElementsBySelector, that’s even faster. I’m using jQuery and Prototype for a few different projects. After screwing with the selector syntax, I finally decided to drop it for both frameworks and go with Simon Willison’s solution.
I think there were an early post about a blog post “Misleading of jQuery”. In that blog, there were a long discussion on this issue and some one even made a test script to compare the speeds. The results are very clear, Simon Willison’s function is lightweight and hella faster. Here’s the link to the test http://commontags.com/test/CSSselectors-benchmark.htm

Link to Simon Willison’s solution:
http://simon.incutio.com/archive/2003/03/25/getElementsBySelector

Comment by Simon Jia — October 17, 2006

With jQuery’s class selectors, I have found that it is much faster to be more specific with the selector by writing $(‘div.test’) instead of just $(‘.test’). The speedup I noticed when being more specific was significant.

Comment by Mike Chabot — October 17, 2006

Hi,
I’ve developed many script module (With prototype) doing lots of initialization onLoad with $$(‘DIV.classname’)

Then I tried to override $$ by
– Prototype document.getElementsByClassName
– Simon Willison document.getElementsBySelector
– JQuery (not already test)

Even if there is little difference (some ms) in bench. Each implementation seems to be too slow (especially with IE).

So using a given js lib or an other will not resolve performance issues…

Comment by Jean-Philippe Encausse — November 24, 2006

Could you repeat that test with jQuery 1.1, please?

jQuery 1.1 is many times faster than Version 1.0.1

Thanks,
John

Comment by John — February 3, 2007

Here’s my dilemma:
jQuery seems great, code looks much more simpler.
But, script.aculo.us have the SlideDown effect just the exact way I want (really sliding the content down) as jQuery doesn’t (it just resizes the container and the content remains static, masked by the container).

So I’m very foward script.aculo.us. But it uses Prototype, not jQuery.

I can’t decide to use either jQuery or Prototype + script.aculo.us…

Comment by Rafa Soares — November 21, 2007

Dilemma (apparently) solved.
In another bost in this blog, I’ve found Interface Elements for jQuery.
It has just the effects I want, the way I want (and a bit more).

I’ll just see how good it is to use.

Comment by Rafa Soares — November 21, 2007

~ jQuery:

– Fast development:
Does this need any further explanation? If so, compare jQuery code with basic JavaScript code and you’ll find out.
– Amazing cross-browser effects
Amazing effects can be created with support to the popular browsers. Most of the jQuery effects out there are created basicly which reduces the size of the add-on and means that effects can be customized into richer looks only when wanted. In other words: download the add-on and use the smaller basic plugin or customize it into a larger and richer plugin whenever needed.
– Easy hackable:
Even though the jQuery website does not have an amazing tool to customize the framework to meet your needs such as the mootools website has parts of the framework code can be removed if not used without causing any problems. This requires a bit more technical knowledge, though.
– Readability high on larger projects:
The coding is much smaller than most of the JavaScript frameworks but this certainly doesn’t mean that it affects readability as a disadvantage, so readability stays high on larger projects.
– Performance:
The more complicated jQuery selectors are known to be quite slower than frameworks such as Mootools and Dojo, but, unless you require every millisecond of performance gain, there is no noticeable difference between jQuery and prototype on that matter.

Browser compatibility: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

~ Prototype (compared to jQuery):

– Amazing cross-browser effects
– Slower development
– Larger in size:
More code to write + larger framework
– Slightly faster

Browser compatibility: IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.25+

External links:
– 4 popular Framework selector speedtest: http://mootools.net/slickspeed/
– Framework comparison: http://www.ja-sig.org/wiki/display/UP3/Javascript+Toolkit+Comparison

Note: this comparison is based on my own opinion (and perhaps from a lot more jQuery users) and the comparison isn’t very throughout as my knowledge is limited on frameworks other than jQuery.

Comment by Earth — February 28, 2008

Helllo !!

I suppose I’m a bit late to post something here … but I have seen this really interesting test: http://jst.pbwiki.com/

ciao, r

Comment by robertrv — March 26, 2008

Leave a comment

You must be logged in to post a comment.