MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revised
Update (02-03-2009):
Recently things are going a bit beyond the healthy conversations and various people are taking the whole “which-is-the-fastest-framework” idea way too seriously. The most important thing in any benchmarking process is not to compare apples to oranges, which unfortunatelly happens too often. After jQuery adopted Sizzle (a selector engine) many people started comparing it directly to Mootools (a framework). As a result Aaron (Clientcide) posted Sizzle and MooTools by the Numbers as an answer to the recent flame-wars on the Javascript Frameworks scene. Apart from only testing and comparing the selectors engines (which is what Slickspeed does) I suggest checking out another post on Clientcide – Comparing Frameworks with Inheritance Benchmarking.
/update end
As my previous post comparing Dojo vs JQuery vs MooTools vs Prototype got quite popular and was included in the Wikipedia’s Comparison of JavaScript frameworks article I decided it is about time to update it with some fresh data and browsers.
For the performance part I used the same tool as before – Slickspeed. If you have forgotten, it tests the selectors which are essential part of any Javascript framework. Currently Slickspeed includes the following frameworks: MooTools 1.2, JQuery 1.2.6 (1.3 see bellow), Prototype 1.6.0.2, YUI 2.5.2 Selector beta and Dojo 1.1.1. Unfortunately some of those are not the latest versions but still are quite recent and I am sure the guys will update it soon. The good news is, as you can see from the list, now it includes YUI which is really strong competitor.
Performance comparison done as following:
- All tests were done under OS with latests updates applied (Windows XP SP3, Ubuntu 8.10, Windows 7 Beta 1)
- Slickspeed was run three times per browser with emptied cache and restart between each iteration.
- The average from all tests results rounded to integers were taken in account for the chart.
- Nothing else was running during the tests.
Results per browser:
Results per framework:
Since this time the comparison includes a lot more browsers and frameworks the raw data table is in separate html file.
Remarks:
- FF refers to Mozila Firefox, IE is Internet Explorer and Win7 is Microsoft Windows Seven
- 3 Dojo selectors failed under both Mozilla Firefox 3.1 Beta2 and Safari 3.2.1
- 11 Dojo selectors and 4 YUI returned invalid results (failed) under Internet Explorer 8
Failed tests mean lower final time under the listed above browsers which was especially valid for Dojo under IE8 where the summary time was around the obviously impossible 1ms .
Update (jQuery 1.3): When I started writing this post the latest jQuery version was still 1.2.6 but on January 14-th they released 1.3 with lots of performance changes. The dev team have replaced the whole selector engine with Sizzle which gave a noticeable performance boost to the framework. The official jQuery website is providing Slickspeed test results which indeed show big improvement among the other interesting changes in this release.
Summary:
I have done my best to be as objective as possible. As you can see I have tested twelve browsers and for each I ran Slickspeed three times. However those benchmarks are very hardware dependent so on different computers the results may vary. Still the chart (proportions) should look quite similar to the ones above. If you have very different times please contact me so I can double check again and update if needed.
Since performance should not be the only criterion for choosing a Javascript framework here are couple thoughts on the design differences between some of them.
does great comparison between Prototype and JQuery code design in his Why I still prefer Prototype to jQuery blog post.
And here’s the capsule summary: jQuery is a very nice piece of work, and makes some common tasks easier than their Prototype equivalents. Where it’s good, it’s very good indeed. But its design is uneven, and its scope is limited. For me, at least, Prototype is still the tool of choice. I think it’s a richer, more thorough, and overall better designed library.
A good resource on Dojo is Dylan Schiemann’s post Debunking Dojo Toolkit Myths were he addresses file size, performance, documentation, usage and bunch of other topics.
And ofcourse no comparsion is complete without my favourite JS framework Mootools. When it comes to What’s Moo I am a big fan of Aaron Newton and his blog Clientcide (was previously Clientside when he worked for CNet). On several occasion Aaron wrote about differences between jQuery and Mootools:
When I wrote that post, I went out of my way to make the point that jQuery is different than MooTools, but not, in my view, either inferior or superior. Just different.
I suggest to read those posts jQuery, MooTools, the Ajax Experience, Programming to the Pattern, and What Really Makes One Framework Different From Another and How Many Flavors of Linux Are There?. A good thing to do is subscribe to his RSS feed since apart from the strictly Mootools topics there are many general ones which will help anyone using whatever framework.
Another good piece of information that may affect your choice is that Microsoft and Nokia are adopting jQuery and will be integrated in Visual Studio. However if you are using Aptana there is already support for most of the frameworks including Mootools.
The point of this post is not to start another flame war on which JS framework is better. Each one does what it was supposed to do and has its supporters.
I am open to any reasonable suggestions about the above content.
Tags: dojo, JavaScript, javascript framework, jquery, Mootools, prototype, yui
However I tend to disable it for small blogs like this one. If you would like to help me pay for my webhosting please allow your Adblocking software to show adverts from this site. Thanks!
January 16th, 2009 at 7:58 pm
[...] Velichkov has a nice post up comparing all the frameworks (MooTools, jQuery, Prototype, YUI and Dojo). It’s 1 part Slickspeed comparison and 1 part [...]
January 17th, 2009 at 12:23 am
Just an fyi, but with the release of jQuery 1.3, a bunch of slickspeed tests were also demonstrated.
http://docs.jquery.com/Release:jQuery_1.3#Performance
January 17th, 2009 at 1:26 am
Any chance this post could be revised to include jQuery 1.3?
January 17th, 2009 at 5:43 pm
[...] Jan 17: The latest performance benchmarks came in around pretty much the same time I made this post. Prototype has embarassingly poor [...]
January 19th, 2009 at 2:29 pm
@Josh thanks for the link. I have updated the post with some info(links) about this release.
@Eric check the post again
January 20th, 2009 at 2:39 pm
Might want to consider labling those tables… I was a bit confused about what was going on prior to reading what was under the tables. Good comparisons though, still doesn’t convince me to stray from the jQuery path though
January 22nd, 2009 at 5:20 pm
[...] web programming Peter Velichkov ha deciso finalmente di ripetersi e ha pubblicato nel suo blog una versione aggiornata del suo speed test dei più utilizzati framework Javascript. Oltre ai già [...]
February 6th, 2009 at 1:50 pm
Just a suggestion for clearer colors next time!
February 13th, 2009 at 11:52 pm
A great comparison. Thank you! One small possible oversight. You neglected to mention if TraceMonkey, Firefox’s new JavaScript engine, was active in FF 3.1 Beta. From what I understand, FF 3.1 Beta comes with TraceMonkey disabled. Apparently, it is enabled in the nightlies, but not the Beta *release*. To activate it, you must go into about:config as outlined here: https://wiki.mozilla.org/JavaScript:TraceMonkey
I would be curious to see the results after doing that. They are claiming some wild speed increases using this Trace Tree technology.
February 13th, 2009 at 11:58 pm
Sorry. I just read that TraceMonkey *is* active in Beta 2 by default. It was not in Beta 1.
March 3rd, 2009 at 1:45 pm
Hello webmaster
I would like to share with you a link to your site
write me here [hidden]@mail.ru
March 3rd, 2009 at 7:52 pm
It would be helpful if you would state what the dimensions and units are in your charts.
Is the X-axis “time in seconds” or something else?
March 3rd, 2009 at 9:48 pm
@Alexwebmaster – you can find my mail on the home page
March 9th, 2009 at 1:14 pm
How did you produce these graphs? What program did you use? Very nice looking.
March 9th, 2009 at 2:46 pm
@Moodang – Excel
March 24th, 2009 at 2:20 am
hi,
how safe/controversial is to say now, from these tests, that Opera is the fatest browser outthere, followed by Google Chrome and Safari, for an “everyday average browsing”?
thanks
March 24th, 2009 at 3:13 am
Not safe at all.
1. Things change very fast with each new release of the browsers
2. One browser might be fastest at one thing and slow for other
March 30th, 2009 at 5:15 pm
Why did you use YUI 2.5 when there is 2.7 available since 2009-02-18 (and of course 2.6 long before)?
Please add info about YUI StyleSheet module (it can increase performance in most cases where you using selectors) and, since there is link on wikipedia to this page, it is crucial to tell people that selectors performance is only one of performance issues, somewhere in the beginning of article. For me it’s not so important, because I can write code that keeps references to all needed elements, use the stylesheets and know how to use XPath. Other factors of libraries are much more important for me.
Here is my thoughts on choosing JS framework/library:
If you are good programmer with great experience (know functional, prototype-oriented, event-oriented paradigms) you should choose between YUI and Prototype. For me YUI is more complete and easier. When you are designer who knows HTML, CSS and Photoshop you would rather use other frameworks where you can simply copy and paste example code and it’ll work. You can’t do good application logic in jquery in my opinion – there was another purpose of this project
Please correct me if I’m wrong.
Regards
PS. Nice looking site. I like when it’s simple, readable and looks great.
April 4th, 2009 at 12:10 am
[...] be spreading the word on the results of this survey. In addition, I’m also aware of the existing posts available in regards to the measured speed of these [...]
April 10th, 2009 at 10:11 pm
Hi, interesting post – any chance you could use the latest jQuery? At this point it’s 1.3.2 – not sure but might be able to get nightly builds for 1.4
April 14th, 2009 at 1:24 am
[...] perché ho cercato qualche benchmark che potesse darmi una risposta. E’ pur vero che per piccole funzioni la differenza di tempo [...]
April 23rd, 2009 at 7:12 pm
Can you update with the latest Dojo version, 1.3? It seems faster than before and they now support IE8.
May 2nd, 2009 at 10:47 am
To the uninitiated (read: me and probably a lot of others not yet acquainted with Slickspeed), it first appears that higher scores are better … but the reverse is true. It would help if this is clearly stated, something like “Results per browser (lower scores are better):”.
This prevented me drawing helpful conclusions from your otherwise informative article, until I realised my mistake.
May 19th, 2009 at 12:39 pm
Firstly, great post, but really needs to be updated to the latest version (e.g. YUI 2.7.0 rather than 2.5.2 beta and jQuery 1.3.2 rather than 1.2.6 as there’s been huge changes).
As for which library is the best, I recon it’s really between jQuery and YUI as the rest are falling behind.
jQuery Advantages:
- Core has good performance
- Simple to learn and use
- Small amount of code required to do things
- Lots of plug-ins (also a disadvantage)
jQuery Disadvantages:
- Specific syntax that needs to be learned (although it is pretty simple)
- Not a cohesive solution
- Lots of plug-ins – Requires a lot of time to choose what you need and most plug-ins a hack-jobs that are not very well supported. There is no consistency in the look and feel of plugins. Not all plugins work properly in different browsers.
YUI Advantages:
- Complete Cohesive Solution – Just what you need when building serious web applications. Consistency in the look and feel of widgets (They all look and operate the same)
- Enterprise backed
- Javascript without it’s own syntax
- More complete, cohesive examples for each widget
- More supporting tools around the framework
YUI Disadvantages:
- Requires more code to implement functionality
- Selector is supposedly slower than jQuery, but then the latest version havn’t been compared
- Fewer plug-ins on top of what’s already there
Both libraries work well in cross-browser scenarios.
Ultimately if you need something to give better access to the DOM that’s cross-browser, etc then jQuery is nice, but if you need a cohesive set of widgets to build solutions with rather that waste time selecting plug-ins hacked together by others or hacking up your own then you’re better off going with YUI, particularly if you’re using it for the Intranet where library size and so on isn’t much of an issue and you’re building corporate applications. Obviously jQuery is bundled with ASP.NET, but I still think you’re better off with YUI for this purpose.
June 29th, 2009 at 12:42 am
Intresting post, and sorry, but…
Which is supposed to mean the x-axis? Milliseconds? Score? Please Clarify.
Nick is right.
That is the best way to choose between these frameworks.
June 29th, 2009 at 12:53 am
@Emiliano Correct x-axis is time in MS. Unfortunately I haven’t had time to update this post (it takes at least a full day). In meantime you might give a look at http://jqueryvsmootools.com/
June 29th, 2009 at 1:53 am
No problem and thanks.
I will check the link.
August 17th, 2009 at 12:23 am
[...] Wikipedia – to get a feeling on the featuresunbiased functional comparisonStackoverflow comparing JQuery Dojo and morePerformance comparison [...]
August 19th, 2009 at 11:12 pm
[...] wikipedia, I specifically like the demo explorer of rialto. If you are curious about performance, here is a nice comparison. ▼ ▲ ▼ ▲ ▼ [...]
August 25th, 2009 at 4:41 pm
[...] Wikipedia: Comparison of JavaScript frameworks – Kyle Hayes: Survey Result: JavaScript Frameworks – Peter Velichkov: MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revised – SlickSpeed Selectors [...]
November 3rd, 2009 at 7:19 pm
@ Nick
You missed his entire point that what you are saying are the best solutions (jQuery and YUI) are mostly selector engines. If you want a framework that produces reusable code that can be extended time and time again, MooTools is the answer.
On another note, ASP, eww.
November 18th, 2009 at 11:43 pm
Have to agree with Nick. Having used both jQuery and YUI, each has its advantages. jQuery is great if you want bare metal and some widgets, but jQuery UI pales in comparison to the well thought out YUI library. YUI is well documented, has many examples and as a UI framework is cohesive and at this point probably the most robust javascript library for getting things done. Other frameworks may give oohs and aahs, be smaller, be faster but YUI is well balanced and does everything good enough.
November 25th, 2009 at 11:27 pm
Thanks for the great post. I’m in the process of selecting a javascript framework for my project, and basically come down to a decision between jquery vs YUI. Thanks Nick & Mario for your comments, they help. I would love to see this comparison updated with the YUI 3 performance.
November 26th, 2009 at 1:08 pm
@tm65 – if you are using MS technologies (.net, silverlight) I would suggest jquery, if not mootools
December 8th, 2009 at 12:37 pm
Thanks for the great post. I want to learn j-query for making dynamic pages for my designs. Is it necessary to learn Javascript for this.
Thanks in advance.
December 8th, 2009 at 12:57 pm
@Dhirendra – at least have a basic knowledge.
December 9th, 2009 at 3:08 pm
Graphs are lacking informations. Why in x-axis you don’t write the unit?
In the first graph, Prototype has 200: 200 what? Why didn’t you write “seconds”, “operations/seconds” or whatever?
December 9th, 2009 at 3:24 pm
@Jeena – please excuse me for this, I’m so ashamed that i’ll not go out for months.
1st – If you have read the article you would know what the units are.
2nd – Not that you have paid anything for this information.
December 11th, 2009 at 6:47 pm
? are longer bars better? or are shorter bars mean faster and better?
December 14th, 2009 at 8:08 pm
I do not quite get the difference between the two diagrams. According to diagram #1 (Results per browser) Jquery is best. According to Diagram #2 (Results per framework) Dojo is fastest. Can you elaborate a bit further about that please.
Thanks
Zeno
December 14th, 2009 at 10:02 pm
@Zeno – data is exactly the same just ordered per browser/framework
December 15th, 2009 at 10:55 am
Thanks for your Update. The colors may have confused me. I got another question: Do you know of these test sites: http://dante.dojotoolkit.org/taskspeed/ http://dante.dojotoolkit.org/taskspeed/report/charts.html?exclude=defaultbrowser0
Obviously Dojo 1.4 should be faster with IE8 now.
December 15th, 2009 at 11:59 pm
@Zeno – Haven’t checked those sites, the comparison is a bit out of date now, but redoing it means at least a day which I don’t have currently.
Happy holidays!
December 22nd, 2009 at 12:14 pm
I was hoping to get some feedbacks on Dojo, but it seems like nobody really use them. Can someone give me an answer. After reading through the comments it seems that YUI and MooTools sounds promising for my project.
February 6th, 2010 at 2:56 am
Thanks for putting such a great chart and supporting comments from yourself and visitors.
Just wanted some advice… I’ve just started web development and learned XHTML /CSS and Javascript (I have good exp in application development using oracle tools). I heard about jquery from our tutor and downloaded it today.
Whilst surfing, I found your website and came to know about YUI and prototype. what do you suggest me to learn Jquery or YUI or prototype ? considering I’ve (part of a small team) just started developing a website which will have Content Mgmt System and lot of database calls to prepare online shopping/ generating online reports etc. and it should have nice easy to use interface.
What I (we) should use or learn Prototype, Jquery or YUI. We may be developing our oracle application using web technologies. other teams are using Java, JSP Javascript but no one is using Jquery etc. to build web solutions.
I’ve just started learning web techs, so it would be easy for me to grab one out of these three and enhance my skills
Thanks.
February 8th, 2010 at 1:05 am
@Tobby – jquery or mootools
February 15th, 2010 at 3:28 pm
@Rendy
Of course many people use Dojo, me as an example
for my own projects and it’s used at my company as well in almost all projects. I find it very well designed, but it might be not the best choice for a JS beginner.
@all mad posters
Are you getting paid for advertising any of the above? Relax. There are always much more conditions to decide which framework would be the best choice for some project…
@author
Thanks for that nice piece of comparison and I hope oneday you find some time to continue.
Regards.
March 6th, 2010 at 4:28 pm
Good comparison! I’m prefer to use mootool in my new project (http://quickmessageapp.com) . Yes I admit JQuery and Prototype are good also, but it just a matter of taste!
March 16th, 2010 at 1:32 am
Thanks a bunch! Gave me a great start in finding a JS framework!
I actually ended up choosing ExtJS and it has been wonderful so far. Too bad many shy away not understanding the open-source part of their dual-licensing scheme…
Anyways, I would love to see ExtJS compared in your next update!