What's the most efficient way to manage large datasets with Javascript/jQuery in IE?

Question

I have a search that returns JSON, which I then transform into a HTML table in Javascript. It repeatedly calls the jQuery.append() method, once for each row. I have a modern m

Answer 1

As others have mentioned, excessive DOM manipulation kills performance. Creating an HTML string using the aforementioned Array.join('') and setting the innerHTML of a container using the jQuery.html() method is orders of magnitude faster. Be wary of using jQuery.append(html) - this is equivalent to creating all the DOM nodes first and then inserting them!

Thing is, even if you optimize the creation of the page node tree, you're still going to hit a ceiling pretty fast with very large datasets. Browsers just can't handle such large and complex DOM trees. First thing you will see slowing down will be the interactions (animations, handlers, etc.) even if you use event delegation. If your dataset is truly large, you will need to do some sort of virtualization to only show what is visible in the viewport (this is what SlickGrid does - http://github.com/mleibman/slickgrid).

Alternatively, you can improve the responsiveness and "time to interactive" of your page by chunking your DOM additions and executing them on a timeout one after another with some pause in between to let the browser handle user events.

Other techniques include rendering the first page worth of data, allocating room for more, but only rendering it when the user starts scrolling towards it. This is what Facebook does.