奇怪的 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-2000 毫秒。我已经测试了 chrome 和 firefox，看起来像是 GC 问题，但我不确定。可能存在另一种用图像生成舞台的可能性 - 我有大约 20 张不同的图像（50x50 - 不是很大）和 50-200 个它们的投影。

但无论如何我无法相信 kinectjs 在如此少量的对象上工作得如此糟糕 - 可能是我做错了什么并且我的对象没有正确清理。

Answer 1

removeChildren 将从舞台上移除 children， 但会将移除的 children 保留在内存中，以防你想要 re-add 它们稍后.

所以你正在累积删除 children 这最终会降低性能。

如果您以后不打算重复使用 children，请改用 destroyChildren。

奇怪的 Kinecticjs 性能问题

Strange Kinecticjs performance issue

html

javascript

kineticjs