0

約50人のユーザーと、彼らが持っている「プロジェクト」の数を含む、アカウントに関するいくつかの簡単なデータをリストした大きなテーブルがあります。ユーザー行をクリックすると、さらに多くの行が下に展開され、各プロジェクトに関する詳細情報が表示されます。ほとんどのユーザーは20未満のプロジェクトを持っているので、ブラウザにひどく負担をかけることはありません。ただし、100以上のプロジェクト（500以上のプロジェクト）を持つユーザーが数人います。ユーザー行をクリックすると、ブラウザーは1〜4秒の間停止します。

テーブルの行は、.projectクラスを持つすべての行がデフォルトで非表示になるように設定され、ユーザー行（.projectクラスなし）をクリックすると、クラスを持つ後続のすべての行に、それらを表示する.projectクラスが.open追加されます。

これをより速く実行する方法についての提案はありますか？同じ効果を達成するためのより良い、よりクリーンな方法はありますか？

HTMLの簡略化されたバージョンは次のとおりです。

<table>
    <tr>
        <td>Username</td><td>Email</td><td>10 Projects</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr>
        <td>Username</td><td>Email</td><td>3 Projects</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
    <tr class="project">
        <td>&nbsp;</td><td>&nbsp;</td><td>Project Name</td>
    </tr>
</table>

...そしてJS：

(function($) {

    $.fn.viewProjects = function() {

        this.each(function() {
            $(this).click(function(){

                var projects = $(this).nextUntil(':not(.project)'); // get all rows that follow and have the '.project' class

                if ($(this).hasClass('focused')) { // collapse
                    $(this).removeClass('focused');
                    projects.each(function(n, proj){
                        $(proj).removeClass('open');
                    });
                }
                else { // expand
                    $(this).addClass('focused');
                    projects.each(function(n, proj){
                        $(proj).addClass('open');
                    });
                }

            });
        });

    };

    $('tr:not(.project)').viewProjects();

})(jQuery);
4

4 に答える 4

2

これは、DOMが非常に多くの追加されたものをロードしているためです。同様の状況で私がすることは次のとおりです。

  • 50行を超えるかどうかを確認します
  • その場合は、50で停止し、「クリックして詳細を表示」リンクを配置します。
  • クリックすると、次の50行をロードします。
  • すべての行がロードされるまで、このプロセスを続けます。

または、ユーザーがページを下にスクロールしたときに、次の50行を自動的にトリガーしてロードすることもできます。ものを自動的にロードすると混乱する可能性があるため、リンクを表示することをお勧めします。

編集-毎回クラスを追加および削除する代わりに、jQueryを使用してコンテンツを表示および非表示にした場合はどうなりますか？

if ($(this).hasClass('focused')) { // collapse
    $(this).removeClass('focused');
    projects.hide();
} 
else { // expand
    $(this).addClass('focused');
    projects.show();
}
于 2012-06-28T16:27:59.763 に答える
0

webworkerをチェックして、パフォーマンスを向上させるスレッドを作成できます。これは漠然としたものだと思いますが、この方向性を提案したいと思います。

残念ながら、Webworker内でDOMを操作することはできません。ただし、DOMはクライアントコードで操作できます。

新しいデータを取得するためにXMLhttprequestを作成しているようです。これは、Webワーカー内で実行できます。

于 2012-06-28T16:28:36.760 に答える
0

それぞれは必要ありません。Jqueryのクリック機能はチェーン可能ですこれはそれをスピードアップするかもしれません：

(function($) {

    $.fn.viewProjects = function() {

            $(this).click(function(){

                var projects = $(this).nextUntil(':not(.project)'); // get all rows that follow and have the '.project' class

                if ($(this).hasClass('focused')) { // collapse
                    $(this).removeClass('focused');
                    projects.each(function(n, proj){
                        $(proj).removeClass('open');
                    });
                }
                else { // expand
                    $(this).addClass('focused');
                    projects.each(function(n, proj){
                        $(proj).addClass('open');
                    });
                }

            });

    };

    $('tr:not(.project)').viewProjects();

})(jQuery);
于 2012-06-28T16:29:12.723 に答える
0

500個のアイテムを表示/非表示にする代わりに、次のアイテムを表示/非表示にします。

HTMLを次のように再構築します。

<table>
    <tr>
        <td>Username</td><td>Email</td><td>10 Projects</td>
    </tr>
    <tr class="project">
        <td colspan="3">
            <ul>
                <li>Project Name</li>
                <li>Project Name</li>
                <li>Project Name</li>
                <li>Project Name</li>
                <li>Project Name</li>
                <li>Project Name</li>
                <li>Project Name</li>
                <li>Project Name</li>
                <li>Project Name</li>
        </ul>
    </td>
</tr>

于 2012-06-28T16:34:38.947 に答える