3

次のjQueryステートメントがループに入っています。1ページに2つのテーブルがあります#MainContent_gvDemographic。#tblFreez

$("#MainContent_gvDemographic").find(str)
                               .css("height", $("#tblFreez")
                               .find(str)
                               .css("height"))

ループに多くのステップがある場合、完了するまでに非常に長い時間がかかります。この問題を解決するために、2つのループを使用します。1つは$（ "＃tblFreez"）。find（str）の高さを読み取るためのもので、もう1つは高さをに書き込むための$("#MainContent_gvDemographic").find(str)もので、配列を使用して2つの間で高さデ​​ータを伝送します。ループします。今でははるかに速くなります。2つのソリューションのパフォーマンスに大きな違いがある理由を誰かが知っていますか？計算の複雑さは私には同じように見えます。

了解しました。これが2つの完全なバージョンです。オリジナル：

function FixHeight() {
 var rowCount = $('#tblFreez tr').length;

    for (var i = 0; i < rowCount; i++) {
            var str = "";

            if ($.browser.msie) {
                str = "tr:eq(" + i + ") td";
            }
            else {
                str = "tr:eq(" + i + ")";
            }        
           $("#MainContent_gvDemographic").find(str).css("height", $("#tblFreez").find(str).css("height"));               
        }

}

新しい：

function FixHeight() {
        var rowCount = $('#tblFreez tr').length;
        var hei = new Array();
        for (var i = 0; i < rowCount; i++) {
            var str = "";
            if ($.browser.msie) {
                str = "tr:eq(" + i + ") td";
            }
            else {
                str = "tr:eq(" + i + ")";
            }
            hei[i] = $("#tblFreez").find(str).css("height");
        }
        for (var i = 0; i < rowCount; i++) {
            var str = "";

            if ($.browser.msie) {
                str = "tr:eq(" + i + ") td";
            }
            else {
                str = "tr:eq(" + i + ")";
            }

            $("#MainContent_gvDemographic").find(str).css("height", hei[i]);
        }

}

4

3 に答える 3

1

jQueryではなく、ループを1 つだけ使用してみませんか。以下のコードはテストしていませんが、動作するはずです。for.each()

function FixHeight() {
    var $MainContent = $("#MainContent_gvDemographic");
    var $tblFreezRows = $("#tblFreez tr");

    var hei, $row;
    $tblFreezRows.each(function(index, elem){
        $row = $(this);

        if ($.browser.msie) {
            hei = $row.find('td').css("height");
            $MainContent.find("tr:eq(" + index + ") td").css("height", hei);
        }
        else {
            hei = $row.css("height");
            $MainContent.find("tr:eq(" + index + ")").css("height", hei);
        }
    });
}
于 2013-03-06T21:06:08.807 に答える
0

通常、DOM 操作はコストのかかる操作です。

最初のバージョンは DOM 操作が重いですが、2 番目のバージョンにはカウントがあります。負荷対数のように見えます。

理想的には、最初のバージョンは 1 回のループであり、反復回数は 2 番目のバージョンの半分であるため、高速である必要があります..しかし、常にそうであるとは限りません。

メモリが 1000M で、300M をガベージ コレクションできるとします。つまり、クリーンアップできます。したがって、オペレーティング システムのメモリ モデルは、メモリが 1000M に近づくたびにガベージ コレクターを呼び出します。これらの条件を念頭に置いて、最初のバージョンで 5 回の反復ごとに 1000M かかるとすると、次の反復のためにリソースをクリーンアップまたは解放するためにガベージ コレクターが呼び出されます。したがって、100回の反復と20回のGC処理に等しい100回の反復を実行した場合。

2 番目のケースでは、1000M を埋めるのに 50 回の反復が必要であると仮定すると、4 回の GC 処理を呼び出すことになります。これは基本的に 20 対 4 回で、各反復の間に他のプロセスを呼び出します。

上記は単なる憶測であり、実際のメモリ モジュールは私が説明したものよりもはるかにスマートですが、これは負荷と数値の概念を示すためのものです。

とにかく..以下のコードを試して、問題が解決するかどうかを確認してください。

TRレベルでの高さの設定

var fTable = document.getElementById('#tblFreez');
$("#MainContent_gvDemographic tr").each(function(ridx) {          
      $(this).height($(fTable.rows[ridx]).height());
});

TD レベルでの高さの設定

var fTable = document.getElementById('#tblFreez');
$("#MainContent_gvDemographic tr").each(function(ridx) {
      $(this).find('td').each(function (cidx) {
          $(this).height($(fTable.rows[ridx].cols[cidx]).height());
     });
});
于 2013-03-06T21:02:38.657 に答える
0

要素を変更/検索する前に、要素を切り離してみてください。次に、それらを再度追加します。DOM 操作はコストがかかります。

于 2013-03-06T21:04:12.963 に答える