javascript - jQuery でのテーブルのフォーマットが非常に遅い

Question

特定の基準に一致するさまざまな行を表示/非表示にするトグルを持つテーブルがあり、次のJSを使用して目的を達成しています( JSFiddle );

function resetRows() {
    var i = 1,
        tds;
    var start = new Date().getTime();
    $('td').removeClass('even odd');

    $.each($('tr'), function (key, index) {
        // loop through each table row skipping the first row which will be the title
        tds = $(this).find($('td'));
        if ($(this).is(':visible') && key > 0) {
            if (i % 2 === 0) {
                tds.addClass('even');
            } else {
                tds.addClass('odd');
            }
            // find the .index class and reset it's value
            $(this).find($('.index')).html(i);
            i++;
        }
    });
    var end = new Date().getTime();
    var time = end - start;
    console.log('time taken: ' + time);
}

$(function () {

    // show/hide failed
    $('#showHideFails').on('click', function () {
        if ($('.failed').eq(0).is(':visible')) {
            $('.failed, .ins').hide();
            $('.shTxt').html('Show all');
            resetRows();
        } else {
            $('.failed, .ins').show();
            $('.shTxt').html('Hide failed');
            resetRows();
        }
    });

});

私の問題は、このコードの実行が非常に遅いことです。私の例のテーブルには15行しかないので、jsフィドルは比較的迅速です。私の実際のテーブルには 100 行あり、1,000 行を表示するように変更できます。

実行時間をテストするためにコンソール ログを追加しました。フィドルでは、行を非表示にするのに約 15 ミリ秒、行を再度表示するのに約 20 ～ 40 ミリ秒かかります。

100行の実際のテーブルでは、これは非表示に〜300〜450ミリ秒、表示に〜500〜600ミリ秒に変更されます。200 行 (それぞれ 1,200 行と 2,00 行) を試行すると、この数値は 2 倍以上になります。1,000 行で試したところ、ブラウザがクラッシュしそうになりました。

のクラス名を変更する代わりに のクラス名を変更するようにコードを変更しようとしtdましたがtr、理論的にはこれは jQuery が処理するのに必要な処理が少なくなることを意味しますが、これにより実行時間がほぼ 2 倍になったので元に戻しましたへtd_

コードをより効率的にする方法を誰か教えてもらえますか? 必要な機能を取得するのに少しイライラしますが、実行が非常に遅くなります。