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

Question

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

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

Answer 1

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

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

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

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

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

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

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

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

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

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

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

Answer 2

CSS3 использует ускорение GPU в некоторых браузерах, что означает, что если у вас есть отличная карта 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/

Answer 3

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

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

Answer 4

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

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

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

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

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

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

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

Выбор за вами!Я сделал мой.