javascript - 当我使用 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);
          };
})();

它工作正常，但内存增加非常快=> Firefox 浏览器崩溃。请帮我修复这个错误。非常感谢！！！

Answer 1

问题是：

您在每个动画循环期间创建额外的阶段+层+元素。

很快你就会有数百个对象都占用内存。

反而：

在动画开始之前创建一次stage+layer+text+rect。

然后使用各种 object.set... 命令在每个动画循环中操作现有的 text+rect。