How to speed up the reading of innerHTML in IE8?

Question

I am using JQuery with the DataTable plugin, and now I have a big performnce issue on the following line.

aLocalData[jInner] = nTds[j].innerHTML; // jquery.d         


        

Answer 1

Did you ever consider using XML Data Island for this? This is a little bit tricky, but works pretty fast. Here's how you can bind HTML table to XML Data Island:

http://www.devx.com/tips/Tip/14109

(in the island you can load data from remote source, so it's like Ajax).

Answer 2

I've apply my own patch but still looking for a real solution, it is still very slow in IE (10+ sec) but acceptable.

I read innerHTML once a row and split my own.

                    // For whom in interest
                    // Tested on IE8, Fx3.5
                    .....
                    aLocalData = oSettings.aoData[iThisIndex]._aData;
                    jInner = 0;
                    if(nTrs[i].getElementsByTagName('table').length == 0){
                        nTds =$.trim(nTrs[i].innerHTML).split(/<\/td>\s*/i);
                        for(j=0, jLen=nTds.length; j<jLen; j++){
                            aLocalData[jInner]=nTds[j].replace(/<td[\w\W]*?>/i,'');
                            jInner++;
                        }
                        continue;
                    }
                    nTds = nTrs[i].childNodes;
                    .....

If anyone know why innerHTML are slow, please let me know.

Answer 3

Try using the YUI DataTable. It is very quick for any large table that I throw it at. You can use it with JQuery without any issues.

For example: http://paulisageek.com/compare/cpu/

Answer 4

A table with 10 columns and 900 rows will call the innerHTML function for 9000 times. Instead append the innerHTML contents to an array and call innerHTML only once at end of the table.

Something like:

var contentArray = ["","","Cell Content","",""];
container.innerHTML(contentArray.join(""));

This way the innerHTML is called only once in the table build process. If not you could call innerHTML at end of each row bringing down the number of times you call innerHTML to 900.

Answer 5

I would suggest avoiding innerHTML with IE and trying the XML DOM elements. I tried different fixes for loops but the delay is from pulling the values of the HTML element. The issue is IE's javascript engine and requires work arounds to get acceptable performance.

After much trial and error I came up with the following improvement over innerHTML:

   var start = new Date().getTime()
     var resp=[];
     var dataTbl = $(data).find('#tbl').get(0);  // jquery Ajax call to html, .get(0) for real DOM
     var dataObj = dataTbl.rows;  
     for (var i = 1, l = dataObj.length; i < l; i++) { 
     resp[i] = { 
        label: dataObj[i].firstChild.firstChild.nodeValue,
        value: dataObj[i].lastChild.firstChild.nodeValue
      };
    };
  alert("On Array 5(DOM:For:array[index]:i++:): Milliseconds: " + ( new Date().getTime() - start) );

IE8 versus FireFox 3 performance(non-scientific): Scrap a table of 2 column : 1655 rows into object array

• Array 1(JQuery .each): Milliseconds: 20203 / 68
• Array 2(for:array.push): Milliseconds: 19531 / 41
• Array 3(while:array.push): Milliseconds: 19609 / 44
• Array 4(For:array[index]): Milliseconds: 20562 / 326
• Array 5(DOM:For:array[index]:i++:): Milliseconds: 797 / 245 ***Winner
• Array 6(DOM:For:array[index]:i+=): Milliseconds: 828 / 245
• Array 7(DOM:For:array.push:i++): Milliseconds: 797 / 250