I had to implement what I call a “row selector” for a web application.
It looks something like this (try it out by clicking the checkboxes in the first column):
Now, the tricky part is that this should work for large documents, say 500 rows.
I have implemented this with jQuery, Prototype, MooTools and pure JavaScript, and these are the results I get when toggling all 500 rows in IE8 on a Windows box with 512MB RAM:
- jQuery 1.6.1: 2000ms
- Prototype 1.7.0: 2450ms
- MooTools 1.3.2: 6300ms (first toggle) / 1100ms
- JavaScript: 250ms
These are some numbers for Firefox 5, running on the same machine:
- jQuery 1.6.1: 150ms
- Prototype 1.7.0: 120ms
- MooTools 1.3.2: 230ms
- JavaScript: 100ms
We have to support IE, so choosing the pure JavaScript version was a no-brainer.
Here are the results for the jQuery version on an iMac with 2GB RAM:
- Google Chrome 12: 380ms
- Safari 5: 150ms
- Firefox 5: 140ms
It looks like Chrome is falling behind…
Try it out for yourself: jQuery, Prototype, MooTools and JavaScript.