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

Answer 3

Have you considered using a templating library? PURE has very good performance, for instance (try out the 500 row example).

Answer 4

I think you can split html in many parts and append it one by one.

$("table tr:last").after('<tr>...</tr>');

Like document lines in googleDocs

Answer 5

Try cloning parts of the DOM itself rather than generating it on the fly (i.e. append actual DOMElements so they don't have to be created).

Answer 6

i was messing around with appending large amounts of html yesterday. i think rendering on server side and inserting is the way to go, also i may add, that not using jquery is faster by 50-100ms in my tests, which are here:

http://programmingdrunk.com/playground

you will need to enable firebug console to see speed results

Answer 7

Chase is right, it doesn't matter how fast you can generate the HTML via JavaScript, it's the DOM insertion that will kill you. Tie any programming language with the DOM and it'll be slow.

My only suggest is to have the table paginated so you don't load so many at once, or maybe not to use AJAX at all.

Answer 8

In my case,document.getElementById('id').innerHTML = myarray.join('') is also a killer since array have 10 HTMl strings. The joins would create a big long string and nnerHTML performance varies significantly between 100ms to 1200ms on IE 7.

any cluses?

Answer 9

You would probably get better performance if you do the HTML generation on the server side, and then use Ajax to retrieve the html and append it to your DOM. (I'm assuming you're getting all the data from the server using Ajax anyway.)