使用するアニメーションの約50％をRaphael.jsに大きく依存する、かなりリソースを大量に消費するWebアプリケーションに取り組んでいます。残りは、webkitRequestAnimationFrameをWebAudioAPIのcontext.currentTimeと組み合わせて使用する独自のアニメーションメソッドを使用しています。アニメーションをオーディオコンポーネントと同期します。
現在、かなりひどいパフォーマンスを経験しており、Raphaelのソースを見ると、requestAnimationFrameも使用していることがわかります。私が経験しているラグのほとんどは、私のアニメーションとRaphaelの両方が同時に実行されているときに発生するようです。これは、requestAnimationFrameが基本的に描画サイクルごとに2回呼び出されているためですか？
基本的に私が求めているのは、基本的に、ラファエルオブジェクトのアニメーションの独自の実装を再ロールして、既存のrequestAnimationFrameに貼り付ける必要があるかどうかです。
うーん、私が知る限り、RAFの全体的なポイントは、次のレンダリング更新の準備ができるようにすべてを同期することです。これが要点なので、私はあなたとまったく同じことをしているでしょう。
仕様によると：
ユーザーエージェントは、ディスプレイのリフレッシュレートに一致する定期的な間隔で、アニメーションタスクソースからタスクを実行することが期待されます。より低いレートでタスクを実行すると、アニメーションがスムーズに表示されない可能性があります。より高いレートでタスクを実行すると、ユーザーに見えるメリットなしに余分な計算が発生する可能性があります。
だから私はそれがパフォーマンスのヒットになるべきではないと言うでしょう。
SVG アニメーションが遅いという同様の問題があります。RAF についての私の理解では、更新がどこから来てもまとめてバッチ処理されるということです。そのため、それが問題だったとは思いません。
私のサイクルのほとんどは、塗り直しに費やされていることがわかりました。再描画を高速化するために JS に関してできることはあまりありません。しかし、透明効果、フィルター、および画面の大きな領域の変更を減らすことで、ブラウザーでより簡単にできると思います。また、再描画は、更新するピクセルの量の関数です。フルスクリーン サイトを作成していますが、ビューポート サイズを 2 倍にすると、ペイント時間が 2 倍になります。