为什么在Safari浏览器中，jQuery的.each方法比Firefox/Chrome浏览器慢得多？

Question

为什么在Safari浏览器中，jQuery的.each方法比Firefox/Chrome浏览器慢得多？

5

这个问题并不是在寻求特定问题的解决方案，而是试图了解为什么Safari在这种情况下效率低下。当我谈到极慢时，代码在Firefox和Chrome中运行时间不到1秒，而在Safari中需要30-90秒的范围内。这可能已经是一个记录下来的问题，但我不知道原因。

情况是我有一个相当大的HTML表格。它大约有1,000-1,500行，40列宽。结构看起来像这样：

<table id="myTablePlayers" class="tablesorter table table-striped table-bordered table-hover" style="overflow: visible">
    <thead>
        <tr>
          <th>...</th>
          <th>...</th>
          <th>...</th>
          <th>...</th>
          ...
          <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr class="playerData">
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            ...
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

许多表单字段允许用户选择和输入信息以帮助过滤行。jQuery 代码如下：

function autoRank() {
    // auto number
    rank = 0;
    $("#myTablePlayers .playerData").each(function() {
        if ($(this).css("display") != "none") {
            rank++;
            $(this).find('td').eq(colRank).text(rank);
        }
    });
}

function filterTable() {
    // Need some error checking on input not number
    minGP = $("#mingp").val()
    teams = $("#teamFilter").val()
    position = $("#position").val()
    age = $("#age").val()

    $("#myTablePlayers .playerData").show();

    $("#myTablePlayers .playerData").each(function() {
        toHide = false;

        if (teams != "") {
            if ( !$(this).find('td').eq(colTeam).text().toUpperCase().includes(teams.toUpperCase())) {
                toHide = true;
            }
        }

        if ( Number($(this).find('td').eq(colGP).text()) < minGP ) {
            toHide = true;
        }

        if (position != "") {
            if (position == "D") {
                if ($(this).find('td').eq(colPos).text().indexOf("D") == -1) {
                    toHide = true;
                }
            } else if (position == "F") {
                if ($(this).find('td').eq(colPos).text().indexOf("D") != -1) {
                    toHide = true;
                }
            } else if ( $(this).find('td').eq(colPos).text() != position) {
                toHide = true;
            }
        }

        if (age != "") {
            column = Number($(this).find('td').eq(colAge).text())
            age = Number(age)
            if (  column < age || column >= age+1  ) {
                toHide = true;
            }
        }

        if (toHide == true) {
            $(this).hide();
        }

    });

    autoRank();
}

$("#teamFilter").on('change', filterTable);

$("#mingp").on('change', filterTable);

$("#position").on('change', filterTable);

$("#age").on('change', filterTable);

当我开始精简代码时，无论循环内部包含什么内容，导致运行时间过长的有问题的代码似乎是$("#myTablePlayers .playerData").each(function() {...

我通过使用原生JS重新编写代码来解决了这个问题，但这并不能解释为什么这段代码在一个浏览器中如此低效。

- Reily Bourne

4

问题几乎肯定不在于.each()，而在于你通过.css()检查布局的方式。 - Pointy

3

另外，你真的需要使用 let 或 var 来声明你的本地变量。 - Pointy

2

@grzesiekgs 多余调用jQuery是低效的，但与进行布局查询相比，这完全微不足道。 - Pointy

1

你知道吗，我在想这里是否存在递归问题。你使用了$("#teamFilter").on('change', filterTable);以及其他一些方法，然后在filterTable中，相同的元素上调用了.val()方法。我想知道是否jQuery在内部触发了change事件，从而导致了大量的递归。 - user1106925

1

我想提醒大家，这是楼主的问题：“这个问题并不是在寻找特定问题的解决方案，而是试图理解为什么Safari在这种情况下效率低下。” - christopher clark

显示剩余7条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pointy · Accepted Answer

通过使用.css()来查询DOM状态可能非常昂贵。不要使用.hide()和.show()来隐藏/显示元素，而是添加/删除类。在您的CSS中：

.hidden { display: none; }

然后你的.each()循环只需要检查那个类：

$("#myTablePlayers .playerData").each(function() {
    if (!$(this).hasClass("hidden")) {
        rank++;
        $(this).find('td').eq(colRank).text(rank);
    }
});

要隐藏某些内容，只需添加相应的类名；要显示它，则需要移除该类名：

    if (toHide) {
        $(this).addClass("hidden");
    }

并展示：

$("#myTablePlayers .playerData").removeClass("hidden");

现在，所有这些.find()和.text()的调用也将变得很昂贵。最好通过一次遍历表格并在每个<tr>上创建数据属性来初始化表格，以有效地缓存每行的有趣值。通过jQuery的.data()进行查找将比在DOM中通过选择器进行查找要便宜得多（尽管现代DOM实现非常快）。