CSS3の移行はウェブサイトの速度を低下させますか？

私は現在CSS3トランジションを私のウェブサイトに追加しました。私はそれが可能ならshureではない、それは私のウェブサイトを遅くするが、すべてがちらつくようであり、トランジションとフラッシュビデオにこの "ジャッキーな動き"があります。CSS3の移行はウェブサイトの速度を低下させますか？

私はMozilla Firefox 10.0.02を使用しています。

私は私のCSSスタイルシートに次の追加：

*:link, *:visited, *:hover, *:active, *:focus { 
    -webkit-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    -o-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    -moz-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
}

それは遅いものではなく、私のブラウザのか、それは私が追加CSSで、場合ならば、何が証拠だ場合、あなたが私に言うことはできますか？

ありがとうございました！

出典

2012-03-01 James Cazzetta

まあ、あなたのブラウザは遅いですが、その原因となるCSSルールである可能性があります。あなたはそれがどんなに速くなるかを見るためにルールを削除しようとしましたか？これは論理的な最初のステップです –

どのブラウザ/ UAでパフォーマンスが低下していますか？ Androidは1.xと2.xのCSS3の貧弱な移行で知られています –

@pekka遷移なしではより速くなるようです.. –

これは、これらの状態のすべてにトランジションを追加したためです。

私が変更したい：

*:link, *:visited, *:hover, *:active, *:focus {

を

a:link, a:visited, a:hover, a:active, a:focus, [...Other elements...] {

にだから、より標的化さです。それ以外の場合、マウスを動かすと、ホバー状態がトリガーされ、ブラウザはトランジションをチェックする必要があります。

出典

2012-03-01 12:20:11

具体的な改善の提案のために+1 –

パフォーマンス上の問題を引き起こすのは '*'セレクタではないことを指摘しなければなりません**（セレクタから最適化されるべきですとにかく）あまりにも多くの要素への遷移を適用し、その結果としてあまりにも多くのものをアニメートしようとすると、ボトルネックは正当に落ちます。ユニバーサルセレクタであらゆる種類の基本的な処理を行うことができ、ブラウザはうまく追いつきますが、*遷移*はコストがかかります。 – BoltClock

ターゲット設定後にうまくいく、ありがとう！ –

アニメーションの種類によってグラフィックスシステムに負担がかかりますが、CSSのトランジションとFlashのようなプラグインを組み合わせると、レイヤーを結合する必要があるため、負荷が悪くなります。あなたのフラッシュモードは透明に設定されていますか？そうであれば、不透明を使用してみてください。これはフラッシュアニメーションが何が起こっているかを気にすることを止めるからです（技術的にはビデオドライバのオーバーレイになります）。

出典

2012-03-01 12:21:27 SpliFF

CSS3の移行はウェブサイトの速度を低下させますか？

答えて

関連する問題