奇怪的Kinecticjs表现问题

时间:2015-03-30 21:05:55

标签: javascript html5 kineticjs

我的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应该在如此少量的物体上工作如此糟糕 - 可能是我做错了什么而且我的物体没有得到适当的清理。

1 个答案:

答案 0 :(得分:2)

removeChildren会将儿童从舞台中删除,但会将这些被删除的儿童留在内存中以防您以后再重新添加。

所以你正在积累被移除的孩子,这最终会降低他们的表现。

如果您不想在以后重复使用这些孩子,请使用destroyChildren