2

私のサイトには流動的なレイアウトがあり、1つの要素がアニメーション化され、ホバー時にトランジションがあります。主な問題は、より広い画面（たとえば、約1600pxよりも広い）では、CSS3のホバー遷移が目に見えて途切れ途切れになり、メモリを消費し始めることです。これを実現するためにjQueryを使用すると、より大きなディスプレイでの効果が速くなりますか？

4

2 に答える 2

8

編集：GreenSock Animation Platformのパフォーマンスを、アニメーションが可能な他のいくつかのライブラリ（jQueryを含む）とライブで比較できるこのアニメーション速度テストを確認してください。TweenLite（GreenSock）のパフォーマンスは、特にZeptoのCSS3ベースのアニメーションと比較して、実際には非常に印象的です。

-

パフォーマンスの点では、CSS3アニメーションはjQueryアニメーションよりもはるかに高速です。（出典）

パフォーマンスの大きな違いは、ブラウザのCSSプロセッサがC ++で記述されており、ネイティブコードが非常に高速に実行されるのに対し、jQuery（JavaScript）はインタプリタ言語であり、ブラウザは次に発生するイベントに関してJavaScriptを事前に予測できないためです。 。

ただし、記事で説明されているように、CSS3トランジションはIE <= 9でサポートされていないため、jQueryはブラウザーの互換性がはるかに優れています。

于 2012-10-08T04:23:41.207 に答える
3

CSS3ははるかに高速です。javascriptタイマーの代わりにネイティブブラウザアニメーションを使用します。CSS3アニメーションはGPUで高速化することもできます。

しかし、特効薬はありません。ページが遅い場合は、最適化する必要があります。Chrome開発ツールの[タイムライン]タブには、速度低下の原因に関する適切なヒントが表示されます。chrome：//flagsで「合成レンダリングレイヤーの境界線」を有効にすることもできます。そのオプションは、どの要素がGPUで高速化されているかを示します

ホバートランジションがウェブサイト全体でGPUアクセラレーションをトリガーしている可能性があるため、速度が低下します。その場合は、適切に配置されたz-indexによって問題が回避される可能性があります。

于 2012-10-08T05:38:18.737 に答える