This is pretty interesting, this site runs a speed test and pares all of these;

• PureDom
• jQuery 1.2.6
• jQuery 1.3.2
• Prototype 1.6.0.3
• MooTools 1.2.2
• qooxdoo 0.8.2
• Dojo 1.2.3
• Dojo 1.3.1
• YUI 2.7.0

Javascript frameworks Speed Comparison

Bases on this it seems like the newest jquery version is almost 2x faster then the older version, however even the newest jquery did not perform that well IMO

Question time:
1. So my question, I am new to javascript, do you think this test is pretty accurate?
2. If it is does this even mean anything in terms of performance or is it not even noticable?

This is pretty interesting, this site runs a speed test and pares all of these;

• PureDom
• jQuery 1.2.6
• jQuery 1.3.2
• Prototype 1.6.0.3
• MooTools 1.2.2
• qooxdoo 0.8.2
• Dojo 1.2.3
• Dojo 1.3.1
• YUI 2.7.0

Javascript frameworks Speed Comparison

Bases on this it seems like the newest jquery version is almost 2x faster then the older version, however even the newest jquery did not perform that well IMO

Question time:
1. So my question, I am new to javascript, do you think this test is pretty accurate?
2. If it is does this even mean anything in terms of performance or is it not even noticable?

• javascript
• jquery
• frameworks
• performance

5 Answers 5

The fact that the PureDom tests are sometimes listed as being slower as some of the frameworks makes me doubt the accuracy of the measurements somewhat. Or the programming ability of the site makers I guess :P

Especially after seeing these numbers, I'd say functionality, ease of use and munity support are more important than the differences in performance. Use what you like, and if you by chance have to do something very performance dependant, do-it-yourself™.

Performance of the popular JavaScript libraries is more than adequate. It depends a lot on what you do with them too: Even though jQuery may be quick "on paper", it's a library that you can easily use to create very slow code unintentionally. Easy to do lots of inefficient DOM modifications with it for example.

Since the libraries are all fast, what matters to me personally is the development speed and suitability of the library itself. Some are better suited for certain things than others.

you'll want to choose a library that meets your needs.

• Does it make node(set) selection easy
• Does it make DOM manipulation easy
• Does it make event binding easy
• Does it make basic animation easy
• Does it make AJAX easy
• Does it fix IE bugs along the way during the above?
• Does it scale? are there plugins available?
• Is there documentation, support, a munity of developers out there

Find the library that works for you and go for it. Over time both you and the library publisher will find the best ways to maximize performance for your code.

I would not take to much notice of the them. They do not follow best practise and are not optimized at all.

Take for example the "make" jquery 1.3.2 test (code below)

If you go here and open fireBug you can see I have pared their method against the best way of doing it. The difference is amazing.

For clarity I called them makeBad and makeGood. here are the results:

_{(source: gyazo.)}

Conclusion: Take the results with a pinch of salt. They are not real world examples

"makeBad": function(){
        for(var i = 0; i<250; i++){
            $("<ul id='setid" + i + "' class='fromcode'></ul>")
                .append("<li>one</li><li>two</li><li>three</li>")
                .appendTo("body");
        }
        return $("ul.fromcode").length;
    },

It is not optimized at all. You should not append to the dom inside the loop. Better to push to an array and then append once to the dom. It is much better written as follows.

"makeGood": function(){
           var domBuilder = [];

          for(var i = 0; i<250; i++){
             domBuilder.push("<ul id='setid" + i + "' class='fromcode'>")
             domBuilder.push("<li>one</li><li>two</li><li>three</li>")
             domBuilder.push("</ul>")
          }

          $('#body').append( "<div>" + domBuilder.join() + "</div>");
          return $("ul.fromcode").length;
    },

first of all, that test is an purely theoretical test, of just speed and nothing else (no memory usage calculated, no real world usage etc.) and in addition to that the most important of a libary is not theoretical speed, itś functionality and support.

secondly, on a performance scale, all libaries are fast enough to do do anything you need it to do, it's the programmer that makes it slow.

finally, my personal opinion is that you just should go with the latest version of jQuery, for it's usability (CSS3 selectors) and simple AJAX implementation.