Question

We are having performance issues with that code.It works in loop with 150 times.

That code work for betting, matches have empty bet fields on screen.Then that code works for fill winner odds with looking and comparing scores.

In example, if match finished with 1-0 home team win, i must write “MS1” on screen.And for making that, i must get score info using jQuery attr selector.

In the weekends, there are a lot of matches and it is crashing or it works too slow :/

Have you any ideas to work faster?

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




}

Answer 1

There’s a lot of bad stuff in there:

Issues:

• You are hammering away at the DOM repeatedly. This is unavoidable but you don’t need to do as much as you are doing. A lot of the remaining points follow-up on how to avoid.

• You’re using attribute selectors. These are slow and don’t have native methods to support in most non-XML scenarios so are going to force a lot more work out of the interpreter. Try as classes instead. You can have multiple classes and add/remove with jQuery addClass and removeClass functions without interfering with other classes. If you’re supporting IE8, narrow down to nearest ID and use a tag selector with a class.

• You’re not caching any of your JQ selectors. $(‘#someId’) does a bit of work (although is faster than just about anything else. If it’s going to get re-used, assign to a var. Convention is: var $someId = $('#someId'); so you know it’s a jqObject. This repeatedly: $('#someId <other stuff>) is probably slower than this: $someId.find(<otherstuff>) repeatedly. In your case, assuming odd.id is unique, you’d at least want: var $matchHtml = $("#matchCode_" + odd.ID) at the top of the loop.

• You’re doing a ton of UI stuff as you go. Consider building the collections you need and then handling it all at once after the loop. e.g. building two JQ objects for AU and TG (see the ‘add’ method) and then hitting them with the functionality they need once the loop is complete.

• This is probably less of a big deal than the JQ stuff but you’re using a lot of ‘.’ operators unnecessarily. Every ‘.’ does actually represent some work and in some cases actually represent getters like length which can do a fair bit more work since they have to count up the array elements. Here’s the hyper-anal loop which also has the nice side-effect of being more concise:

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
}