當我畫帆布使用kineticjs時，內存增加非常快

Question

我使用HTML5和kineticjs庫創建遊戲。我使用Nodejs啓動服務器。代碼：

function animate() { 
    newDraw() 

    // Request a new animation frame using Paul Irish's shim 
    window.requestAnimFrame(animate); 
}; 

function newDraw() 
{ 

    if(typeof localPlayer != 'undefined') { 

     var layernew = new Kinetic.Layer(); 
     var stg = new Kinetic.Stage({ 
      container: 'container', 
      width: 500, 
      height: 300 
     }); 

     var data = localPlayer.newdraw(); 
     layernew.add(new Kinetic.Text(data.Text)) 
     layernew.add(new Kinetic.Rect(data.rect)) 

     stg.add(layernew) 

    } 
} 

內requestAnimationFrame.js文件

// shim layer with setTimeout fallback 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(/* function */ callback, /* DOMElement */ element){ 
      window.setTimeout(callback, 100); 
      }; 
})(); 

它正常工作，但內存的增加速度非常快=>火狐瀏覽器崩潰。 請幫我修復這個bug。 非常感謝！

Answer 1

問題是：

你正在創建每個動畫循環期間附加級+層+元素。

很快你會有數百個對象都佔用內存。

相反：

創建階段+層+文字+ RECT一旦動畫開始之前。

然後使用各種object.set ...命令在每個動畫循環中操作現有的文本+ rect。