浏览器滚动条动画性能

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，因为您实际上只是在改变内容的哪一部分可见。另一方面，margin-left，left或其他熟悉的属性可能会导致其他元素调整大小，从而迫使浏览器重排DOM。

编辑：我相信scrollLeft会强制进行重绘，但这比重排要强得多。有关差异的详细解释，请参阅http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/。