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.dataTables.js:2220

I have a ajax call, and result string in HTML format. I convert them into HTML nodes, and that part is ok.

var $result = $('<div/>').html(result).find("*:first");
// simlar to $result=$(result) but much more faster in Fx

Then I activate enable the result from a plain table to a sortable datatable. The speed is acceptable in Fx (around 4sec for 900 rows), but unacceptable in IE8 (more then 100 seconds).

I check it deep using the buildin profiler, and found the above single line take all 99.9% of the time, how can I speed it up? anything I missed?

            nTrs = oSettings.nTable.getElementsByTagName('tbody')[0].childNodes;
            for ( i=0, iLen=nTrs.length ; i<iLen ; i++ )
            {
                if ( nTrs[i].nodeName == "TR" )
                {
                    iThisIndex = oSettings.aoData.length;
                    oSettings.aoData.push( {
                        "nTr": nTrs[i],
                        "_iId": oSettings.iNextId++,
                        "_aData": [],
                        "_anHidden": [],
                        "_sRowStripe": ''
                    } );

                    oSettings.aiDisplayMaster.push( iThisIndex );

                    aLocalData = oSettings.aoData[iThisIndex]._aData;
                    nTds = nTrs[i].childNodes;
                    jInner = 0;

                    for ( j=0, jLen=nTds.length ; j<jLen ; j++ )
                    {
                        if ( nTds[j].nodeName == "TD" )
                        {
                            aLocalData[jInner] = nTds[j].innerHTML; // jquery.dataTables.js:2220

                            jInner++;
                        }
                    }
                }
            }

Answer 1

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 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

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 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