Strange Kinecticjs performance issue

Question

I have the kincetjs stage that updated rather often but actually nothing incredible - about 1 time per 2-5 seconds. This stage contains of ~50-200 images objects:

_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);

},

but rather quickly (after 2-3k iterations) rendering performance goes down from 5ms to 1000-2000msg. I have tested chrome and firefox, it's looks like GC problem but I am not sure. May be there existst another possibility to generate stage with images - I have about 20 different Images (50x50 - not very large) and 50-200 their projections.

But anyway I cant beleive that kinectjs should work so bad on such small amount of objects - may be I'am doing something wrong and my objects are not properly cleanuped.

Answer 1

removeChildren will remove the children from the stage, but will keep those removed children in memory in case you want to re-add them later.

So you are accumulating removed children which eventually degrades performance.

Use destroyChildren instead if you don't intend to reuse the children later.