Блог

Каждый раз, когда я захожу на страницу с CSS3 анимацией, мой ноутбук становится шумным (дает мне сигнал, что он выполняет там какую-то тяжелую работу). Мне было бы все равно, если бы хотя бы результирующая анимация была достаточно плавной. Но это не так. Что я получаю в результате на моем Core 2 Duo с частотой 2,4 ГГц с 8 ГБ оперативной памяти и выделенной NVIDIA GeForce 320M (немного, но должно быть достаточно для некоторых css, нет? …), Это какое-то отрывистое, беспорядочно мерцающее, в некоторых случаях имеющее странные артефакты… «анимация», которая часто хуже, чем эквивалент JS…

Кто-нибудь проводил какие-либо сравнения анимации JS и CSS? Или сравнительный анализ предлагаемых преимуществ CSS3 для реального использования (например, сколько из них может быть на странице одновременно без серьезного зависания и т. Д.)? Существуют ли какие-либо рекомендации (например, — делайте это, не делайте этого, или ваш браузер будет сканировать — и тому подобное)?

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

У меня есть три тестовых компьютера, кроме моего собственного :

• ноутбук старше 6 лет (работает под управлением XP, Athlon 1800 и 768 МБ оперативной памяти)
• 3-летний ноутбук (с дерьмовой Vista и двухъядерным процессором Intel с 2 ГБ оперативной памяти)
• рабочий стол franken (установлено несколько ОС с P4 и 1 ГБ оперативной памяти)

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

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

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

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

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

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

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

Надеюсь, это поможет.

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

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

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

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

Подробнее об ускорении GPU см.:

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/

После использования 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.