2013-12-12 3 views
1

Скажем, у нас есть сайт с большим количеством кучей анимаций, лучше ли для производительности/скорости использовать css3 для анимации или javascript?Какая анимация лучше всего подходит для работы? css3 или javascript?

Как правило, лучше использовать как можно больше html (5) и css (3) вместо javascript и фреймворков, таких как jquery и т. Д.?

+0

CSS3 наверняка и как уже говорилось в тысячу раз раньше ... Есть несколько плагинов jquery, которые могут обрабатывать большую часть жесткой части, как этот http://ricostacruz.com/jquery.transit/ –

+0

Ранее было сказано, ясный ответ: http://stackoverflow.com/a/10984853/2917187 – douweegbertje

+0

Сравнение преобразований jQuery в CSS - это не то же самое, что сравнивать JavaScript с CSS. Этот вопрос должен отличаться от указанного выше. Лучшее сравнение, которое я видел, находится здесь: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ – Luke

ответ

-1

CSS3 лучше, чем javascript для производительности.

http://jsperf.com/css-vs-animations-vs-transit

+0

У вас есть несколько источников? –

+0

Я добавил ссылку на jsperf.com. Спасибо! –

+3

Ваш jsPerf на самом деле ничего не говорит нам. Вы сравниваете метод анимации jQuery с его методом перехода со своим методом CSS. Это * все * JavaScript. –

0

Все браузеры делают CSS визуализации, прежде чем JavaScript, поэтому в браузерах which support CSS animation было бы лучше использовать CSS.

Скорее всего, ваш документ уже имеет таблицу стилей в любом случае, и импорт библиотеки, такой как jQuery , чисто для анимации излишне увеличивал бы время загрузки страницы.

Существует несколько статей о том, как создавать высокопроизводительные анимации в CSS. Одним из лучших, которые я недавно прочитал, будет эта статья HTML5Rocks Пол Льюис (Aerotwist) и Пол Ирланд (Google): http://www.html5rocks.com/en/tutorials/speed/high-performance-animations.

-1

Согласно this link css3 производительность лучше, чем javacript.

На этом сайте вы можете прочитать причину. Это может быть связано с тем, что анимация javascript, основанная на таймерах, никогда не может быть такой быстрой, как родная анимация, так как у них нет доступа к достаточному браузеру, чтобы сделать те же самые оптимизации. Эти анимации следует использовать в качестве резервной копии только в старых браузерах. Теперь, когда поддержка браузера настолько универсальна, редко бывает, что анимация javascript предпочтительнее.

+0

jQuery! = JavaScript, так что это не справедливое сравнение. – Luke

0

Использование ключевого кадра для анимации в CSS3 лучше. Пример:

.yourClass{ 
    -webkit-animation: anim ease-in-out 1s; 
} 
@-webkit-keyframe anim{ 
    0%{ 
    } 
    50%{ 
    } 
    100%{ 
    } 
} 
0

Анимация CSS намного быстрее. Вам нужно быть осторожным, какие свойства CSS для использования в качестве некоторых не ускоряются аппаратными средствами на некоторых мобильных устройствах, например top:0;. Также слишком много анимации будет вялым на мобильных устройствах. Попробуйте использовать CSS-преобразований для анимации: transform: matrix3D(...)

2D и 3D CSS Превращает: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

счастливым оживляющий.

Также посмотрите на холст HTML5, если хотите гладкую гладкую анимацию.

Смежные вопросы