Производительность анимации полосы прокрутки браузера

Question

Короче говоря:

Почему это так:

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

намного быстрее, чем это:

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

Справочная информация:

Я работаю над сайтом с анимированной прокруткой. Например: когда пользователь нажимает на ссылку, я запускаю JavaScript, который анимирует полосу прокрутки. Нечто похожее на этот сайт:

http://www.fashionphotographer.it/

Мое первое решение этой проблемы состояло в том, чтобы анимировать margin-left с помощью jQuery.animate, но это оказалось очень медленным (мой сайт очень загружен) После этого я попытался анимировать left абсолютного элемента, используя CSS3 и даже -webkit-transform. Все решения, где медленно.

Моя последняя попытка состояла в том, чтобы использовать 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/ для хорошего объяснения разницы.