Question

我有一张大表，列出了大约50个用户和他们帐户周围的一些简单数据，包括他们拥有的“项目”数量。单击用户行时，会在下方展开更多行，以显示有关其每个项目的详细信息。大多数用户只有不到20个项目，所以它对浏览器的影响并不大。但是，有一些用户有100多个项目（一个有500多个），当点击用户行时，浏览器会停留1-4秒。

设置表行，以便默认情况下隐藏具有.project类的任何行，并且在单击用户行（无.project类）时，所有后续行都具有{{1 } class添加了类.project来显示它们。

关于如何让这种运行更快的建议？是否有更好，更清洁的方法来达到同样的效果？

以下是HTML的简化版本：

.open

......和JS：

<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>

Answer 1

这是因为DOM正在加载如此多的内容。我在类似情况下做的是：

检查是否有超过50行
如果是，请在50处停止并点击“点击查看更多”链接。
点击后，加载下50行。
继续此过程，直到加载所有行。

或者，当用户向下滚动页面时，您可以自动触发下一个要加载的50行。我更喜欢显示一个链接，因为自动加载东西可能会令人困惑。

编辑 - 如果您使用jQuery显示和隐藏内容而不是每次都添加和删除类，该怎么办？

if ($(this).hasClass('focused')) { // collapse
    $(this).removeClass('focused');
    projects.hide();
} 
else { // expand
    $(this).addClass('focused');
    projects.show();
}

Answer 2

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

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

您似乎正在制作XMLhttprequest以获取新数据，这可以在网络工作者中完成。

Answer 3

你不需要每一个。 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);

Answer 4

不显示/隐藏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>

需要遍历500多个表行，浏览器正在窒息

4 个答案: