Question

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

问题：

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

示例为了演示我遇到的性能影响，我在循环上创建了一个简单的圆重绘动画，但帧速率很快就开始下降。如果我恢复到纯画布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()重置绘制队列，或者只绘制一次＆amp;移动相应的形状（推荐）。

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

Easeljs表现下降？

1 个答案: