私は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
後で子を再利用する予定がない場合は、代わりに使用してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加