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:

  1. All tests were done under OS with latests updates applied (Windows XP SP3, Ubuntu 8.10, Windows 7 Beta 1)
  2. Slickspeed was run three times per browser with emptied cache and restart between each iteration.
  3. The average from all tests results rounded to integers were taken in account for the chart.
  4. Nothing else was running during the tests.

Results per browser:
Javascript Frameworks Performance ComparsionResults per framework:
Javascript Frameworks Performance Comparsion

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.

Glenn Vanderburg 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.

Be Sociable, Share!

Tags: , , , , , ,

63 Responses to “MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revised”

  1. Nice Framework Comparison (mostly on selector speed) » Clientcide (Formerly CNET's Clientside) Says:

    [...] 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 [...]

  2. Josh Powell Says:

    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

  3. Eric Says:

    Any chance this post could be revised to include jQuery 1.3?

  4. Switching from Prototype to jQuery - Aleem Bawany Says:

    [...] Jan 17: The latest performance benchmarks came in around pretty much the same time I made this post. Prototype has embarassingly poor [...]

  5. Peter Says:

    @Josh thanks for the link. I have updated the post with some info(links) about this release.
    @Eric check the post again

  6. SeanJA Says:

    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 ;)

  7. Chi seleziona più velocemente? « seltzlab Says:

    [...] 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à [...]

  8. Simon B. Says:

    Just a suggestion for clearer colors next time! :-)

  9. Russ Brooks Says:

    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.

  10. Russ Brooks Says:

    Sorry. I just read that TraceMonkey *is* active in Beta 2 by default. It was not in Beta 1.

  11. Alexwebmaster Says:

    Hello webmaster
    I would like to share with you a link to your site
    write me here [hidden]@mail.ru

  12. Akubot Says:

    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?

  13. Peter Says:

    @Alexwebmaster – you can find my mail on the home page

  14. Moodang Says:

    How did you produce these graphs? What program did you use? Very nice looking.

  15. Peter Says:

    @Moodang – Excel

  16. Petr Buben Says:

    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

  17. Peter Says:

    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

  18. Adrian Kalbarczyk Says:

    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.

  19. Short JavaScript Frameworks Survey | Kyle Hayes Says:

    [...] 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 [...]

  20. gregory Says:

    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

  21. Costruire un tema: gli effetti speciali. - …time is what you make of it… Says:

    [...] perché ho cercato qualche benchmark che potesse darmi una risposta. E’ pur vero che per piccole funzioni la differenza di tempo [...]

  22. Chris Says:

    Can you update with the latest Dojo version, 1.3? It seems faster than before and they now support IE8.

  23. David Says:

    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.

  24. Nick Says:

    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.

  25. Emiliano díaz Says:

    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.

  26. Peter Says:

    @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/

  27. Emiliano díaz Says:

    No problem and thanks.
    I will check the link.

  28. FB Series: Integrating JS « Übersoftware Says:

    [...] Wikipedia – to get a feeling on the featuresunbiased functional comparisonStackoverflow comparing JQuery Dojo and morePerformance comparison [...]

  29. JQuery is COOL | Contactmind - Relationships working for you Says:

    [...] wikipedia, I specifically like the demo explorer of rialto. If you are curious about performance, here is a nice comparison. ▼ ▲ ▼ ▲ ▼ [...]

  30. JQuery versus Dojo versus YUI « Tech blog Says:

    [...] 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 [...]

  31. Ian Says:

    @ 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.

  32. mario Says:

    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.

  33. tm65 Says:

    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.

  34. Peter Says:

    @tm65 – if you are using MS technologies (.net, silverlight) I would suggest jquery, if not mootools

  35. Dhirendra Says:

    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.

  36. Peter Says:

    @Dhirendra – at least have a basic knowledge.

  37. Jeena Says:

    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?

  38. Peter Says:

    @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.

  39. guy Says:

    ? are longer bars better? or are shorter bars mean faster and better?

  40. Zeno Davatz Says:

    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

  41. Peter Says:

    @Zeno – data is exactly the same just ordered per browser/framework

  42. Zeno Davatz Says:

    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.

  43. Peter Says:

    @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!

  44. Rendy Says:

    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.

  45. Tobby Says:

    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.

  46. Peter Says:

    @Tobby – jquery or mootools

  47. Kuba Says:

    @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.

  48. morz Says:

    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!

  49. Chris Says:

    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!

  50. WayneB Says:

    Why would you force people to read an ENTIRE article just to know what the x-axis represents?

  51. Peter Says:

    @WayneB I’m not forcing anyone reading this post

  52. Chandan Says:

    Nice observation. Helped me lot

  53. littleant Says:

    UNWISE!!!
    Comparing the uncomparable… really!
    Comparing jQuery or Dojo to PrototypeJS is like comparing a dirtbike to an assault tank.
    The dirtbike may get you there at first for a little recognition mission but the assault tank will get there for sure and will complete the job no matter what. Anyone serious about Web Applications (and not just lilly Web Site with a couple amuse-bouche) knows the power and sophistication of prototype. Sorry to take side but this test seems be trying to keep you away from Prototype to keep you buying unnecessary complex & expensive Adobe crap… There is a lot more to comparing those libraries than how fast can one of your wheels spin? My advice grab a book on each of those libraries read them and by the end you will know what really matters and why.

  54. Michael Says:

    Thanks, great article and interesting comments. I recently chose jQuery to include for fancy stuff in the intranet web application I developed with Java, JSP :) I’ll also move AJAX handling to it when I can – good riddance, but at least now I know AJAX well. This article made me consider YUI more closely. I actually just saw it in another app we use when I just thought to check what it might be using. I guess I’ll stick with jQuery though. The different syntax is a bit annoying, though nice to be less verbose, but it seems like jQuery has the most momentum behind it. Is this true? I don’t need a ton of features, just really basic stuff, so I was planning on using jQuery without plugins if possible. They actually just added the one thing I was looking for to start small with – Tooltips.

    Peter, you recommend jQuery (or mootools) over YUI in the comments. What are the reasons?

  55. Naman Says:

    Hey thanks for this, Peter.

    I’ve to pick a JS framework for a JS heavy app. No DOM functionality, CSS support doesn’t matter; it’ll be mainly widgets that interact with each other and the server with ajax calls. So events, code architecture, performance make all the difference.

    After looking through this post and all the given links, I’m leaning very heavily toward YUI because of the architecture. Thanks.

  56. JavaScript keretrendszerek összevetése « Szoftver aktualitások Says:

    [...] MooTools vs jQuery vs Prototype vs YUI vs Dojo Comparison Revised (2009. január 16., updated: 2009. február 3.) [...]

  57. Aeuce Says:

    For all who are asking questions like: Which are better – long or short?

    If you are reading this article, then you should _really_ know this. Why would you read it if you don’t understand even basic browser measurements, or even javascript? (Which, if you did not know, what this article is _all_ about)

  58. webdesigner Says:

    thanks for sharing with the useful info

  59. Robert Says:

    A really nice comparison and helpful comments, as some commenter said, it would be a help to write that shorter is better and a new test using the newest builds, for example YUI 3.3. Thank you Peter.

  60. Kenneth Says:

    Great comparison. Thanks for the write-up. ‘Would love to see it updated to latest versions if you get time-

    Thanks again-

  61. Comparision: Prototype, Dojo, jQuery, mootools and SmartClient AJAX RIA Frameworks | vermashailendra Says:

    [...] AJAX RIA Frameworks. Below are my findings on the same: 1. Prototype framework favorable links: http://en.wikipedia.org/wiki /List_of_Ajax_frameworks http://www.javabeat.net/articles/12-comparison-of-ajax-frameworks-prototype-gwt-dwr-and-1.html [...]

  62. Gary Says:

    I’m guessing lower is better?

    You really should leave some kind of comment somewhere explaining that.

  63. Nimbus Says:

    What do the number mean in the charts? The articles seems well thought out but if you have not used slickspeed before the numbers don’t really have any meaning. Do the number represent the number of actions over a fixed time or do they represent the time required for a fixed number of actions? And which actions and time?

    Thanks for the article though.

Leave a Reply