私もいつもVelocity.jsを使っているのでコメントしておきたくなりました…
maisumakunさんもおっしゃっている内容とかなり被るところがありますが、
jQuery.animateは内部でsetInterval
を使用しており、
Velocity.jsではrequestAnimationFrame
を用いた処理になっています。
setTimeout
やsetInterval
はブラウザ側で再描画の準備が整っているか否かにかかわらず「必ず」実行されます。
requestAnimationFrame
はブラウザの負荷の状態に合わせて、再描画の準備が整った時点で実行されます。
※requestAnimationFrameは以前からあったタイマー系メソッドに比べるとアニメーションの表現に向いていると言えますが、「再描画の準備完了まで待つ」という仕様上正確なFPSを制御することはできません。
Velocity.jsでは「60FPSのアニメーションを実現させる」ということを謳っているだけに、そのあたりをうまく制御するよう内部処理が加えられていたかと。(注:コードを全部読んだ訳ではないので不正確かもしれません)
また、同様に「より高速な処理(負荷軽減)をするように」jQueryを拡張するかたちの処理が書かれています。
(余談ですが、jQuery.animateのmaxFPSは30程度、cssで45程度という検証結果もあるそうです)
ブラウザ上でアニメーションをさせるときにどのように処理が行われているか
http://blog.anatoo.jp/entry/2015/10/14/174403
などは参考になるかな、と思います。
DOM要素を動かす、サイズを変える、等を行うと、その度に再描画が必要になります。(レイアウト、ペインティング、レイヤー描画)
アニメーションでは、ミニマムで0.001秒毎にDOM要素のstyleを書き換えています。=その間毎回上記レイアウト、ペインティング、レイヤー描画が行われる
こんな処理を秒間1000回行うのは、さすがに現行のデバイスですら処理落ちします。
なので、setInterval
やsetTimeout
を用いたアニメーションはカクついたりチラつきが起こりやすく、
描画準備が整うまで待つrequestAnimationFrame
は(見た目上)なめらかに動く、ということですね。
(※数年前からsetTimeoutの内部処理がちょっと変わったらしく、requestAnimationFrameとの差が縮まっているようです)
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。