Speed-up jQuery with jString
Fri, Feb 12, 2010 by JF
One of the great benefits of jQuery lies in its syntax which makes code simpler to write and easier to read. Take these two equivalent examples:
While slightly slower, the jQuery approach is more compact, faster to write, and easier to debug. On the other hand, fewer jQuery calls mean faster code. When manipulating the DOM, it remains desirable to keep working with strings for that reason. Consider these 3 approaches:
With an array of 100 numbers, the benchmark results speak for themselves (10 times repeat):
Case 1. 328ms
Case 2. 78 ms
Case 3. 53 ms
Enters jString
The idea is to add jQuery-like methods to the String base class. These methods make what I call 'jString' or 'jQuery methods for Strings'. For building HTML, I found that I could get most of the work done with only five methods (empty, html, wrap, addClass and attr) so only these ones are currently implemented. For the examples above, using jString we can simply write:
The same benchmark as above do show a small penalty, which is acceptable considering the gain in readability:
1. 93 ms
2. 95 ms
The real power of this technique can be seen on more complex cases, such as building a two dimension table with a zebra pattern following an Ajax call to Drupal:
See the attached code for the complete jString implementation, as well as the benchmark code. Enjoy!
Dave Ward posted on February 24, 2010 3:09 pm
Manipulating elements attached to the DOM is very slow. It would be interesting to see "Case 1" benchmarked more like this:
$table = $('#myTable').detach();
for(var i = 0; i < myArray.length; i++) {
$table.append() // etc.
}
$('#TableContainer').insert($table);
john posted on February 17, 2010 8:06 pm
For large numbers of iterations using arrays is your best bet!
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
dalin posted on February 13, 2010 3:35 pm
One real performance killer that you have in case #1 above (but you avoid it in the actual benchmark) is using a selector in a loop. i.e. Instead of
$.each(myArray, function(i, v) {
$('some selector').do_something;
});
do this:
var q = $('some selector');
$.each(myArray, function(i, v) {
q.do_something;
});
The other common mistake is to use a class as a selector. i.e. Instead of
$('.my-class');
the ideal choice would be
$('#my-id');
or even
$('#my-id .my-class');
or even this is better
$('table.my-class');
The reason being that in the non-A-grade browsers there is no native JavaScript way for jQuery to find those DOM elements, it has to try each element one-by-one.
Both of these issues are much less pronounced with the latest jQuery (1.4) which you use in this benchmark. But Drupal 6 comes with the older jQuery 1.2 in which these two stumbling points should be avoided like the plague.
Post new comment