11

この質問は、2 年前に尋ねられたこの別の質問と精神的に似ています:このコードでラファエルのフレームレートが遅くなるのはなぜですか?

次のように、Chromium 25 で Raphael 2.1.0 を使用しています。

<html>
<head>
  <title>Drawfun</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <script src="raphael.js"></script>
  <script>
    var paper = Raphael(10, 50, 320, 200);
    var anim = Raphael.animation({transform: "R360"}, 500).repeat(Infinity);

    var rect = paper.rect(50, 40, 10, 20);
    rect.attr("fill", "#f00");
    rect.attr("stroke", "#fff");
    rect.animate(anim);
  </script>
</body> 
</html>

最初は、予想どおり、長方形がスムーズに回転します。1 ～ 2 分後、ローテーションは ~15 FPS で実行されます。5 ～ 8 分後、アニメーションは ~5 FPS で実行されます。

Chrome の CPU プロファイルは、アニメーションが途切れ途切れになるにつれて、スクリプトが と で費やす時間がますます短くなっていることを示してい(program)ます。repusheve.listeners

Chrome タスク マネージャーは、JS メモリ プールまたは Chrome のいずれかにメモリ リークがあることを示していませんが、時間の経過とともにページがより多くの CPU を消費していることを示しています。

そのページを最近のバージョンの Firefox で実行すると、アニメーションが非常に速く途切れ途切れになります。これらの結果は Linux と Windows で検証されているため、OS の問題ではありません :)。

私のコードまたは Raphael の内部構造のどこに問題があるのか​​、誰かが洞察を持っていますか?

4

1 に答える 1

2

わかりました、これは誰もが聞きたがっている答えではないことはわかっています (そして議論の余地のある警官です)。これはガベージ コレクションの問題であり、すべてのブラウザで結果が異なる理由です。Raphael ソースをざっと見てみると、フレームをアニメーション化するプロセスで、フレームごとにかなりの数の var が宣言または実装されているように見えます。少なくとも Chrome の V8 エンジンでは、各 var が追跡可能なメソッドで宣言され、ヒープに置かれるという事実を知っています。使用されなくなった変数を宣言しました。

webglへの適応のカスタム実装でこの問題に遭遇しました。基本的に、webglを有効にせずにwebglコマンドを機能させていました。私が構築したパイプラインのラスタライザーには、これと非常によく似た問題がありました。基本的には 68 fps で始まるフレームを描画しますが、テストの終わりまでに 13 fps またはそれ以下になり、プロセッサの使用率は 98% になります。パイプライン スコープ外の新しいメモリ割り当てを作成するすべての宣言をクリーンアップするまで (そして、変数ルックアップに関係するいくつかのよく研究された高速化のトリックを実行するまで)、最終的に追いついて生成することができませんでした。 50-60fps レートを維持しながら、一度に約 3-5MB/s のピクセルを画面に送ることができるよく書かれたラスタライザー。

繰り返しますが、これがあなたが望む、または必要とする答えであるかどうかはわかりませんが、正しいものだと思います。:(申し訳ありませんが、それ以上のことはできませんでした。頑張ってください:)

于 2013-03-23T01:40:28.597 に答える