浏览器滚动动画性能

Question

简而言之：

为什么是这样的：

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

远比这个要快得多：

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

？

背景：

我正在一个有动画滚动的网站上工作。例如：当用户点击一个链接时，我会触发一个为动画滚动条添加动画的javascript。同样的事情也到这个网站：

http://www.fashionphotographer.it/

我对这个问题先取是动画margin-left使用jQuery.animate但这被证明是非常慢（我的网站是非常沉重的内容）。之后，我尝试使用CSS3甚至-webkit转换对绝对元素的left进行动画处理。所有解决方案都很慢。

我最后的尝试是使用jQuery来为滚动条设置动画，并且这证明是迄今为止最好的解决方案。

我的问题是：什么样的优化是浏览器（我使用Chrome）在引擎盖下做动画滚动条的最佳解决方案？

Answer 1

更改scrollLeft属性不会强制DOM的回流，因为您实际上只是在任何时候更改内容的哪个部分是可见的。另一方面，空白左边，左边或其他熟悉的属性可能会导致其他元素调整大小，这会强制浏览器重新排列DOM。

编辑：我相信scrollLeft会强制重新绘制，但是这比回流少得多。请参阅http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/以获得有关区别的很好解释。