この繰り返しのアニメーション コードはシステムの速度を低下させますか?:
@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}
すべての CSS3 プロパティは CPU 集中型ですか?
ありがとう。
9321 次
5 に答える
6
各ブラウザーには CSS3 の独自の実装があり、効果が処理およびレンダリングされる方法はさまざまです。あるブラウザは特定のものを詰まらせますが、別のブラウザは詰まらせないことがあります。CSS3 効果を過度に使用しないでください。そうすれば、すべてがうまくいきます。パフォーマンスが本当に気になる場合は、古いラップトップなどを使用していつでもサイトをテストできます。詰まる場合は、グラデーションなどで誇張している可能性があります。
私の仲間のプログラマーの 1 人が言うように (C++ アプリケーションに関してですが、ここでは完全に当てはまります): 実際に気付くまでパフォーマンスの問題について心配する必要はありません :)。
于 2011-12-06T17:23:50.467 に答える
4
box-shadow と text-shadow の使用は避けてください。ページ全体または body 要素をアニメーション化したり、translate3d、scale3d、rotate3d を使用したりしないでください。これらは、コンピューターやモバイル デバイスでハードウェア アクセラレーションを使用するためです。前述のように、アニメーション プロパティの過度の使用は避けてください。しかし、1 つまたは 4 つの無限にアニメーション化された要素でページが遅くなるとは思えません。
アップデート
注意してください！ブラウザーは現在、transform-3D プロパティのハードウェア アクセラレーションをドロップしています。現在および将来的にアプリを最適化するには、他の方法を使用する必要があります。
于 2011-12-08T17:27:48.700 に答える
4
約 15 個の要素が地震のように揺れているように見える Web ページがありました。アニメーションは 10% ずつ増加し、1 秒間続きます。無限ループで繰り返されます。プロセッサの使用が急増していることに気付きました。だから私はそう言うでしょうが、それはアニメーションに依存します.
于 2012-11-30T21:46:25.063 に答える
1
アニメーションを表示するときは、ブラウザの CPU 使用率を確認します。システムの速度を低下させない機能もあれば、低下させる機能もあります。
一部のブラウザーが特定の事柄に対して異なる動作をすることは事実です。ただし、回転するアニメーションを使用してテストしたところ、3.5 GHz マシンで約 30 ～ 50% の CPU 使用率が使用され、複数のブラウザーでテストされました。無限反復に設定されているかどうかは問題ではありませんでした。
現時点では、特定の機能がマシンの速度を低下させ、ユーザーフレンドリーではない可能性があります。これらの機能が最適化されるまで待ってから使用することをお勧めします。私のiPod touchでもアニメーションが滑らかに見えるので、効率の悪いデザインになっている気がします。
また、私のブラウザーはその時点で GPU アクセラレーションを実行していなかったことにも注意してください。これが要因である可能性があります。
于 2012-01-03T05:38:12.160 に答える
1
CSS3 アニメーションで 3D 変換のみを使用する場合、たとえば:
@keyframes animation {
0% { transform: translate3d(288px,123px,0px) rotate(10deg) scale(1,1) }
50% { transform: translate3d(388px,123px,0px) rotate(20deg) scale(2,2) }
100% { transform: translate3d(488px,123px,0px) rotate(30deg) scale(3,3) }
}
ブラウザにアニメーションの再生を指示した後は、CPU 使用率は一定になります。これは、3D 変換が常にブラウザーによって GPU アクセラレーションを介してレンダリングされるためです。(注: GPU アクセラレーションを開始するには、上記のように 1 つの 3D 変換を設定するだけで十分です)。
次のスナップショットは、Chrome CPU プロファイラーの実行中に取得されます。
ご覧のとおり、CSS3 アニメーションが JavaScript コードを使用して指示された後、CPU アクティビティはフラットです (この場合、アニメーションの長さは 2 秒でした)。
于 2014-01-23T08:23:59.567 に答える