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

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

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

И jQuery fadeIn.

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

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

2 11
javascript css3 jquery fadein

2 ответа:

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

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

Собственные анимации ускоряются GPU, что приводит к уменьшению ограничений на CPU и гораздо более плавной анимации. Кроме того, он не требует JAVASCRIPT и не делает это возьмите дополнительные запросы, чтобы снять.

35

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

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

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

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

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

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

6