jQuery and Prototype Benchmarks

Written on April 15th, 2008, by Cristian

Piotr Solnica did a couple of posts on jQuery and Prototype benchmarks back in the day, and John-David Dalton just found them.

In part one, he runs tests such as:

$('td.first').addClass('marked'); // jQuery

$$('td.first').each(function(cell){
  cell.addClassName('marked');
});

// or 

$$('td.first').invoke('addClassName', 'marked');

and concludes:

Executed tests show that Prototype seems to be faster then jQuery, with the exception of the new insertion method, which performance should be improved. Although I like jQuery syntax more then Prototype, the performance is way more important then saving few lines of code. Of course tests that I made don’t show how these libraries act in a real application, which is my task for the next part(s) of this article. Despite the results I must admit that I’m very excited about jQuery, my general impression is that this library is more mature then Prototype.

In part two, Piotr uses a custom JavaScript-based testing environment instead of running tests using Firebug profiler. This allows the test suite to run in many browsers, and this time concludes:

Prototype was at least 2 times faster then jQuery in 15 cases, and jQuery was faster then Prototype in 8 cases. What library should I choose? In my case I will stick with Prototype, because it offers the same functionality as jQuery does + more and it’s faster. jQuery is probably better for projects where there’s a need for some fancy UI effects and that’s it, but it’s just an assumption, correct me if I’m wrong…

Manage JavaScript Dependencies

Written on April 15th, 2008, by Cristian

Jon Davis created Using.js, a simple library to manage dependencies with the goals of:

  • Separate script dependencies from HTML markup (let the script framework figure out the dependencies it needs, not the designer)
  • Make script referencing as simple and easy as possible (no need to manage the HTML files)
  • Lazy load the scripts and not load them until and unless they are actually needed at runtime.

To use the script you simply:

// potential scripts are pre-registered first
using.register("jquery", "/scripts/jquery-1.2.3.js");

// later, when actually needed
using("jquery"); // loads jQuery and de-registers jQuery from using

$("a").css("text-decoration", "none");

// or asynchronously

using("jquery", function() {
$("a").css("text-decoration", "none");
});

As we see more and more tactics for getting performance by doing tricks with when scripts are loaded, I expect to see more of libraries like this. The key is working out exactly what script needs to be loaded right away, after the DOM is around, and what can wait for later. How do you want to load the script? Dynamic script element? Via iframe? XHR + eval? They all have pros and cons.