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

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

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

Ответ 1

В некоторых браузерах 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/

Ответ 2

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

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

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

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

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

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

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

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

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

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

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

Ответ 3

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

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

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

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

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

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

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

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

Ответ 4

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

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