2011-01-20 2 views
1

У меня есть несколько панелей, которые я скольжу горизонтально, используя функцию анимации, которую так щедро предоставляет jQuery.jQuery IE6 дилемма: анимация scrollLeft или слева?

Проблема в том, что 100% клиентов, которые будут использовать это небольшое приложение, я использую IE6. Я обеспокоен тем, что, поскольку панели содержат несколько элементов на них, не слишком много, но не мало, это будет очень медленным на IE6 и довольно бедных ПК, которые будут видеть это.

Теперь вопрос, должен ли я аниматировать scrollLeft для прокрутки родительского div или изменить положение дочернего div анимации css left attribute?

Есть ли какие-либо улучшения в производительности путем выбора одного из них? (Я не могу проверить на целевых ПК в настоящее время, чтобы иметь возможность принять эмпирическое решение.)

Спасибо.

+1

В целом, чем меньше элементов вы сможете оживить, тем лучше производительность. Выберите вариант, который является самым быстрым в эмпирическом режиме, если можно. В противном случае выберите вариант, который оживляет наименьшее количество элементов. –

+0

Привет Брайан. Я не могу проверить это на соответствующих машинах печально. В обоих случаях одно и то же количество элементов перемещается, только один прокручивает содержимое родителя, а другой - родительский контент. – Francisc

ответ

3

Из моего опыта, анимация scrollLeft дает лучшую производительность, потому что большинство браузеров не перерисовывают все окно при прокрутке (иначе прокрутка страницы будет смехотворно лагировать для более медленных компьютеров ...), а анимация свойства left css будет вызвать перерисовку браузера.

+0

Хороший ответ, спасибо. – Francisc

+0

Откуда вы получили эту информацию? – Alvaro

+0

Это было просто наблюдение, которое у меня было некоторое время назад, теперь оно менее заметно, так как наши компьютеры быстрее (и теперь браузеры более оптимизированы). Один из эталонов здесь (http://jsperf.com/translate3d-vs-xy/13) поддерживает его, но разница кажется незначительной, и она говорит нам использовать translateX/Y. Другой ответ SO, который дает некоторое представление о том, что перерисовывает или перерабатывает браузер: http://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint – Populus

Смежные вопросы