11

PHPとJavaScriptを使用してシンプルなギャラリーを作成し、画像間でフェードトランジションを実行しようとしています。次に、CSSアニメーションの使用とパフォーマンスに違いがあるのではないかと思いました。例：

@-webkit-keyframes fadeIn {
0%   { opacity: 0; }
100% { opacity: 1; }
}

およびjQueryのfadeIn。

フェードインからのコールバックを使用したいのですが、CSSでタイマーを使用することもできます。

これらのどちらかが大きな画像でうまく機能する可能性がありますか？違いはわかりませんが、低速のコンピューターに影響するのではないかと思いました。

4

2 に答える 2

37

一方が他方にフォールバックするのはどうですか？可能な場合はCSS3トランジションを使用し、Modernizrなどの機能検出ライブラリを使用して、ユーザーのブラウザーがCSS3トランジションに対応しているかどうかを判断します。

AND ONLYユーザーのブラウザがネイティブアニメーションをサポートしていない場合にのみ、jQueryを使用する必要があります。

ネイティブアニメーションはGPUで高速化されるため、CPUへの制約が少なくなり、アニメーションがはるかにスムーズになります。また、JavaScriptを必要とせず、追加のリクエストを実行する必要もありません。

于 2012-06-03T06:29:20.720 に答える
6

サポートされているブラウザーがある場合は、CSSアニメーションを使用する方がはるかに優れていると思います。サポートされていないブラウザーのバックアップとしてのみ、jQueryを使用する必要があります。http://dev.opera.com/articles/view/css3-vs-jquery-animationsで詳しく説明されているように、CSSとjQueryの両方で同時に300 divをアニメーション化するテストを実施し、パフォーマンス統計。

CSSを使用したアニメーションの統計は次のとおりです。

    -アニメーションを終了するために実行されたアクションの数：100-アニメーションの
    実行を終了するのにかかった時間：2.9秒
    -アニメーションの終了時に消費されたメモリ：1.5 MB

jQueryを使用した統計は次のとおりです。

    -アニメーションを終了するために実行されたアクションの数：2119-アニメーションの
    実行を終了するのにかかった時間：5秒
    -アニメーションの終了時に消費されたメモリ：6 MB

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

于 2013-10-04T20:24:07.207 に答える