CSS3-анимация и производительность: есть ли тесты?

CSS3 использует ускорение графического процессора в некоторых браузерах, что означает, что если у вас есть отличная карта GFX, это приведет к плавной и быстрой анимации. Где CSS / JQ использует вашу память.

Так что я действительно не думаю, что это возможно для простого сравнительного тестирования.

О том, сколько анимаций вы можете использовать, с учетом того, что браузер так часто обновляется, а оборудование играет важную роль, будет очень сложно создавать такие «руководства по использованию».

Для JS тоже не видел :)

Подробнее об ускорении графического процессора см .:

http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell

Тем не менее, есть несколько отличных статей по этой теме:

http://www.netmagazine.com/opinions/css3-vs-javascript

http://www.whatcreative.co.uk/blog/tips/the-benefits-of-css3-vs-jquery/

Я сделал несколько проектов с переходами CSS3 и резервным вариантом JQuery .animate (), когда CSS3 не поддерживается.

У меня есть еще три тестирующих компьютера, помимо моего:

• ноутбук от 6 лет (под управлением XP, Athlon 1800+ и 768Mo of Ram)
• ноутбук на 3 года (под управлением Crappy Vista и двухъядерного процессора Intel с 2 ГБ оперативной памяти)
• откровенный рабочий стол (несколько ОС, установленных с P4 и 1Go RAM)

Я заметил, что в большинстве случаев CSS3 работает лучше.

Под словом «работает лучше» я имею в виду только то, что он «чувствует себя лучше»: я не пробовал сравнивать производительность или применять научный метод тестирования, и мое наблюдение не следует рассматривать как нечто большее, чем эмпирическое ощущение. Также обратите внимание, что я в основном использую переходы CSS3, а не анимацию CSS3 (т.е. с ключевыми кадрами).

Однако «лучше» здесь не означает «всегда хорошо». На старых компьютерах Javascript и CSS3 одинаково отстают. Если ваш сайт перегружен JS или CSS3, IE до версии 9 всегда доставляют неудобства, а IE до версии 8 - настоящий кошмар. Firefox до версии 4 лучше, но далеко не идеален на старых компьютерах.

В любом случае, CSS3 должен быть правильно применен: например, я обнаружил, что постепенное изменение div до opacity: 0 без установки display: none по завершении всегда плохая идея ... CSS3-переходы довольно новы, никаких реальных передовых практик не существует, это пробная версия и ошибка на данный момент.

На современных мобильных устройствах (у меня есть несколько устройств IOS, Android и BBOS) CSS3 всегда лучше, чем Javascript: на iPad 1 простой $ ('img'). FadeOut () может быть довольно уродливым, когда CSS3 переход чистый.

Итак, в заключение мой личный (и ограниченный) опыт говорит:

• css3 часто лучше Js, особенно для современных мобильных устройств
• хотя оба они плохи на плохой комбинации компьютеров / браузера при чрезмерном использовании
• как обычно, это зависит от ваших пользователей. Если у них есть современные Macbook, вы можете без опасений использовать много анимации. Если они плохо оснащены, анимация может серьезно затруднить их просмотр.
• Я думаю, что лучше всего делать переходы CSS3 с резервным вариантом JQuery, если он не поддерживается, и сохранять их простыми (т.е. не анимировать четыре свойства сразу для трех разных элементов)

Я надеюсь, что это помогает.

После использования css-анимации в производственной среде для некоторых проектов, я должен сказать, что это довольно неприятно.

Я также использую TweenLite, мою любимую библиотеку анимации, которую я много раньше использовал во Flash, и которая была переписана для javascript и CSS.

Теперь, когда у меня достаточно опыта работы с html5-анимацией, я могу с уверенностью сказать, что TweenLite - наиболее адаптированный инструмент.

Раньше я использовал CSS-анимацию и переходы для своих веб-разработчиков и использовал TweenLite в качестве запасного варианта для старых браузеров, но когда я сравниваю перфомансы в современных браузерах с CSS и TweenLite, версия TweenLite почти всегда самая плавная.

Я провел эти тесты из-за этой статьи, которую только что написал разработчик:

http://www.greensock.com/transitions/

GSAP использует преимущества requestAnimationFrame и является супероптимизированным. Он имеет производительность, эквивалентную css3, с гораздо лучшим api для упорядочивания, управления, обратных вызовов ...

Вопрос выбора! Я сделал свой.

Это новинка (с декабря 2012 г.) от Greensock: http://www.greensock.com/js/speed.html

Вы можете тестировать и сравнивать анимацию css3 с анимацией javascript на таких фреймворках, как jQuery, YUI, Zepto, Mootools, Dojo, TweenJS и GSAP.