What is the most efficient way to manage large datasets using Javascript / jQuery in IE?

Question

I have a search that returns JSON, which is then converted to an HTML table in Javascript. It repeatedly calls the jQuery.append () method, once for each line. I have a modern machine and the response time of Firefox is acceptable. But in IE 8, it is unbearably slow.

I decided to transfer the conversion from data in HTML to server-side PHP by changing the return type from JSON to HTML. Now, instead of calling jQuery.append () again, I call the jQuery.html () method once with the whole table. I noticed that Firefox has become faster, but IE has become slower.

These results are anecdotal and I did not benchmark, but IE performance is very disappointing. Is there something I can do to speed up the manipulation of large amounts of data in IE, or is it just a bad idea to process a lot of data at once using AJAX / Javascript?

Answer 1

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

, node, - . DOM-. , , - (, ..), . , - , , ( , SlickGrid - http://github.com/mleibman/slickgrid).

" " , DOM - , .

, , , . , Facebook.

Answer 2

. DOM, - , /.

, DOM .html().

, IE6.

Answer 3

DOM . .

( JSON ) html script, javascript. html . DOM html. ,

var builder = [];

//Inside a loop
builder.push('<tr><td>');
builder.push(json.value);
builder.push('</tr>');

//Outside the loop
$('div').append(builder.join(''));

Answer 4

jQuery templating,

John Resig ​​ . - . :)