7

DataTableプラグインでJQueryを使用していますが、次の行でパフォーマンスに大きな問題があります。

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秒以上）。

組み込みのプロファイラーを使用して詳細を確認したところ、上記の1行が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

YUIDataTableを使用してみてください。私がそれを投げるどんな大きなテーブルにとってもそれは非常に速いです。JQueryで問題なく使用できます。

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

于 2010-03-24T03:28:02.630 に答える
1

10列900行のテーブルは、innerHTML関数を9000回呼び出します。代わりに、innerHTMLの内容を配列に追加し、テーブルの最後で一度だけinnerHTMLを呼び出します。

何かのようなもの：

var contentArray = [""、 ""、 "セルコンテンツ"、 ""、 ""];
container.innerHTML（contentArray.join（ ""））;

このようにして、innerHTMLはテーブルビルドプロセスで1回だけ呼び出されます。そうでない場合は、各行の最後でinnerHTMLを呼び出すことができ、innerHTMLを呼び出す回数を900回に減らすことができます。

于 2010-03-24T04:36:47.937 に答える
1

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（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 に答える
1

私は自分のパッチを適用しましたが、それでも実際の解決策を探しています。IEではまだ非常に遅いですが（10秒以上）、許容範囲内です。

私はinnerHTMLを1行に一度読んで、自分で分割しました。

                    // 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 に答える