DOM memory issue with IE8 (inserting a lot of JSON data)

Question

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

I have a utility that works fine on FF, Safari, Chrome ... but memory management on IE8 is horrific. The largest JSON request will return information to create about 5000 rows of the table in the browser (3 columns in the table).

I use jQuery to get data (via getJSON). To delete an old / existing table, I just do $('#my_table_tbody').empty() . To add new information to the table, in the getJSON callback, I just add every row of the table that I create for the variable, and then, when I have everything, I use $('#my_table_tbody').append(myVar) to add it to an existing topic, I am not adding table rows as they are created because it seems to be much slower than just adding them all at once.

Does anyone have any recommendations on what anyone 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 wonder if I have a choice.

Update 1 So, here is the code I tried after the innerHTML clause:

  / * 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--)
    {
       / * Qaru 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 essence of this. I also tried using only the $ .get request, and the server sent the formatted HTML and just set it to innerHTML (i.e. document.getElementById('main_area').innerHTML = j; ).

Thanks for all the answers. I am on the fact that you are all ready to help.

Answer 1

  var tmpText = []; for (k = mylength - 1; k >= 0; k--) { /* Qaru wont let me type greater than & less than signs here, so just assume that they are there. */ tmpText.push('anything you want') tmpText.push( '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';) } $('#main_area').html(tmpText.join('')) } 

you do not need document.getElementById('main_area').innerHTML = '';

this method is to insert into an array and then join and use the jquery html function to update. This is the fastest way I know. Sorry for the format here - his first post, and I thought that I would return here to stackoverflow.

Answer 2

To get IE to respond quickly, you must create your strings as string representations of HTML by adding them to the string variable and then adding the result to your table as follows.

 myTable.myTbody.innerHTML = allThoseRowsAsAString; 

This is not a memory issue: 5000 lines should be trivial. This is much less than one megabyte.

Answer 3

Robusto is right about assigning innerHTML, which is the best way. IE sucks in dynamic DOM creation

Why not create your innerHTML on the server using jsp and pass it back through ajax in one shot. This will definitely speed up the process, remove complexity from your javascript, and delegate markup to the right place.

Answer 4

As Plodder said, IE has big problems working with the DOM. JQuery recommendations recommend creating code on a simple line and adding it only once to the container.

In addition, I recently had a similar problem for hierarchical data with a volume of 5000 data records. I asked myself: Does the user really need all this information at the moment? Then I realized that the best thing I could do was just present the “first piece of data” and then insert more data on a user request.

Finally, only one good tool: Dynatrace Ajax (it helps a lot to find a javascript function that takes longer)

Answer 5

Since you are dealing with thousands of rows of data, I would not call $('#my_table_tbody').empty() and add new data with new DOM elements. Instead, I will follow the Object Pool Pattern . Thus, instead of discarding all tr, you can reuse existing ones and just populate with new data.

If your new dataset has fewer rows and then the previous one, delete the rest of the rows from the DOM, but keep the references to them in some pool so that the garbage collector does not destroy them. If your new dataset is larger, just create a new tr as required.

You can look at the implementation of YUI DataTable , here is the source. IIRC uses this approach to speed up rendering time.