Я работаю над приложением iPad HTML5, и я уже реализовал поддержку ontouch, чтобы быстрее запускать события, и я использую jQuery для легкого таргетинга элементов, но для анимаций я использую переходы CSS3
Как вы думаете, быстрее? используя jQuery-анимацию, так как я уже импортировал библиотеку или использовал переходы CSS3 при таргетинге элементов с помощью jQuery?
Согласно этой ссылке, анимация jQuery намного медленнее, чем анимация css.
Причина может быть вызвана тем, что jquery должен модифицировать реквизиты элемента DOM с помощью таймеров и цикла. CSS является частью механизма браузера. что в значительной степени зависит от аппаратного обеспечения системы. Вы также можете проверить это при профилировании Chrome или Firefox.
CSS-анимация будет почти всегда быстрее.
Сравнение переходов CSS и анимации jQuery. Вместо того, чтобы периодически запускать таймер, переходы обрабатываются изначально браузером. В моем довольно ненаучном тестировании, переходы всегда быстрее, работают с более высокой частотой кадров, особенно с большим количеством элементов. У них также есть преимущество что цвета могут быть легко анимированы, вместо того, чтобы полагаться на плагинов.
http://css.dzone.com/articles/css3-transitions-vs-jquery
Связанный вопрос: Производительность пакетов переходов CSS и JS
Переходы CSS3 должны быть быстрее, потому что они являются родными для браузера.
Его css3 быстрее и потребляет меньшую память и более плавный. Процессор CSS написан на С++, а собственный код выполняется очень быстро, тогда как jQuery (JavaScript) является интерпретированным языком, и браузер не может заранее предсказать JavaScript. http://dev.opera.com/articles/view/css3-vs-jquery-animations/
Просмотрите приведенную выше ссылку, чтобы узнать об экспериментах, проведенных над CSS3 vs jQuery
Эта статья (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) отлично сочетает преобразования CSS с анимацией jQuery и GSAP (другая библиотека JavaScript).
Анимации CSS значительно быстрее, чем jQuery. Однако на большинстве тестируемых устройств и браузеров GSAP на основе JavaScript выполнялся даже лучше, чем анимация CSS
So Преобразования CSS быстрее, чем анимации jQuery, но не позволяйте этому предположить, что преобразования CSS быстрее, чем JavaScript. GSAP показывает, что JavaScript может превзойти CSS.
CSS3 будет быстрее, поскольку он входит в стандартную версию браузера, где JQuery - это еще один файл, который должен быть загружен, однако я обнаружил, что в зависимости от анимации, которую JQuery может работать намного плавнее. Иногда также приятно экспериментировать с чистым Javascript снова и снова.
Документация разработчика Mozilla вызывает некоторые интересные моменты в отношении анимации CSS3:
Предоставление браузеру последовательности анимации позволяет браузеру оптимизировать производительность и эффективность, например, уменьшая частота обновления анимаций, запущенных на вкладках, которые в настоящее время отсутствуют видны.
WebKit (который включил Safari) также использует аппаратное ускоренное компоновку, которое может оказать гораздо большее влияние на производительность, чем все, что может сделать Javascript в это время. (Я думаю, что это очень скоро изменится, поскольку при управлении вычислениями добавлено больше функций). Это связано с тем, что он будет использовать специализированное оборудование, если оно доступно для выполнения вычислений, вместо того, чтобы это произошло с помощью переведенного языка, такого как Javascript.
Я не на 100% уверен, что WebKit на iPad аппаратно ускорен; однако это будет оправдано тем, что, поскольку оно стандартизировано и растет по популярности, это со временем улучшится.
Из здесь
Сравнение переходов CSS и анимации jQuery. Вместо того, чтобы периодически запускать таймер, переходы обрабатываются изначально браузером. В моем довольно ненаучном тестировании переходы всегда быстрее, работают с более высокая частота кадров, особенно с большим количеством элементов. Они также имеют преимущество в том, что цвета могут быть легко анимированы, вместо того, чтобы полагаться на плагинов.
Тест здесь и этот вывод.
Анимации Javascript, основанные на таймерах, никогда не могут быть такими быстрыми, как родные анимации, поскольку у них нет доступа к достаточному браузеру, чтобы сделать те же самые оптимизации. Эти анимации следует использовать в качестве резервной копии только в старых браузерах.
Также обратите внимание на this,
Анимированные анимации CSS3 являются ужасными, но используют много ваших процессоров мощность. Невозможно точно настроить анимацию с помощью CSS3 так же, как вы можете использовать как jQuery. Итак, до тех пор, пока CSS3-анимация не совместима с вашим процессором лучше придерживаться jQuery.
Если вы используете jQuery/javascript анимацию с тегом canvas (который, если я не ошибаюсь, все равно полагается на таймер... новичок в игре с ним, хотя), то он дает вам преимущество аппаратного ускорения с javascript. Если вы просто хотите что-то перемещать, когда наводите курсор, переходы отлично работают. Переходы CSS могут работать немного плавнее, но это компромисс, вы отказываетесь от тонны javascript-контроля над анимацией с помощью переходов. Мне нравится сохранять стиль в CSS и поведение в JS - разве это не так, как он должен работать? Переходы CSS рода нарушили эту логику...
Предполагается, что Native быстрее, но если разработчики браузеров небрежны (или ленивы), они пишут плохой код, что приводит к плохим результатам с помощью анимации CSS (или переходов).
В настоящее время jQuery имеет плагин, который переопределяет функцию "анимация" с "улучшенной". см. Velocity. Я не использую другие способы анимации DOM с javascript, потому что это выходит за рамки этого вопроса.
Итак, as-is, jQuery медленнее, чем CSS. Кроме того, CSS легче писать, потому что у вас уже есть стиль элемента, поэтому добавление нескольких правил легко, по сравнению с ситуацией, когда вам нужно начинать писать JS где-то и управлять ею.. но для сложных, тяжелых вещей JS быстрее, к сожалению.
Очень хорошая статья об этом точном вопросе - http://davidwalsh.name/css-js-animation
CSS3 намного быстрее, так как он выполняет операции с графическим процессором. проверьте мой ответ на аналогичный вопрос в SO - ссылка
и пожалуйста, хорошая статья http://knowledge-cess.com/animation-and-the-role-of-gpu-a-performance-factor/