循环的 JavaScript 性能问题
Javascript performance issue with loop
我们在使用该代码时遇到了性能问题。它循环工作 150 次。
该代码适用于投注,比赛屏幕上有空的投注字段。然后,该代码用于通过查看和比较分数来填充获胜者赔率。
例如,如果比赛以 1-0 主队获胜结束,我必须在屏幕上写"MS1"。为此,我必须使用 jQuery attr 选择器获取分数信息。
在周末,有很多比赛,它崩溃或工作太慢:/
您有什么想法可以更快地工作吗?
OddEngine = function(odd)
{
$("#matchCode_" + odd.ID).html(odd.C);
$("#match_" + odd.ID).attr("code",odd.C);
var status = $("#match_" + odd.ID).attr("status");
if (status == 1)
return;
var htscore = $("#othomeTeamScore_"+odd.ID).html();
var atscore = $("#otawayTeamScore_"+odd.ID).html();
var iy_htscore = $("#homeTeamHalfScore_"+odd.ID).html();
var iy_atscore = $("#awayTeamHalfScore_"+odd.ID).html();
for (var i = 0; i < odd.Odds.length; i++) {
var bet = odd.Odds[i];
var winnerMsOdd = 'F.X';
var winnerMsTitle = 'X';
if (htscore > atscore)
{
winnerMsOdd = 'F.1';
winnerMsTitle = '1';
}
else if (htscore < atscore)
{
winnerMsOdd = 'F.2';
winnerMsTitle = '2';
}
$("#match_"+odd.ID+" [oddcode='MS']").html(bet[winnerMsOdd]);
$("#match_"+odd.ID+" [oddtag='MS']").fadeIn();
$("#match_"+odd.ID+" [oddtag='MS']").html(winnerMsTitle);
if (currentSportId != 3)
{
var winnerIyOdd = 'S.X';
var winnerIyTitle = 'X';
if (iy_htscore > iy_atscore)
{
winnerIyOdd = 'S.1';
winnerIyTitle = '1';
}
else if (iy_htscore < iy_atscore)
{
winnerIyOdd = 'S.2';
winnerIyTitle = '2';
}
if (bet[winnerIyOdd])
{
$("#match_"+odd.ID+" [oddcode='IY']").html(bet[winnerIyOdd]);
$("#match_"+odd.ID+" [oddtag='IY']").fadeIn();
$("#match_"+odd.ID+" [oddtag='IY']").html(winnerIyTitle);
}
}
if (currentSportId == 1)
{
var winnerAuOdd = 'UNDER';
if (parseInt(htscore) + parseInt(atscore) > 2.5)
{
winnerAuOdd = 'OVER';
}
if (bet[winnerAuOdd])
{
$("#match_"+odd.ID+" [oddcode='AU']").html(bet[winnerAuOdd]);
$("#match_"+odd.ID+" [oddtag='AU']").fadeIn();
$("#match_"+odd.ID+" [oddtag='AU']").html(winnerAuOdd == 'UNDER' ? 'ALT' : 'ÜST');
}
var winnerTGOdd = 'GS.01';
var winnerTGtitle = "0-1";
if (parseInt(htscore) + parseInt(atscore) > 1 && parseInt(htscore) + parseInt(atscore) < 4)
{
winnerTGOdd = 'GS.23';
winnerTGtitle = "2-3";
}
else if (parseInt(htscore) + parseInt(atscore) > 3 && parseInt(htscore) + parseInt(atscore) < 7)
{
winnerTGOdd = 'GS.46';
winnerTGtitle = "4-6";
}
else if (parseInt(htscore) + parseInt(atscore) >= 7)
{
winnerTGOdd = 'GS.7P';
winnerTGtitle = "7+";
}
if (bet[winnerTGOdd])
{
$("#match_"+odd.ID+" [oddcode='TG']").html(bet[winnerTGOdd]);
$("#match_"+odd.ID+" [oddtag='TG']").fadeIn();
$("#match_"+odd.ID+" [oddtag='TG']").html(winnerTGtitle);
}
}
}
$("#msOdd_" + odd.ID).html(odd.C);
if (currentSportId == 1 || currentSportId == 2 || currentSportId == 7)
{
$("#htOdd_" + odd.ID).html(odd.Odds["F.1"]);
}
$("#uOdd_" + odd.ID).html(odd.C);
$("#tOdd_" + odd.ID).html(odd.C);
}
不好的东西:
问题:
你正在反复敲打 DOM。这是不可避免的,但你不需要像现在这样做那么多。剩下的很多要点都跟进了如何避免。
您使用的是属性选择器。这些方法很慢,并且在大多数非 XML 方案中没有本机方法支持,因此会迫使解释器完成更多的工作。改为尝试作为类。你可以有多个类,并使用jQuery addClass和removeClass函数进行添加/删除,而不会干扰其他类。如果您支持 IE8,请缩小到最近的 ID,并将标记选择器与类一起使用。
$('#someId') 做了一些工作(尽管比其他任何东西都快。如果要重用它,请分配给 var。约定是:var
$someId = $('#someId');
所以你知道它是一个 jqObject。这反复:$('#someId <other stuff>)
可能比这慢:$someId.find(<otherstuff>)
反复。在你的例子中,假设 odd.id 是唯一的,你至少需要:var $matchHtml = $("#matchCode_" + odd.ID)
在循环的顶部。你正在做大量的UI工作。考虑构建所需的集合,然后在循环后立即处理所有集合。例如,为 AU 和 TG 构建两个 JQ 对象(参见"add"方法),然后在循环完成后使用它们所需的功能来击中它们。
这可能比 JQ 的东西没什么大不了的,但你不必要地使用了很多"."运算符。每个"."实际上都表示一些工作,在某些情况下实际上代表像长度这样的getter,它们可以做更多的工作,因为它们必须计算数组元素。这是超肛门环,它也有一个很好的副作用,即更简洁:
var myOdds = odd.Odds,
i=myOdds.length;
//if order matters, this goes backwards. Easy fix: myOdds.reverse
while(i--){
thisOdds = myOdds[i];//if you're using thisOdds more than once
//do stuff here
}
您可以使用"#match"+odd.ID 节点,并在该节点的循环中键入所有节点搜索。 例如。 matchOdd.find( '[oddcode="MS"]' ),这应该可以提高查询 DOM 的性能。
至于提高循环中的性能,您可以考虑通过委托给 setTimeout 来使其异步。这是一个资源的链接,解释了如何处理这个 http://www.kryogenix.org/days/2009/07/03/not-blocking-the-ui-in-tight-javascript-loops
- 使用正则表达式评估电子邮件地址时出现性能问题
- 在循环中附加事件处理程序时出现浏览器性能问题
- 角度指令性能问题
- 奇怪的Kineticjs性能问题
- 使用HTML和JS的iPhone游戏中的性能问题,以及appMobi
- 菜单性能问题
- 性能问题:通用选择器与单独绑定
- 离子框架移动应用程序性能问题
- 性能问题高图表图和 socket.io
- 样式 DOM 上的 $.before() 性能问题
- Ajax发布到PHP脚本,每5秒查询一次MySQL数据库的性能/问题
- 循环的 JavaScript 性能问题
- 性能问题:存储对DOM元素的引用与使用选择器相比
- 很多主干视图-性能问题
- jquery性能问题,操作注册
- 在web工作者、快速定时器和$scope中遇到AngularJS性能问题$apply()
- 使用pixi和p5声音库制作的听觉反应视觉效果的性能问题
- 更多的 DOM 元素会产生性能问题
- 主要面临性能问题
- 使用ng-grid的问题-性能,响应