javascript - 为什么 jQuery 的 .each 在 Safari 中比 Firefox/Chrome 慢得多？

Question

这个问题不是寻找特定问题的解决方案，而是试图了解为什么 Safari 在这种情况下效率低下。当我说到显着变慢时，代码在 Firefox 和 Chrome 中运行不到 1 秒，而 Safari 则需要 30-90 秒。这可能已经是一个记录在案的问题，但我不知道为什么。

---

情况是我有一个相当大的 HTML 表格。它有 1,000-1,500 行 x 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() {...

我通过在 vanilla JS 中重写代码解决了这个问题，但这并没有回答为什么这段代码在一个浏览器中效率如此低下。

Answer 1

通过.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 实现非常快)。