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

不是显示/隐藏 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 回答
0

您可以检查webworker以创建线程以提高性能。我知道这是一个模糊的，但我想建议这个方向。

不幸的是，我们无法在 webworkers 中操作 DOM。但是可以在您的客户端代码上操作 DOM。

看来您正在制作 XMLhttprequest 以获取新数据，这可以在 webworkers 内部完成。

于 2012-06-28T16:28:36.760 回答
0

你不需要每个。Jquery 中的 click 函数是可链接的，这可能会加快速度：

(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 回答