问题描述
我有一个大的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短路条件，这种方式更少的条件进行总体检查。
制作也可以提高渲染性能，但会降低灵活性。
最后，您可以使用。这可能比手动设置表格单元的内容要快。为自己测试。
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！