Jquery And Appending Large Amounts Of Html

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

Solution 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('')

Solution 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

Solution 3:

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

Solution 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

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