奇怪的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迭代）渲染性能去从5毫秒到1000-2000msg。 我测试过Chrome和Firefox，它看起来像GC问题，但我不确定。可能还有另一种可能性，可以用图像生成舞台 - 我有大约20种不同的图像（50x50 - 不是很大）和50-200个投影。

但无论如何，我不能相信，kinectjs应该对如此少量的对象工作如此糟糕 - 可能是我做错了什么，我的对象没有正确清理。

Answer 1

removeChildren会将孩子从舞台上移除，但会将这些移除的孩子留在内存中，以备日后重新添加。

因此，你正在积累最终降低性能的儿童。

使用destroyChildren而不是以后再打算重用孩子。