Лучше ли использовать анимацию jQuery fadeIn или CSS3?

Я создаю простую галерею, используя некоторые PHP и JavaScript, и пытаюсь сделать переход между изображениями. Затем я задавался вопросом, есть ли разница в производительности между использованием анимации CSS, например:

@-webkit-keyframes fadeIn {
0%   { opacity: 0; }
100% { opacity: 1; }
}

и jQuery fadeIn.

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

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

Ответы

Ответ 1

Как об одном с отступлением к другому? Используйте переходы CSS3, где это возможно, и используйте библиотеку обнаружения функций, такую ​​как Modernizr, чтобы определить, способен ли браузер пользователя переходить на CSS3.

Если И ТОЛЬКО Если браузер пользователя не поддерживает собственные анимации, только тогда вы должны использовать jQuery.

Нативная анимация ускоряется с использованием графического процессора, что приводит к меньшему ограничению работы процессора и значительно более плавной анимации. Кроме того, ЭТО НЕ ТРЕБУЕТСЯ JAVASCRIPT и не требует дополнительных запросов.

Ответ 2

Ну, я думаю, что использование CSS-анимации намного лучше, когда есть поддерживаемый браузер, и вы должны использовать jQuery только как резервную копию для неподдерживаемых браузеров. Как подробно объяснили на http://dev.opera.com/articles/view/css3-vs-jquery-animations, они провели тест анимации 300 divs одновременно с CSS и jQuery и заметили огромную разницу между статистикой производительности.

Статистика с использованием CSS анимации:

  • - Количество действий, выполняемых для завершения анимации: 100
    - Время, затраченное на завершение анимации: 2,9 секунды
    - Память, потребляемая в конце анимации: 1,5 МБ

и статистика с использованием jQuery:

  • - Количество действий, выполняемых для завершения анимации: 2119
    - Время, затраченное на завершение анимации: 5 секунд
    - Память, потребляемая в конце анимации: 6 МБ

Итак, как вы можете видеть, между производительностью существует большая разница. Это связано с тем, что процессор CSS браузера написан на С++, а собственный код выполняется очень быстро, тогда как jQuery (JavaScript) является интерпретируемым языком, и браузер не может заранее предсказать JavaScript заранее, с точки зрения того, какое событие будет происходить дальше, что ограничивает возможности браузеров для оптимизации производительности. Надеюсь, это ответит на ваш вопрос.