フェードイン/アウトすると多くの（20程度）のアイテムが同時に大きなパフォーマンスヒットを引き起こします。溶液？

Question

私は、ぼかしされた都市景観の背景イメージを持つ大規模なクライアントのために取り組んでいるサイトを持っています。背景イメージには、約20個ほどの要素がバックグラウンドでシミュレートされます。フェーディングのパフォーマンスが悪いと理解している間に、私は19の要素があまりにも悪くないと考えました。私は間違っていた。それが今の現状では

は、各要素が再帰的に次のように輝くを処理します。

function sparkle(flag, time) { 
    if (flag) { 
     setTimeout(function() { 
      self.fadeIn(getRandomInt(250,1000), function() { 
       sparkle(!flag, getRandomInt(250,1000)); 
      }); 
     }, time); 
    } else { 
     setTimeout(function() { 
      self.fadeOut(getRandomInt(250,1000), function() { 
       sparkle(!flag, getRandomInt(250,1000)); 
      }); 
     }, time 
    } 
} 

私はすべてのパフォーマンスヒットが極端である異なる速度で行くこれらの20を実行したとき。問題は、このサイトはIE7（私たちはカスタムfadein/out機能を持っている）に行く必要があるので、私はいくつかのオプションが残っている。

私の即時の答えは、CSSの不透明遷移サポートをチェックして、フェードインとアウトをCSSトランジションに変換することです。現代のブラウザではもっと速くなければなりません（そして、ie7でフェードしない）。元のスタイルを最適化してより速く実行できるようにする方法があるのだろうかと思っていました。私は過度の数のクランチと、パフォーマンスヒットの原因となった時間の経過と共にフェードレートを決定する要素ごとにコールバックが行われると想定しています。とにかく、残りの部分が自分自身のオフセット（それが理にかなっていれば）の基になることができるフェーディングを1つの要素に持たせることはありますか？そのさえフェードインまたはアウトにリンクされているのではなく、複数の大きな透明の画像が存在期間されていない、さらにテストした後の減速を引き起こしている。表示された事前

Answer 1

で

感謝それはまったく異なる問題なので、新しい質問として投稿します。回答いただきありがとうございます。