ブラウザのスクロールバーのアニメーションのパフォーマンス

Question

要するに：

がなぜこれです：

$('body').animate({scrollLeft: 1000}); 

これよりもはるかに速い：

$('body').animate({"margin-left": 1000}); 

？

背景：

私はアニメーションスクロールを持っているウェブサイトに取り組んでいます。例：ユーザーがリンクをクリックすると、スクロールバーをアニメーション化するjavascriptが起動します。このウェブサイトに似て何か：この問題の

http://www.fashionphotographer.it/

私の最初のテイクはjQuery.animateを使用してmargin-leftをアニメーション化することでしたが、これは（私のサイトは非常にコンテンツ重いです）非常に遅いことが判明しました。その後、CSS3と-webkit-transformを使って絶対要素のleftをアニメーション化してみました。すべてのソリューションが遅い場所。

私の最後の試みは、スクロールバーをアニメーション化するためにjQueryを使用することでした。これはこれまでのところ最良の解決策であることが判明しました。

私の質問は次のとおりです。ブラウザ（私はChromeを使用しています）がスクロールバーのアニメーション化を最適なソリューションにしていますか。

Answer 1

scrollLeftプロパティを変更しても、コンテンツのどの部分が一度に表示されるかを変更するだけなので、DOMのリフローは強制されません。一方、マージン左、左または他のsmiliarプロパティは、他の要素のサイズを変更する可能性があり、ブラウザがDOMをリフローさせることがあります。

編集：scrollLeftはの再ペイントを強制すると信じていますが、これはリフローよりもはるかに集中しません。この相違点の説明については、http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/を参照してください。