使用循环的Javascript性能问题
我们遇到了该代码的性能问题,它循环工作150次。使用循环的Javascript性能问题
该代码适用于投注,比赛在屏幕上有空的投注区域。然后该代码适用于查看和比较分数以填补赢家赔率。
例如,如果比赛完成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并使用带有类的标签选择器。
您没有缓存任何JQ选择器。 $('#someId')做了一些工作(虽然比其他任何东西都快)如果要重用,分配给var。Convention是:var
$someId = $('#someId');
所以你知道它是一个jqObject。 :$('#someId <other stuff>)
可能比这个要慢:$someId.find(<otherstuff>)
反复在你的情况下,假设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
把所有的布局代码的是循环的,你会提高性能。所有'fade'和'html'调用**非常**代价高昂。 – 2012-08-07 15:30:00
您的ID在整个页面中是唯一的吗? ''#match _“+ odd.ID +”[oddcode ='MS']“'和'”#match _“+ odd.ID +”[oddtag ='MS']“'应该始终是同一个元素。 – Blazemonger 2012-08-07 15:30:13
@TorstenWalter只要有可能,用'.text'替换'.html'?并向该元素添加一个类,并在循环外一次全部淡入其中? – Blazemonger 2012-08-07 15:35:19