我的 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 在如此少量的对象上表现得如此糟糕 - 可能是我做错了什么并且我的对象没有正确清理。
最佳答案
removeChildren
将从舞台中删除子项,但会将这些删除的子项保留在内存中,以备您稍后想要重新添加它们。
因此,您正在累积被删除的子项,这最终会降低性能。
如果您以后不打算重用子级,请使用 destroyChildren
。
关于javascript - 奇怪的 Kineticjs 性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29356277/