Easeljs表现下降？

Question

我一直在玩画架,我发现演出开始下降.在我的示例中,Chrome需要大约3秒才能达到这一点,Safari需要25秒,Firefox就到处都是.

问题:

1. 我做错了什么？
2. 或者这是我应该从画架中获得的性能打击？

示例 为了演示我遇到的性能影响,我在循环中创建了一个简单的圆重绘动画,但帧速率很快就开始下降.如果我恢复到纯画布API调用,那么它将重新获得性能.

下面是我重绘的关键片段,它选择绘制圆圈的方法:

if ( counter.fps > 60) {
    circle.graphics.beginFill('green')
    circle.graphics.drawCircle(0,0, w / 10)
    circle.graphics.endFill();
    stage.update();
} else {    
    context.beginPath();
    context.arc(circle.x, circle.y, w / 10, 0, 2 * Math.PI, false);
    context.fillStyle = "darkred";
    context.fill();
}

有关演示,请参阅此jsfiddle:http: //jsfiddle.net/AshCoolman/5xYxM/9/

我尝试过类似结果的变化:

• requestAnimationFrame(和pollyfill)
• fps较慢

(粗略)性能时间表(2012年中期macbook air OSX 10.8.2)

Chrome v26.0.1410.43

• 0-3s = 90fps
• 3s = fps开始下降
• 6s = fps达到60fps

Safari v6.0.2(8536.26.17)

• 0-20s = 90fps
• 20s = fps开始下降
• 35s = fps达到60fps

Firefox v20

• fsFiddle托管:完全不稳定
• 本地托管:很像Chromes的表现,但更不稳定

Answer 1

保留EaselJS图形,因此每帧都要添加另一个圆形定义到Graphics队列.因此,在1000次"重绘"调用之后,每次绘制1000个圆圈.

使用Graphics.clear()重置抽奖队列,或只是画圆一旦与移动对应的形状(推荐).

这是你的小提琴的修改版本,它为我获得了坚实的99fps:http: //jsfiddle.net/5xYxM/13/