jQuery的Safari浏览器慢于Chrome / Firefox [英] jQuery's .each slower on Safari than Chrome/Firefox

问题描述

我有一个大的HTML表格（1,000-1,500行，40列宽）。我有几个输入和选择框，以便用户可以过滤行。相关的javascript / jquery（注意：并非整个代码库被粘贴，因为它不是瓶颈）附加到它看起来像：

  function autoRank（）{
 //自动编号
等级= 0; 
 $（＃myTablePlayers .playerData）。each（function（）{
 if（$（this）.css（display）！=none）{
 rank ++; 
 $（this）.find（'td'）。eq（colRank）.text（rank）; 
} 
}）; 
 
 
 var teamCols = $（），
 GPCols = $（），
 posCols = $（），
 ageCols = $（）; 
 
 $（＃myTablePlayers .playerData）。each（function（）{
 var columns = $（this）.find（'td'）; 
 teamCols = teamCols （col。）; 
 posCols = posCols.add（columns.eq（colPos））; .add（$（。colTeam 
 ageCols = ageCols.add（columns.eq（colAge））
}）; 
 $ b函数filterTable（）{
 //需要一些错误检查输入不是数字
 minGP = $（＃mingp）。val（）
 teams = $（＃teamFilter）。val（）。toUpperCase（）
 position = $（＃position）。val（）
 age = $（＃age）。val（）
 
 $（＃myTablePlayers .playerData）。show（）; 
 $ b $ *循环检查团队* / 
 if（teams）{
 teamCols.each（function（）{
 if（！this.innerHTML。 toUpperCase（）。includes（teams））{
 $（this）.parent（）。hide（）; 
} 
}）; 
 
 $ b $ *循环并检查最小GP * / 
 GPCols.each（function（）{
 if（Number（this.innerHTML）< minGP ）{
 $（this）.parent（）。hide（）; 
} 
}）; （年龄）{
年龄=数量（年龄）
 ageCols.each（函数（）{$ b $）
 $ b $ / *检查年龄要求* / 
 b thisAge = Number（this.innerHTML）; 
 if（thisAge< age || thisAge> = age + 1）{
 $（this）.parent（）。hide（）; 
} 
}）; 
 
 $ b $ *检查头寸要求* / 
 if（position）{
 posCols.each（function（）{
 var thisPos = this .innerHTML 
 if（position ==D）{
 if（thisPos.indexOf（D）== -1）{
 $（this）.parent（）。hide （）; 
} 
} else if（position ==F）{
 if（thisPos.indexOf（D）！= -1）{
 $（这个）.parent（）。hide（）; 
} 
} else if（thisPos！= position）{
 $（this）.parent（）。hide（）; 
} 
}）; 
} 
 
 autoRank（）; 
} 
  

在尽可能少地剥离代码时，违规代码是

  var.each（function（）{... 
   
 
 
在 filterTable（）函数中。在Chrome或Firefox上运行它会很快运行（小于1秒），并且DOM呈现正确。当我在Safari上执行时，它需要30秒以上。
 
 
 
为什么会这样我能做些什么来适应这个浏览器？ 
 
 
 
 
 
 jQuery：1.11.1（甚至在升级到3.1 .1）。
 $ b  Safari：10.0.1 
 
 Firefox：50 
 
 Chrome：54.0。
 $ 
 
 
解决方案
从代码中删除所有重复和不必要的复杂事件后， pre>  var colRank = 0，colTeam = 1，colGP = 2，colAge = 3，colPos = 4; 
 
函数filterTable（）{
 var minGP = + $（＃mingp）。val（）; 
 var age = + $（＃age）。val（）; 
 var teams = $（＃teamFilter）。val（）。toUpperCase（）; 
 var position = $（＃position）。val（）; 
 var rank = 0; 
 
 $（＃myTablePlayers .playerData）。each（function（）{
 if（
（teams&& this.cells [colTeam] .textContent.toUpperCase （）.includes（teams））|| 
（minGP&& + this.cells [colGP] .textContent< minGP）|| 
（age&&（+ this.cells [colAge] .textContent< age || + this.cells [colAge] .textContent> = age + 1））|| 
（（position ===D|| position ===F ）&& amp; this.cells [colPos] .textContent.indexOf（position）=== -1）|| 
（！（position ===D|| position ===F ）&&（this.cells [colPos] .textContent！== position））
）{
 this.cells [colRank] .textContent = ++ rank; 
 this.style .display =; 
} else {
 this.style.display =none; 
} 
}）; 
} 
  

我已经删除了几乎所有jQuery，以支持本地DOM操作。 / p>

剩下的 .each（）可以被调整为一个普通的旧的 c $ c>循环遍历 document.getElementById（'myTablePlayers'）。tBody [0] .rows ，如果你想排除最后一点可能的表现。 / p>



如果条件通过似然性重新排序：从通常会筛选出最多行到最后一行过滤出最少的行。因为JS短路条件，这种方式更少的条件进行总体检查。

制作 table display：fixed 也可以提高渲染性能，但会降低灵活性。

最后，您可以使用 CSS来做计数器。这可能比手动设置表格单元的内容要快。为自己测试。

I have a large HTML table (1,000-1,500 rows, 40 cols wide). I have a few input and select boxes so users can filter rows. The relevant javascript/jquery (note: not entire code base is pasted in as it is not the bottleneck) attached to it looks like:

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

var teamCols = $(),
    GPCols = $(),
    posCols = $(),
    ageCols = $();

$("#myTablePlayers .playerData").each(function() {
  var columns = $(this).find('td');
  teamCols = teamCols.add($(".colTeam", this));
  GPCols = GPCols.add(columns.eq(colGP));
  posCols = posCols.add(columns.eq(colPos));
  ageCols = ageCols.add(columns.eq(colAge))
});

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

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

    /* Loop through to check for teams */
    if (teams) {
      teamCols.each(function() {
        if (!this.innerHTML.toUpperCase().includes(teams)) {
          $(this).parent().hide();
        }
      });
    }

    /* Loop and check for min GP */
    GPCols.each(function() {
      if ( Number(this.innerHTML) < minGP) {
        $(this).parent().hide();
      }
    });

    /* Check for age requirement */
    if (age) {
      age = Number(age)
      ageCols.each(function() {
        thisAge = Number(this.innerHTML);
        if ( thisAge < age || thisAge >= age+1 ) {
          $(this).parent().hide();
        }
      });
    }

    /* Check the position requirement */
    if (position) {
      posCols.each(function() {
        var thisPos = this.innerHTML
        if (position == "D") {
          if (thisPos.indexOf("D") == -1) {
            $(this).parent().hide();
          }
        } else if (position == "F") {
          if (thisPos.indexOf("D") != -1) {
            $(this).parent().hide();
          }
        } else if (thisPos != position) {
          $(this).parent().hide();
        }
      });
    }

    autoRank();
}

When stripping down the code as minimal as possible, the offending code is the

var.each(function() { ...

in the filterTable() function.

When I run this on Chrome or Firefox it runs quickly (sub 1 second) and the DOM is rendered properly. When I execute on Safari it takes 30+ seconds.

Why is this and what can I do to adapt for this browser?

---

jQuery: 1.11.1 (same issue even after upgrading to 3.1.1).

Safari: 10.0.1
Firefox: 50
Chrome: 54.0.

解决方案

After removing all the repetition and unnecessary complication from your code, this is what remains:

var colRank = 0, colTeam = 1, colGP = 2, colAge = 3, colPos = 4;

function filterTable() {
    var minGP = +$("#mingp").val();
    var age = +$("#age").val();
    var teams = $("#teamFilter").val().toUpperCase();
    var position = $("#position").val();
    var rank = 0;

    $("#myTablePlayers .playerData").each(function () {
        if (
            (teams && this.cells[colTeam].textContent.toUpperCase().includes(teams)) ||
            (minGP && +this.cells[colGP].textContent < minGP) ||
            (age && (+this.cells[colAge].textContent < age || +this.cells[colAge].textContent >= age+1)) ||
            ((position === "D" || position === "F") && this.cells[colPos].textContent.indexOf(position) === -1) ||
            (!(position === "D" || position === "F") && (this.cells[colPos].textContent !== position))
        ) {
            this.cells[colRank].textContent = ++rank;
            this.style.display = "";
        } else {
            this.style.display = "none";
        }
    });
}

I've already removed almost all jQuery in favor of native DOM manipulation.

The remaining .each() could be tuned into a plain old for loop over the document.getElementById('myTablePlayers').tBodies[0].rows, if you want to squeeze out the last bit of possible performance.

Reorder the if conditions by likeliness: From the one that will typically filter out the most rows to the one that will filter out the least rows. Because JS short-circuits conditions, this way less conditions are checked overall.

Making the table display: fixed can also improve render performance at the expense of flexibility.

Finally, you can use CSS to do counters. This is probably faster than manually setting the contents of a table cell. Test for yourself.

这篇关于jQuery的Safari浏览器慢于Chrome / Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！