DOM memory issue with IE8 (inserting lots of JSON data)

Posted by okie.floyd on Stack Overflow See other posts from Stack Overflow or by okie.floyd
Published on 2010-03-31T17:24:37Z Indexed on 2010/03/31 19:03 UTC
Read the original article Hit count: 359

Filed under:
|
|
|
|

i am developing a small web-utility that displays some data from some database tables.

i have the utility running fine on FF, Safari, Chrome..., but the memory management on IE8 is horrendous. the largest JSON request I do will return information to create around 5,000 or so rows in a table within the browser (3 columns in the table).

i'm using jquery to get the data (via getJSON). to remove the old/existing table, i'm just doing a $('#my_table_tbody').empty(). to add the new info to the table, within the getJSON callback, i am just appending each table row that i am creating to a variable, and then once i have them all, i am using $('#my_table_tbody').append(myVar) to add it to the existing tbody. i don't add the table rows as they are created because that seems to be a lot slower than just adding them all at once.

does anyone have any recommendation on what someone should do who is trying to add thousands of rows of data to the DOM? i would like to stay away from pagination, but i'm wondering if i don't have a choice.

Update 1 So here is the code I was trying after the innerHTML suggestion:

/* Assuming a div called 'main_area' holds the table */
document.getElementById('main_area').innerHTML = '';

$.getJSON("my_server", {my: JSON, args: are, in: here}, function(j) {
   var mylength = j.length;
   var k =0;
   var tmpText = '';
   tmpText += /* Add the table, thead stuff, and tbody tags here */;
   for (k = mylength - 1; k >= 0; k--)
   {
      /* stack overflow wont let me type greater than & less than signs here, so just assume that they are there. */
      tmpText += 'tr class="' + j[k].row_class . '"   td class="col1_class" ' + j[k].col1 + ' /td td class="col2_class" ' + j[k].col2 + ' /td  td class="col3_class" ' + j[k].col3 + ' /td /tr';
   }

   document.getElementById('main_area').innerHTML = tmpText;
}

That is the gist of it. I've also tried using just a $.get request, and having the server send the formatted HTML, and just setting that in the innerHTML (i.e. document.getElementById('main_area').innerHTML = j;).

thanks for all of the replies. i'm floored with the fact that you all are willing to help.

© Stack Overflow or respective owner

Related posts about memory-management

Related posts about dom