-5

以下のいくつかの JQuery メソッドを使用しており、Web ページのパフォーマンスを向上させるためにそれらを純粋な JavaScript に変換したいと考えています。

$(function() {
    $('#resultDetails').on('click', '.toggle', function() {
        var findChildren = function(tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function() {
                return $(this).data('depth') <= depth;
            }));
        };
        var el = $(this);
        var tr = el.closest('tr');
        var children = findChildren(tr);
        var subnodes = children.filter('.expand');
        subnodes.each(function() {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });
        if(tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    });
});
$(document).ready(function() {
    $('table tr').on('click', function() {
        $('#showContent').html($(this).find('.content').html());
    });
    $('table th').on('click', function() {
        $('#showContent').html($(this).find('.content').html());
    });
    $('#resultDetails tbody tr').on('click', function(event) {
        $(this).addClass('highlight').siblings().removeClass('highlight');
    });
});

デモはhttp://jsfiddle.net/wYmwT/1/にあります。テーブルに 2000 行を超える行が含まれている場合、読み込みに時間がかかります。

助けはありますか？

4

2 に答える 2

0

これを純粋な JavaScript に変換しても、おそらく大きな違いは見られないでしょう。セレクターなどの一般的な JQuery 関数は、すでに十分に最適化されていると確信しています。彼らがあなたに与えた経験レベルよりも上手にこれを書き直すことができるとは思えません。

一度に多くの DOM 要素を処理しないように、代わりに無限グリッドまたはページネーション ソリューションを調べるために時間を使用することをお勧めします。また、テーブル クリック イベントに対して無名関数を作成しないでください。すべての要素がまったく同じことを行っているときに、すべての要素に対して新しい関数が作成されるためです。代わりに次のようにします。

var clickFunction = function(event){...};

$('table tr').on('click', clickFunction );

それが役立つことを願っています。

于 2013-08-02T09:51:16.617 に答える