爲什麼此代碼在Firefox中運行緩慢？

所以我寫了一個簡單的遊戲代碼。代碼在Chrome和Safari中運行速度爲60 fps，但Firefox幾乎無法管理30-40 fps。代碼對我來說看起來很簡單。什麼可能導致延誤？爲什麼此代碼在Firefox中運行緩慢？

我檢查了螢火蟲，發現只有一個函數「follow」正在佔用所有的時間。下面是代碼：

function checkCollision (ball0, ball1) { 
    var dx = ball1.X - ball0.X, 
     dy = ball1.Y - ball0.Y, 
     dist = Math.sqrt(dx * dx + dy * dy); 

    if (dist < ball0.rad + ball1.rad) { 
     var angle = Math.atan2(dy, dx), 
      sin = Math.sin(angle), 
      cos = Math.cos(angle); 

      var pos0 = {x: 0, y: 0}, 
      pos1 = rotate(dx, dy, sin, cos, true), 
      vel0 = rotate(ball0.spdX, ball0.spdY, sin, cos, true), 
      vel1 = rotate(ball1.spdX, ball1.spdY, sin, cos, true), 
      vxTotal = vel0.x - vel1.x; 
     vel0.x = ((ball0.mass - ball1.mass) * vel0.x + 2 * ball1.mass * vel1.x)/
       (ball0.mass + ball1.mass); 
     vel1.x = vxTotal + vel0.x; 
     var absV = Math.abs(vel0.x) + Math.abs(vel1.x), 
      overlap = (ball0.rad + ball1.rad) - Math.abs(pos0.x - pos1.x); 
     pos0.x += vel0.x/absV * overlap; 
     pos1.x += vel1.x/absV * overlap; 
     //rotate positions back 
     var pos0F = rotate(pos0.x, pos0.y, sin, cos, false), 
      pos1F = rotate(pos1.x, pos1.y, sin, cos, false); 
     ball1.X = ball0.X + pos1F.x; 
     ball1.Y = ball0.Y + pos1F.y; 
     ball0.X = ball0.X + pos0F.x; 
     ball0.Y = ball0.Y + pos0F.y; 
     var vel0F = rotate(vel0.x, vel0.y, sin, cos, false), 
      vel1F = rotate(vel1.x, vel1.y, sin, cos, false); 
     ball0.spdX = vel0F.x; 
     ball0.spdY = vel0F.y; 
     ball1.spdX = vel1F.x; 
     ball1.spdY = vel1F.y; 
    } 
} 

function move() 
{ 
    var side,i; 
    for (i=0 ; i < balls.length; i++) 
    { 
     var obj = balls[i]; 
     if (side=obj.edgeX()) 
     { 
      if (side === 'l') 
       obj.X = obj.rad; 
      else if (side === 'r') 
       obj.X = canvas.width() - obj.rad; 
      obj.spdX*=-1; 
     } 
     if (side=obj.edgeY()) 
     { 
      if (side === 't') 
       obj.Y = obj.rad; 
      else if (side === 'b') 
       obj.Y = canvas.height() - obj.rad; 
      obj.spdY*=-1; 
     } 

     if (leash == true && i === 0) 
     { 
      if (mouse.X>obj.X && (obj.spdX<10)) 
       obj.spdX+=obj.accX; 
      else if (mouse.X<obj.X && (obj.spdX>-10)) 
       obj.spdX-=obj.accX; 
      if (mouse.Y>obj.Y && (obj.spdY<10)) 
       obj.spdY+=obj.accY; 
      else if (mouse.Y<obj.Y && (obj.spdY>-10)) 
       obj.spdY-=obj.accY; 
     } 


     obj.X+=obj.spdX; 
     obj.Y+=obj.spdY; 
     if (Math.abs(obj.spdX)>0.1) 
      obj.spdX*=0.98; 
     else obj.spdX=0; 
     if (Math.abs(obj.spdY)>0.1) 
      obj.spdY*=0.98; 
     else obj.spdY = 0; 
    }; 
} 

function follow() 
{ 
    var ballA, i, ballB,j; 
    requestAnimationFrame(follow); 
    //stats.begin(); 
    context.clearRect(0,0,canvas.width(),canvas.height()); 

    move(); 
    for (i = 0, len = balls.length - 1; i < len; i++) { 
      ballA = balls[i]; 
      for (j = i + 1; j < balls.length; j++) { 
      ballB = balls[j]; 
      checkCollision(ballA, ballB); 
      } 
    } 
    balls.forEach(function(obj){ 
     drawCircle(obj.X,obj.Y,obj.rad, obj.color); 
     if (leash == true && obj.control === true) 
     {drawLeash(mouse.X,mouse.Y,obj.X,obj.Y,obj.color);} 
    }); 
    //stats.end(); 
};

這裏是動畫：http://ipsumturpis.xtreemhost.com/follower/index.html

來源

2012-06-10 ArsalanDotMe

在http://ipsumturpis.xtreemhost.com/follower/index.html的頁面剛剛死亡，因爲周圍沒有Stats對象...任何顯示問題的工作頁面的機會？ –

修復了鏈接和問題。再次檢查 – ArsalanDotMe

嗯。你如何測量fps？目光看起來，它在Firefox和Chrome中看起來大致相同.... –

我依稀記得曾經有在FF與畫布繪製性能有關的問題，所以我註釋掉drawCircle(obj.X,obj.Y,obj.rad, obj.color);和噗，神奇的事情發生 - 我的幀速率從11 FPS上升到60.

來源

2012-06-10 00:59:15 c2h5oh

嘗試在變量中緩存球長度。除非由於我沒有看到的原因絕對必要，否則在循環的每次迭代中運行balls.length（或任何函數）自然會非常耗時。

因此，嘗試這樣的事情;

ballslen = balls.length; 
for (j = i + 1; j < ballslen; j++)

來源

2012-06-10 02:30:44 bmorenate

爲什麼此代碼在Firefox中運行緩慢？

回答

相關問題