代码之家 › 专栏 › 技术社区 › Dennis C

如何加快IE8中InnerHTML的读取速度?

innerhtml internet-explorer-8 performance jquery

Dennis C · 技术社区 · 14 年前

我正在使用jquery和datatable插件,现在我在下面的一行中有一个很大的性能问题。

aLocalData[jInner] = nTds[j].innerHTML; // jquery.dataTables.js:2220

我有一个Ajax调用和HTML格式的结果字符串。我把它们转换成HTML节点,这部分就可以了。

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

然后我激活了从普通表到可排序数据表的启用结果。在fx中速度是可以接受的(大约是4秒900行),但在ie8中速度是不能接受的(超过100秒)。

我使用buildin profiler对其进行了深入的检查,发现上面的单条线占用了99.9%的时间,如何加快速度?我错过了什么?

            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++;
                        }
                    }
                }
            }

5 回复 | 直到 13 年前

Paul Tarjan 14 年前

尝试使用 YUI DataTable . 我扔到任何大桌子上都很快。您可以将它与jquery一起使用,而不会出现任何问题。

例如: http://paulisageek.com/compare/cpu/

Dennis C 14 年前

我已经应用了自己的补丁,但仍在寻找真正的解决方案,它在IE(10+秒)中仍然非常慢,但可以接受。

我一行读一次InnerHTML,然后自己拆分。

                    // 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;
                    .....

如果有人知道为什么innerhtml慢,请告诉我。

Vitaly 14 年前

您是否考虑过为此使用XML数据岛?这有点棘手,但工作得很快。以下是如何将HTML表绑定到XML数据岛:

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

(在岛上,您可以从远程源加载数据,所以它就像Ajax)。

shazmoh 14 年前

具有10列和900行的表将调用innerhtml函数9000次。相反,将innerhtml内容附加到数组中,并在表的末尾只调用innerhtml一次。

类似:

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

这样,在表生成过程中只调用一次innerhtml。如果没有,可以在每行末尾调用innerhtml,将调用innerhtml的次数减少到900次。

Bobafett42 13 年前

我建议使用IE避免innerhtml,并尝试使用XMLDOM元素。我尝试了对循环进行不同的修复,但是延迟来自于提取HTML元素的值。这个问题是IE的javascript引擎,需要解决方法才能获得可接受的性能。

经过多次尝试和错误之后,我对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与FireFox3性能(非科学):将2列的表:1655行废弃到对象数组中

数组1(jquery.each):毫秒:20203/68
数组2(用于:array.push):毫秒:19531/41
数组3(while:array.push):毫秒:19609/44
数组4(用于:数组[索引]):毫秒:20562/326
数组5(dom:for:array[索引]:i++:):毫秒:797/245***赢家
数组6(dom:for:array[索引]:i+=):毫秒:828/245
数组7(dom:for:array.push:i++):毫秒:797/250