JQuery, Prototype, and MooTools Benchmark – SlickSpeed

Introduction

Before I even start, let me state that I’m a JQuery fan. Ever since I’ve started with JavaScript frameworks I’ve weighed the pros and cons, and trust me there are a lot. You’ll always find people arguing Prototype, JQuery or MooTools. I went with JQuery because it could do all that I wanted with the least amount of bloat. I’m sorry, Prototype may do a hell of a lot, but I don’t think that I could make enough use or that 100 KB to justify it. Plus, Prototype can’t even handle basics on its own without having to piggy back off of script.aculo.us and it’s effects library.

Speed

Now with every new version of a Framework that comes out, this argument comes up again and again. Finally, we have something to put the arguments to rest.

slickspeed

In my personal testing, I’ve found that JQuery 1.21 leads the pack, but only in Internet Explorer. In Firefox it comes in dead last. Does this discourage me? Maybe a lil’ bit. Am I going to stop using JQuery and switch to Prototype? I think not.

What Do You Need?

It all depends on your uses for said framework. From the looks of it, Mootools looks more like a full fledged programming language. With all the definitions of new objects, etc. If, for some reason I’m needing to build an application in JavaScript then I’ll revisit it. But until now, the most JavaScript that I’ll be doing is so simple effects on elements (shows, hides, slides, class changes, etc) and a couple Ajax requests.

For this I don’t think I should suffer the 120 KB that Prototype has to offer, even though it’s blazing fast in Firefox. With that said, even if I hate Internet Explorer, it is still, by far, the most popular browser out there. So I take comfort in the fact that the majority of my audience is getting the speed benefits of JQuery.

Comments

  1. Well since I love Firefox so much and do not even use Internet Explorer any more I guess I will not get the benefits of JQuery.

  2. You mean the unnoticeable few millisecond delay when using jQuery on Firefox? Yeah, like that’s a real big deal breaker huh?

  3. Hey I’m with you on that one, but many people use that as a deal breaker when choosing a javascript framework.

  4. Hi, Your article was accepted in the First Carnival of Tech at http://www.technologymatter.com/2008/02/first-carnival-of-tech.html
    Please vote for it on social bookmarking sites or comment about it in your blog!

    Thanks!

  5. Mootools rocks, every time, in every browser. I love their code, the way their website shows demos upfront.

    Try getting that on jQuery’s website. And jQuery is usually the slowest on every browser for me. Their demos are very hard to come by.

    Here’s an example of the box functions:

    Moo: http://www.digitalia.be/software/slimbox
    jQ: http://jquery.com/demo/thickbox/
    Proto: http://www.huddletogether.com/projects/lightbox2/

    The “SlimBox” with Mootools framework is easily the smallest of them all. Read the Features section on Slimbox page for a comparison with Prototype/Scriptaculous based thing.

  6. I did a speed comparison with slickspeed under various browsers and OSs

    http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison

  7. Hey what about the plugins , userbase/support , ease of coding of each framework ??

  8. Well, why would I choose between say, Last.fm and Deezer.com? They basically do the same thing – they both play music – but not exactly in the same way (one is running smart radios, and the other plays on demand…)

    Depending on my needs, I pick the one or the other : they also share the fact they’re free and easy to use!

    If you know Javascript, you can learn those libraries in no time, but with little energy I admit. You can even use them on the same web pages, cause they’re not in conflict, they are all just awesome, and getting awesomer by the time I’m writing this.

    PS : awesome blog ;)

    Ben’s last blog post..“Nous avons été visités” affirme un astronaute célèbre

  9. tried the test and seems that Prototype is a much faster framework. I’m currently using both jquery and mootools but it seems Prototype has it’s good point’s I might give it a try also.

    Anyways… great article…

    • Make sure you test under all browsers, as certain functions are faster on different browsers. Just did a test on Safari 4 (OS X) and Prototype is, by far, the slowest.
      Dojo was blazing, with Mootools and jQuery coming in a close second.

Trackbacks

  1. Electronic Commerce – Blog Carnival (4th February…

    Welcome to the February 4, 2008 edition of electronic commerce. (Vol 2, No. 3, 2008)…

  2. [...] Old presents JQuery, Prototype, and MooTools Benchmark – SlickSpeed posted at Web Development 2.0: Web Design, CakePHP, Web [...]

  3. [...] Old presents JQuery, Prototype, and MooTools Benchmark – SlickSpeed posted at Web Development 2.0: Web Design, CakePHP, Web [...]