使用循環的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); 




}

來源

2012-08-07 erkan demir

把所有的佈局代碼的是循環的，你會提高性能。所有'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

有很多不好的東西在裏面的資源：

問題：

您在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 
}

來源

2012-08-07 16:17:54

您可以'＃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

來源

2012-08-07 15:44:31

使用循環的Javascript性能問題

回答

相關問題