Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to speed up the reading of innerHTML in IE8?

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++;
                        }
                    }
                }
            }
like image 219
Dennis C Avatar asked Mar 09 '10 02:03

Dennis C


2 Answers

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/

like image 187
Paul Tarjan Avatar answered Sep 20 '22 07:09

Paul Tarjan


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.

like image 35
Dennis C Avatar answered Sep 23 '22 07:09

Dennis C