奇怪的Kinecticjs性能问题

Question

我的kincetjs阶段经常更新，但实际上并不令人难以置信-每2-5秒大约1次。 此阶段包含约50-200个图像对象：

_renderDices: function() {
  var dt0 = (new Date()).getTime();


  this.diceLayer.removeChildren();
  this.diceLayer.clear();

  var dt3 = (new Date()).getTime();

  for ( var j = 0 ; j < this.imagesCount; j++) {
        var image = new Kinetic.Image({
            x: this.images[j].X,
            y: this.images[j].Y,
            image: this.images[j].imageObj,
            width: this.width ,
            height: this.height,
            listening: false
        });
        this.diceLayer.add(image);
  }

  var dt2 = (new Date()).getTime();

  this.diceLayer.draw();

  var dt1 = (new Date()).getTime();

  console.log("renderTime " + (dt1 - dt0 ) + " ms, drawTime: " + (dt1 - dt2) + " ms , clearTime: " + (dt3-dt0)+"ms children=" + this.diceLayer.children.length);

},

但很快（在2-3k次迭代后），渲染性能从5ms降低到1000-2000msg。 我已经测试了chrome和firefox，它看起来像是GC问题，但我不确定。 可能还没有另一种可能会生成带有图像的舞台-我有大约20个不同的图像（50x50-不是很大），其投影为50-200。

但是无论如何，我无法相信kinectjs在如此少量的对象上应该表现得很差-可能是我做错了什么，并且我的对象没有正确清理。

Answer 1

removeChildren将删除舞台上的子级， 但会将这些删除的子级保留在内存中，以备日后重新添加时使用。

因此，您正在积累被删除的子项，这最终会降低性能。

如果您不打算以后再使用子代，请使用destroyChildren代替。