Easeljs 性能下降？

Question

我一直在玩easeljs，但我发现性能开始下降。在我的示例中，Chrome 大约需要 3 秒才能到达这一点，而 Safari 需要 25 秒，而 Firefox 无处不在。

问题：

1. 我做错了什么？
2. 或者这是我应该从easeljs获得的性能提升？

示例 为了演示我正在体验的性能冲击，我在循环上创建了一个简单的圆形重绘动画，但帧速率很快开始下降。如果我恢复到纯画布 API 调用，那么它会恢复性能。

下面是我重绘中选择画圆方法的关键sn-p：

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）
• 帧率变慢

（粗略）性能时间表（OSX 10.8.2 on mid2012 macbook air）

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 托管：完全不稳定
• 本地托管：与 Chrome 的性能非常相似，但更不稳定

Answer 1

EaselJS 图形被保留，所以每一帧你都在向Graphics 队列添加另一个圆圈定义。因此，在 1000 次“重绘”调用之后，它每次绘制 1000 个圆圈。

使用Graphics.clear() 重置绘制队列，或者只绘制一次圆圈并移动相应的形状（推荐）。

这是 Fiddle 的修改版本，对我来说可以达到稳定的 99fps： http://jsfiddle.net/5xYxM/13/