0

私はeaseljsで遊んでいますが、パフォーマンスが低下し始めていることがわかりました。私の例では、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

(大まかな) パフォーマンスのタイムライン(mid2012 macbook air の OSX 10.8.2)

クローム v26.0.1410.43

  • 0-3 秒 = 90fps
  • 3 秒 = fps が低下し始める
  • 6 秒 = fps が 60 fps に達する

サファリ v6.0.2 (8536.26.17)

  • 0-20 秒 = 90fps
  • 20 秒 = fps が低下し始める
  • 35 秒 = fps が 60 fps に達する

Firefox v20

  • fsFiddle ホスト: 完全に不安定
  • ローカルにホストされている: Chrome のパフォーマンスによく似ていますが、はるかに不安定です
4

1 に答える 1

11

EaselJS グラフィックは保持されるため、フレームごとに別の円定義をGraphicsキューに追加します。したがって、1000 回の「再描画」呼び出しの後、毎回 1000 個の円が描画されます。

Graphics.clear()描画キューをリセットするために使用するか、円を 1 回描画して対応する形状を移動します (推奨)。

これは、私にとって堅実な99fpsを取得する、あなたのFiddleの修正版です： http://jsfiddle.net/5xYxM/13/

于 2013-04-10T17:33:14.910 に答える