7

我正在将 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 中是可以接受的（900 行大约需要 4 秒），但在 IE8 中是不可接受的（超过 100 秒）。

我使用内置分析器对其进行了深入检查，发现上面的单行占用了所有 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++;
                        }
                    }
                }
            }
4

5 回答 5

4

尝试使用YUI DataTable。对于我扔它的任何大桌子来说，它都非常快。您可以将它与 JQuery 一起使用而不会出现任何问题。

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

于 2010-03-24T03:28:02.630 回答
1

我已经应用了自己的补丁，但仍在寻找真正的解决方案，它在 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 很慢，请告诉我。

于 2010-03-09T09:09:03.230 回答
1

您是否考虑过为此使用 XML 数据岛？这有点棘手，但运行速度非常快。以下是将 HTML 表绑定到 XML 数据岛的方法：

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

（在岛上你可以从远程源加载数据，所以它就像 Ajax）。

于 2010-03-25T21:07:10.817 回答
1

一个 10 列 900 行的表格将调用 innerHTML 函数 9000 次。而是将 innerHTML 内容附加到一个数组中，并在表的末尾只调用一次 innerHTML。

就像是：

var contentArray = ["","","单元格内容","",""];
container.innerHTML(contentArray.join(""));

这样，innerHTML 在表格构建过程中只被调用一次。如果不是，您可以在每一行的末尾调用 innerHTML，从而将调用 innerHTML 的次数减少到 900。

于 2010-03-24T04:36:47.937 回答
1

我建议避免在 IE 中使用 innerHTML 并尝试使用 XML DOM 元素。我尝试了不同的循环修复，但延迟来自于提取 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 与 FireFox 3 性能（非科学）：将 2 列的表：1655 行报废为对象数组

  • 数组 1（JQuery .each）：毫秒：20203 / 68
  • 数组 2(for:array.push): 毫秒: 19531 / 41
  • 数组 3(while:array.push)：毫秒：19609 / 44
  • 数组 4(For:array[index]): 毫秒: 20562 / 326
  • 数组 5(DOM:For:array[index]:i++:): 毫秒: 797 / 245 ***获胜者
  • 数组 6(DOM:For:array[index]:i+=): 毫秒: 828 / 245
  • 数组 7(DOM:For:array.push:i++): 毫秒: 797 / 250
于 2012-02-13T23:22:25.223 回答