私はiPadHTML5アプリに取り組んでおり、イベントをより速くトリガーするためにontouchサポートをすでに実装しており、要素をより簡単にターゲットにするためにjQueryを使用していますが、アニメーションにはCSS3トランジションを使用しています
何が速いと思いますか？すでにライブラリをインポートしているのでjQueryアニメーションを使用しますか、jQueryで要素をターゲットにするときにCSS3トランジションを使用しますか？
質問する
21890 次
10 に答える
49
このリンクによると、jQueryアニメーションはcssアニメーションよりもはるかに低速です。
理由は、jqueryがタイマーとループを使用してDOM要素の小道具を変更する必要があるためである可能性があります。CSSはブラウザエンジンの一部です。これはシステムのハードウェアに大きく依存します。ChromeまたはFirefoxのプロファイリングでも確認できます。
于 2012-06-11T17:35:37.613 に答える
6
CSSアニメーションは、ほとんどの場合、より高速になります。
CSSトランジションとjQueryのアニメーションの直接比較。タイマーを繰り返し実行するように設定するのではなく、遷移はブラウザーによってネイティブに処理されます。私のかなり非科学的なテストでは、遷移は常に高速で、特に要素数が多い場合は、より高いフレームレートで実行されます。また、プラグインに依存することなく、色を簡単にアニメーション化できるという利点もあります。
于 2012-06-11T17:32:05.303 に答える
4
CSS3トランジションはブラウザにネイティブであるため、より高速になるはずです。
于 2012-06-11T17:32:14.480 に答える
4
そのcss3はより高速で、より少ないメモリを消費し、よりスムーズです。CSSプロセッサはC++で記述されており、ネイティブコードは非常に高速に実行されますが、jQuery（JavaScript）はインタプリタ言語であり、ブラウザはJavaScriptを事前に予測できません。 http://dev.opera.com/articles/view/css3-vs-jquery-animations/
上記のリンクを表示して、CSS3とjQueryで行われた実験について知ってください。
于 2012-10-17T09:57:29.803 に答える
4
この記事（http://css-tricks.com/myth-busting-css-animations-vs-javascript/）は、CSS変換とjQueryアニメーションとGSAP（別のJavaScriptライブラリ）の優れた比較を行っています。
CSSアニメーションはjQueryよりも大幅に高速です。ただし、テストしたほとんどのデバイスとブラウザーでは、JavaScriptベースのGSAPはCSSアニメーションよりも優れたパフォーマンスを示しました
したがって、CSS変換はjQueryアニメーションよりも高速ですが、CSS変換がJavaScriptよりも高速であると思わせないでください。GSAPは、JavaScriptがCSSよりも優れていることを示しています。
于 2014-03-10T17:27:21.463 に答える
2
CSS3はブラウザに標準で付属しているため高速になりますが、JQueryはロードする必要のある別のファイルですが、アニメーションによってはJQueryをよりスムーズに実行できることがわかりました。純粋なJavascriptを何度も試してみるのも良い場合があります。
于 2012-06-12T00:19:28.847 に答える
1
Mozilla開発者向けドキュメントは、CSS3アニメーションに関していくつかの興味深い点を提起しています。
ブラウザにアニメーションシーケンスを制御させると、ブラウザは、たとえば、現在表示されていないタブで実行されているアニメーションの更新頻度を減らすことにより、パフォーマンスと効率を最適化できます。
WebKit（Safariを搭載）もハードウェアアクセラレーションによる合成を利用します。これは、現時点でJavascriptが実行できるものよりもパフォーマンスにはるかに大きな影響を与える可能性があります。（計算を管理するための関数が追加されると、これはすぐに変わると思います）これは、Javascriptのような翻訳言語ではなく、計算を実行できる場合は専用のハードウェアを利用するためです。
iPad上のWebKitがハードウェアアクセラレーションされているかどうかは100％わかりません。ただし、標準化されて人気が高まっているため、時間の経過とともに改善されるのは当然のことです。
于 2012-06-11T17:35:23.477 に答える
1
ここから
CSSトランジションとjQueryのアニメーションの直接比較。タイマーを繰り返し実行するように設定するのではなく、遷移はブラウザーによってネイティブに処理されます。私のかなり非科学的なテストでは、遷移は常に高速で、特に要素数が多い場合は、より高いフレームレートで実行されます。また、プラグインに依存することなく、色を簡単にアニメーション化できるという利点もあります。
この結論とともにここでのテスト。
タイマーに基づくJavascriptアニメーションは、同じ最適化を行うのに十分なブラウザーにアクセスできないため、ネイティブアニメーションほど速くなることはありません。これらのアニメーションは、レガシーブラウザでのみフォールバックとして使用する必要があります。
これにも注意してください、
CSS3アニメーションはひどいものですが、プロセッサの能力を大量に使用します。jQueryのようなフレームワークを使用するのと同じように、CSS3でアニメーションを微調整する方法はありません。したがって、CSS3アニメーションがCPUに対応していない限り、jQueryを使用することをお勧めします。
于 2012-06-11T17:39:48.400 に答える
0
キャンバスタグを使用してjQuery/javascriptアニメーションを使用している場合（これは、間違いがない場合でもタイマーに依存しています...それをいじるのは初めてです）、javascriptを使用したハードウェアアクセラレーションの利点があります。ホバーしたときに何かを動かしたいだけの場合は、トランジションがうまく機能します。CSSトランジションは少しスムーズに実行される可能性がありますが、トレードオフです。トランジションを使用することで、アニメーションに対する大量のJavaScript制御を放棄することになります。私はCSSのスタイルとJSの振る舞いを維持するのが好きです-とにかくそれがどのように機能することになっているのではありませんか？CSSトランジションはそのロジックを壊しました...
于 2012-08-22T19:55:55.953 に答える
0
ネイティブの方が速いはずですが、ブラウザーの開発者がだらしない（または怠惰な）場合、悪いコードを記述し、CSSアニメーション（またはトランジション）の結果が悪くなります。
現在、jQueryには、「アニメーション」機能を「改善された」機能でオーバーライドするプラグインがあります。Velocityを参照してください。この質問の範囲外であるため、JavaScriptを使用してDOMをアニメーション化する他の方法については説明していません。
したがって、現状では、jQueryはCSSよりも低速です。また、CSSはおそらくすでに要素スタイルを持っているので書きやすいので、どこかでJSを書き始めて管理する必要がある状況と比較して、いくつかのルールを追加するのは簡単です。しかし、複雑で重いものの場合、JSはより速く、悲しいことに。
この正確な質問についての非常に良い記事-http://davidwalsh.name/css-js-animation
于 2014-05-06T19:48:22.733 に答える