Why is jQuery.sach significantly slower in Safari than Firefox / Chrome?

Question

This question is not looking for a solution to a specific problem, but is trying to understand why Safari is ineffective in this case. When I talk about much slower, the code works in Firefox and Chrome in less than 1 second, while Safari takes 30-90 seconds. This is probably already a documented issue, but I don't know why.

---

The situation is that I have a rather large HTML table. These are 1000-1500 rows with a width of 40 columns. The structure looks something like this:

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

Several form fields allow users to select and enter information that helps filter out lines. JQuery looks like this:

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

When I start to cut the code, a violation code that takes a lot of time, no matter what the inside of the loop seems to be, $("#myTablePlayers .playerData").each(function() {...

, vanilla JS, , .

Answer 1

DOM .css() . , / .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 ).