0

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

问题：

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

示例 为了演示我遇到的性能损失，我在循环上创建了一个简单的圆形重绘动画，但帧速率很快开始下降。如果我恢复到纯画布 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

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

铬 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

火狐 v20

  • fsFiddle 托管：完全不稳定
  • 本地托管：很像 Chrome 的性能，但更不稳定
4

1 回答 1

11

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

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

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

于 2013-04-10T17:33:14.910 回答