jQuery and appending large amounts of HTML

Question

I have come to find that using jQuery to create HTML client-side can be a huge performance booster if done properly. I use AJAX returning JSON to retrieve dynamic content and then I build the relevant HTML and insert it using jQuery. The first time I messed with this technique I found that the string concatenator in IE's JavaScript performed really slowly so that building a dynamic table with more than 50 or so rows performed terribly.

var shtml = '<table>';
for (var i = 0; i < 100; i++) {
  shtml += '<tr><td>A bunch of content</td></tr>';
}
shtml += '</table>';
$('#myTable').append(shtml);

Then I found a technique for string concatenation that changed everything. Instead of using the sting += operator use arrays to do concatenation;

var shtml = ['<table>'];
for (var i = 0; i < 100; i++) { 
  shtml.push('<tr><td>A bunch of content</td></tr>');
}
shtml.push('</table>');
$('#myTable').append(shtml.join(''));

I found that performance improved significantly. Now, however, there is a ceiling of about 100 rows before I start to see the browser itself struggle with dynamically inserting so much content at once. Does anyone have any pointers or techniques that can be used to help me achieve the next performance boost for large sets of dynamic HTML?

Answer 1

There's a performance issue with jQuery and inserting a large string of html to the DOM, due to its $.trim function.

I sometimes find plain old dom scripting much faster than using jquery. Try something like

document.getElementById('id').innerHTML = myarray.join('')

Answer 2

Be aware that often the speed bottleneck is not creating the DOM, but inserting the DOM. This is especially true on IE with complicated style sheets and when the new content contains many levels of nested tags.

See: http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html