javascript - 奇怪的 Kineticjs 性能问题

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。