jQuery のアニメーション機能と純粋な CSS3 トランジションのパフォーマンスを比較したい。パフォーマンスを測定するrequestAnimationFrame APIがあることがわかりましたが、canvas 要素でしか使用できないようですか?
CSS3 やキャンバスと比較して、絶対配置のパフォーマンスをテストする良い方法はありますか?
stats.js は役に立ち、信頼できますか? あなたの経験は何ですか？
このjsPerf テストを作成しました。残念ながら、jQuery.on メソッドは実行されません。:(
トランジション/アニメーション ルールは表示要素であり、JavaScript は動作のためのものであるため、CSS に含める必要があると私は主張します。このため、私は CSS トランジションに固執し、JavaScript にフォームの検証/ajax/etc を任せます。しかし、それは、JavaScript がアニメーションに使用するのに不適切なテクノロジであるという意味ではありません。Web の本質は、さまざまな方法でテクノロジを使用できるということです。それらの間に多くの重複があるからです。
役立つと思われるリンクをいくつかご紹介します。Translate に関する Paul Irish/Chris Coyier のディスカッション、CSS トランジションと Javascript のアニメーションに関するビデオ、および jQuery と CSSのフレームレートの比較を示すこのリンク。3 番目のリンクを見ると、CSS が JavaScript よりも確実に高速でスムーズであることがわかります。ハードウェアで高速化されているためだと思います。
同様に結論付けられるいくつかのスタックオーバーフローの質問: どちらが速いですか? CSS3 トランジションまたは jQuery アニメーション? :: CSS トランジションと JS アニメーション パッケージのパフォーマンス
requestAnimationFrameこの関数はキャンバス要素でのみ使用できるという点で正しいです。CSS トランジションをキャンバス出力と同期することを計画している場合は、それを使用することをお勧めしますsetInterval。