solnic on blog web development, ruby, javascript and other crazy things

jQuery vs Prototype – part II

Recently, new versions of jQuery and Prototype have been released – it’s a perfect moment for a part number 2. On the official Prototype blog we can read that the general performance of CSS selectors is now improved, unfortunately only for Safari 3, but Element#up/#down/#next/#previous should now be faster on all browsers, it’s a good news as they were really slow. On the other hand we have jQuery official announcement with information that jQuery is now 300% faster – we’ll see!

This time I made a step forward and decided to use a custom JavaScript-based testing environment instead of running tests using Firebug profiler. The obvious advantage is that I was able to run all the tests on 4 different browsers. New test cases aren’t much different then in the first part, let’s say it’s a modification of the previous ones with some extra operations and a little more complex HTML structure.

Test environment setup

Libraries:

• jQuery 1.2.2
• Prototype 1.6.0.2

All the tests were run on the following browsers:

• Firefox 2.0.0.11
• Konqueror 4.00.00
• Opera 9.50_beta1
• Internet Explorer 7 (*but using Windows on VirtualBox!*)

A tiny piece of JavaScript code is responsible for running the tests, each operation is called only once inside a try-catch block, so the essential part looks like this:

    try {
      var start = new Date;
      test();
      var end = new Date - start;
      this.writeResults(test, end);
    } catch(e) {
      test.resultCell.innerHTML = '<div style="color: red">Exception caught: '+e.message+'</div>';
    }

There is a 3 seconds break between each test run, results are automatically inserted into the results table. If you want, you can check it out on your own, just go right here and hit the ‘run tests!’ button.

The results

I’m happy to see that all tests pass on the latest Konqueror, previous version from KDE3 fails on some Prototype tests. I don’t own Mac, so you won’t see Safari results here, although I’ve run the tests on my friend’s MacBook with very similar hardware as my laptop has (Intel Core Duo 2ghz + 2 gigs of RAM), and it was faster even then Konqueror (no, it doesn’t mean his MacBook is faster then my laptop!!!! ).

I’ve run everything 3 times, here are average results in ms:

$('td.counter').addClass('marked')

$$('td.counter').each(function(el){ 
  el.addClassName('marked') 
})

$('td.counter span.special').removeClass('special')

$$('td.counter span.special').each(function(el) { 
  el.removeClassName('special') 
})

$('td.content span.odd').css('color', 'red')

$$('td.content span.odd').each(function(el) { 
  el.setStyle('color: red') 
})

$('td.content span.even').before(
  '<h3 style="display: none">text</h3>'
)</code

$$('td.content span.even').each(function(el) { 
  el.insert({ 
    before:'<h3 style="display:none">text</h3>' 
  }) 
})

$('td.content h3').show()

$$('td.content h3').each(Element.show)

$('div.special').hide()

$$('div.special').each(Element.hide)

$('div.special, td.content .odd').toggle()

$$('div.special, td.content .odd').each(Element.toggle)

$('span.odd').remove()

$$('span.odd').each(Element.remove)

$('#data p.lost:first').html('gotcha!')

$('data').down('p.lost').update('gotcha!')

Conclusion #2

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

jQuery vs Prototype – part I

Prototype 1.6.0 was released to the public 4 days ago, at first I decided to check its performance and new features in comparison to the previous version, but being interested in other JavaScript libraries, I’ve changed my mind. Lets see how you can accomplish same tasks with the latest Prototype and jQuery libraries and simply see which one is faster. In this part I’m going to show the results of running single operations, in next part(s) I will prepare a sample website and write more complex test cases and, again, check how fast jQuery and Prototype can be (or how slow…).

Test environment setup

The following software was used:

• Prototype 1.6.0
• jQuery 1.2.1
• Firefox 2.0.0.9
• Firebug 1.05
• Webdeveloper 1.1.4

Test page contains only one table with 500 rows, it’s generated using the following RHTML template:

<table>
<% (1..500).each do |i| %>
  <tr>
    <td class="first">
      <div><%= i %></div>
    </td>
    <td class="second">
      <div><%= "hello from #{i}" %></div>
    </td>
  </tr>
<% end %>
</table>

Running the tests

Each operation was executed using Firebug’s console with Profiler turned on and repeated 3 times, between each execution the page was reloaded. Cache in Firefox was disabled using Webdeveloper plugin. Here are the results of 7 test operations showing average times and number of method calls in each operation:

1. Adding ‘marked’ CSS class to every cell having ‘first’ CSS class:

$('td.first').addClass('marked')

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

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

Comment: no practical difference, although jQuery is a little faster.

2. Removing CSS class from every table cell having “second” CSS class:

$('td.second').removeClass('second')

$$('td.second').each(function(cell) { cell.removeClassName('second') });

$$('td.second').invoke('removeClassName', 'second');

Comment: No big difference, especially when comparing Prototype #2 option with jQuery.

3. Setting ‘color’ CSS property in every div element which is inside a cell having ’second’ CSS class:

$('td.second div').css('color', 'red')

$$('td.second div').each(function(el) { el.setStyle({ color : 'red' }) });

$$('td.second div').each(function(el) { el.setStyle('color : red') });

$$('td.second div').invoke('setStyle', 'color : red');

Comment: Same here, Prototype 2 x faster

4. Adding new elements before every div element which is inside a cell having ’second’ CSS class:

$('td.second div').before('<h3>text</h3>')

$$('td.second div').each(function(el) { el.insert({ before: '<h3>text</h3>' }) });

$$('td.second div').invoke('insert', { before: '<h3>text</h3>' });

Comment: Wow…jQuery is almost 4 times faster, I should point out that Element#insert is a new method introduced in Prototype 1.6.0.

5. Removing all div elements which are inside cells having ’second’ CSS class:

$('td.second div').remove()

$$('td.second div').each(Element.remove);

$$('td.second div').invoke('remove');

$$('td.second div').each(function(el) { el.remove() });

Comment: Prototype more then 2 times faster.

6. Hiding and un-hiding all div elements which are inside cells having ’second’ CSS class:

$('td.second div').toggle();$('td.second div').toggle();

$$('td.second div').each(Element.toggle);$$('td.second div').each(Element.toggle);

$$('td.second div').each(function(el) { el.toggle() }); $$('td.second div').each(function(el) { el.toggle() });

Comment: jQuery tragedy, Prototype toggles visibility of 500 divs 10 times faster!

7. Attaching event listeners to all div elements which are inside cells having ’second’ CSS class:

$('td.second div').bind('click', function(){ alert(this.innerHTML) })

$$('td.second div').invoke('observe', 'click', function(){ alert(this.innerHTML) });

$$('td.second div').each(function(el) { el.observe('click', function(){ alert(this.innerHTML) }) });

Comment: no practical difference.

General conclusion and impression

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.

You may want to check out part ||