Вопрос по css3, css-transitions, ipad, jquery – что быстрее? CSS3 переходы или анимации jQuery?

44

Я работаю над приложением iPad для HTML5 и уже внедрил поддержку ontouch для более быстрого запуска событий, и я использую jQuery для более удобного нацеливания на элементы, но для анимации я использую переходы CSS3

Как вы думаете, быстрее? использовать анимацию jQuery, поскольку я уже импортировал библиотеку или использовал переходы CSS3 при нацеливании на элементы с помощью jQuery?

Зависит от браузера. jrummell
Просто запомни, родной всегда быстрее. Ну обычно. CSS3 переходы считаются браузерными. Vin Burgh

Ваш Ответ

10   ответов
0

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

вы все еще можете использовать логику в js и стиль в css. Переходы - это просто инструмент для достижения лучшего результата. убедитесь, что ваш элемент имеет свойство css transition, затем установите значение css с помощью javascipt, получите управление и аппаратное ускорение.
4

Процессор CSS написан на C ++, а нативный код выполняется очень быстро, тогда как jQuery (JavaScript) является интерпретируемым языком, и браузер не может предсказать JavaScript заранее. http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Перейдите по ссылке выше, чтобы узнать об экспериментах, проведенных над CSS3 против jQuery.

Исторически это могло быть правдой, но современные движки JavaScript (например, Google V8) компилируют JS в собственный код. Это правда, что CSS-анимация более эффективна, но не обязательно по указанной вами причине.
VIT JIT компилирует его в собственный код, но это не означает, что он так же быстр, как статически типизированный язык, такой как C ++, скомпилированный заранее. Разница в скорости является результатом динамической природы языка.
4

should be быстрее, потому что они являются родными для браузера.

4

Эта статья (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) проводит отличное сравнение CSS-преобразований с анимациями jQuery и GSAP (еще одна библиотека JavaScript).

CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations

ТакCSS transforms are faster than jQuery animations, но не позволяйте этому заставить вас предположить, что CSS-преобразования f, aster чемJavaScript, GSAP показывает, чтоJavaScript can outperform CSS.

6

A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.

http://css.dzone.com/articles/css3-transitions-vs-jquery

Связанный вопрос: Производительность CSS-переходов и JS-пакетов анимации

1

Вот

A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.

ТестВот наряду с этим выводом.

Javascript animations based on timers can never be as quick as native animations, as they don't have access to enough of browser to make the same optimisations. These animations should be used as a fallback only in legacy browsers.

Также обратите вниманиеэтот,

CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.

Третья цитата от richardet-design - это анекдотическое свидетельство 2011 года. Его вывод был сделан из единого опыта.
47

this link, анимация jQuery намного медленнее, чем анимация CSS.

Reason может быть потому, что jquery должен изменить реквизиты элемента DOM, используя таймеры и цикл. CSS является частью движка браузера. который зависит в значительной степени от аппаратного обеспечения системы. Вы также можете проверить это в профилировании Chrome или Firefox.

Еще одно сравнение, которое подтверждает, что jQuery медленнее, чем CSS -css-tricks.com/myth-busting-css-animations-vs-javascript - но это также показывает, что CSS может быть медленнее, чем другие решения JavaScript. Так что, возможно, есть надежда, что jQuery улучшится.
0

что Native будет быстрее, но если разработчики браузеров небрежны (или ленивы), они пишут плохой код, что приводит к плохим результатам с CSS-анимацией (или переходами).

В настоящее время в jQuery есть плагин, который перевешивает «анимацию». функция с «улучшенным» один. увидетьСкорость, Я не собираюсь другими способами анимировать DOM с помощью javascript, потому что это выходит за рамки этого вопроса.

Итак, как есть, jQuery медленнее, чем CSS. Кроме того, CSS легче написать, потому что у вас, вероятно, уже есть стиль элемента, поэтому добавить несколько правил легко, по сравнению с ситуацией, когда вам нужно начать писать JS где-нибудь и управлять им ... но для сложных, тяжелых вещей JS быстрее, к сожалению.

Очень хорошая статья об этом точном вопросе -http://davidwalsh.name/css-js-animation

1

Документация для разработчиков Mozilla поднимает некоторые интересные моменты, касающиеся CSS3-анимации:

Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

WebKit (который работал на Safari) также использует аппаратное ускорение композитинга, что может оказать гораздо большее влияние на производительность, чем все, что может сделать Javascript в данный момент. (Я думаю, что это очень скоро изменится, так как будет добавлено больше функций для управления вычислениями). Это потому, что оно использует преимущества выделенного оборудования, если оно доступно для выполнения вычислений, вместо того, чтобы делать это с помощью переведенного языка, такого как Javascript.

Я не уверен на 100%, есть ли WebKiton the iPad аппаратное ускорение; однако, само собой разумеется, что, поскольку он стандартизирован и становится все более популярным, со временем это только улучшится.

2

так как он стандартно поставляется с браузером, где JQuery - это еще один файл, который нужно загрузить, однако я обнаружил, что в зависимости от анимации JQuery может работать намного плавнее. Иногда также приятно экспериментировать с чистым Javascript время от времени.

Я полностью согласен. Особенно с трансформациями позиции jquery может работать намного плавнее в некоторых случаях.

Похожие вопросы