瀏覽器滾動動畫性能

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/以獲得有關區別的很好解釋。