如何加快IE8中innerHTML的读取速度？答案

【问题标题】：How to speed up the reading of innerHTML in IE8?如何加快IE8中innerHTML的读取速度？
【发布时间】：2011-01-25 06:13:07
【问题描述】：

我正在将 JQuery 与 DataTable 插件一起使用，现在我在下一行遇到了一个很大的性能问题。

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

我有一个 ajax 调用和 HTML 格式的结果字符串。我把它们转换成HTML节点，那部分就ok了。

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

【问题讨论】：

我不认为浏览器特别擅长处理 900 行的内容。在 Firefox 中，快速的 javascript 可以节省您的时间，但 IE 的脚本速度要慢得多。
我会使用某种分页机制吗，我们在 IE 中使用另一个网格控件时遇到了同样的问题，javascript 引擎的性能很糟糕，所以我们最终让用户能够对结果进行分页（或等待 IE）。
只是好奇，用var result = nTds[j].innerHTML; 替换行对性能有何影响？（暂时忘记它会破坏它）
我在 var temp 之前尝试过； (函数 MARK(nTd){ temp=nTd.innerHTML; })(nTd[i]); aLocalData[jInner]=温度；并且 IE9 内置分析器显示标记所消耗的所有时间。

标签： jquery performance internet-explorer-8 innerhtml

【解决方案1】：

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

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

【讨论】：

你有很棒的页面。我只是把链接给了几个朋友。在升级过程中会派上用场。
我有几张桌子，大小不一，在页面内看起来很正常。它们没有滚动条，但在滚动时保持标题可见。我正在使用带有 jquery-datatable 的 FixedHeader 插件。 yui-datatable 是否有相同的功能？例如datatables.net/release-datatables/extras/FixedHeader 当表格在屏幕内时，看起来很正常。当表格部分显示在屏幕上时，标题仍然可见。当表格在屏幕外时，不添加表头。
有些东西很接近，而且有点“HTML-ish”。只需使用 ScrollingDataTable 代替：developer.yahoo.com/yui/datatable/#scrolling。看直播developer.yahoo.com/yui/examples/datatable/dt_fixedscroll.html
Tarjan，我看过例子，但不是我要的效果。
您的来电。我会选择现在可以使用的东西，然后再调整 UI。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

类似：

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

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

【讨论】：

代码来自jquery-datatable，它已经支持Html表和AJAX作为数据源。

【解决方案5】：

我建议避免在 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（用于：array.push）：毫秒：19531 / 41
数组 3(while:array.push)：毫秒：19609 / 44
数组 4（对于：数组 [索引]）：毫秒：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

【讨论】：