Мы все использовали jQuery’s animate() Затем, с появлением и развитием CSS3, они сказали нам, что наш код был мусором. Они предложили нам сбросить все наши анимации на основе jQuery (и вообще анимации на основе JavaScript) в пользу CSS-анимаций.
Это изменение заставило нас столкнуться с множеством проблем совместимости браузера (с отсутствием) и отсутствием функций; не говоря уже о невозможности их запуска на более старых версиях Internet Explorer. Боль была оправдана тем фактом, что CSS-анимация быстрее, чем JavaScript-анимация. По крайней мере, они сказали нам так. Это правда? Является ли jQuery animate() Есть ли способ улучшить его без изменения нашего кода? Ответ — да.
В этой статье мы увидим некоторые ограничения обоих способов создания анимации, а также то, как мы можем добиться лучшей производительности с помощью нашего кода jQuery.
В чем проблема с jQuery?
Мы все знаем и любим jQuery (на самом деле некоторые люди этого не делают ). Эта библиотека, предназначенная для упрощения сценариев HTML на стороне клиента, помогла сотням тысяч разработчиков (без реальных данных) по всему миру. Это делает такие вещи, как обход и манипулирование документами HTML, обработка событий, Ajax и многое другое, несложным делом, взяв на себя бремя, связанное со всеми несовместимостями и ошибками браузеров.
Среди его особенностей, jQuery также позволяет создавать анимацию и эффекты. С его помощью мы можем анимировать свойства CSS, скрывать элементы, изменять их и другие подобные эффекты. Тем не менее, цель разработки jQuery никогда не состояла в том, чтобы быть производительным анимационным движком, и никогда не предполагалось поддерживать действительно сложные, потребляющие процессор / gpu анимации. В подтверждение этого факта, потребление памяти jQuery часто вызывает сборку мусора, которая вызывает проблемы во время анимации. Кроме того, за кулисами jQuery использует setInterval()requestAnimationFrame()подробнее о requestAnimationFrame() ) для запуска анимации, что не помогает в создании высокой частоты кадров.
Из-за этих факторов люди, которые «знают лучше», пропагандировали использование CSS для создания наших анимаций и эффектов.
CSS анимация и переходы
Давайте проясним: CSS-анимации выигрывают у jQuery. Говоря об анимации, jQuery может быть в несколько раз медленнее CSS. CSS-анимации и переходы имеют то преимущество, что они ускоряются графическим процессором, что очень хорошо для движущихся пикселей. Этот фактор кажется значительным улучшением, особенно в тех ситуациях, когда производительность имеет решающее значение, таких как мобильные устройства. Это круто, не правда ли? Правда в том, что все это имеет ограничения и проблемы.
Первое ограничение заключается в том, что не все свойства CSS могут быть улучшены графическим процессором. Следовательно, предположение о том, что использование CSS-анимации всегда выигрывает, просто неверно. Другая проблема заключается в том, что CSS-анимация не переносима, по крайней мере, не во всех браузерах, на которые вы ориентируетесь. Например, переходы не работают в версиях Internet Explorer 9 и ниже. Как будто этого было недостаточно, анимации в CSS в настоящее время основаны на процентах, а не на времени (секунды или миллисекунды). Это означает, что, если вы не используете препроцессор, такой как Sass или Less, может быть реальной болью изменить продолжительность анимации после ее завершения. Наконец, для анимации CSS требуется множество префиксов поставщиков. Да, мы можем делегировать инструмент для работы с ними, но это еще одна вещь, о которой нужно беспокоиться.
В дополнение к предыдущим соображениям есть и другие веские причины не сбрасывать со счетов анимации jQuery. Они больше связаны с отсутствием навыков, чем со слабостью самой технологии, но все же стоит упомянуть. Если разработчик использовал для создания анимации с помощью jQuery, есть вероятность, что разработчик не смог использовать CSS для выполнения той же задачи. Возможно, разработчику потребуется так много времени, чтобы создать такой же эффект в CSS, что эти усилия не будут стоить выгоды. Или разработчик не хотел изучать еще одну технологию для создания настраиваемых анимаций. Это не то, что стыдно. Каждый имеет свой предел в данной области.
Все дело в том, что мы хотим, чтобы анимации, созданные с использованием jQuery, имели лучшую производительность, поэтому нам не нужно конвертировать их в CSS-анимацию. К счастью для нас, решение существует.
Улучшение jQuery’s animate()
Ответ на проблему анимации jQuery называется Velocity.js . Velocity.js — это плагин jQuery, который повторно реализует
В отличие от jQuery 1.X, который работает с древними версиями IE, Velocity работает с IE8 +. Для большинства проектов это не должно быть серьезной проблемой. $.animate()
На данный момент вам интересно, как использование Velocity.js может повлиять на кодовую базу. Ответ «смешным образом». Все, что нам нужно сделать, чтобы интегрировать Velocity.js, это загрузить его и включить в веб-страницу, которую мы хотим использовать. Последним необходимым шагом является замена каждого вхождения $.animate()$.velocity()без изменения каких-либо параметров! Это изменение так же просто, как выполнить поиск и замену в нашем текстовом редакторе или IDE по вашему выбору.
После этого наша анимация сразу же повысит производительность. Это потрясающе, поскольку мы можем повторно использовать наши знания, не оказывая значительного влияния на кодовую базу. Кроме того, поскольку это плагин jQuery, который поддерживает цепочечность, мы можем продолжать создавать эту «цепочку вызовов методов», типичную для jQuery.
Выводы
В этой статье я описал некоторые проблемы, которые влияют на анимацию на основе jQuery. Мы обсудили, почему CSS-анимации за последние несколько лет так активно используются в качестве замены jQuery. Затем я выделил некоторые ограничения CSS и некоторые его недостатки, когда речь заходит о производительности. Наконец, я кратко представил вам Velocity.js, плагин jQuery, который позволяет повысить производительность анимации и эффектов JavaScript практически без изменения исходного кода.
Эта статья является лишь введением в сравнение между анимациями jQuery, CSS и JavaScript. Если вы хотите углубленно изучить эту тему, я настоятельно рекомендую вам прочитать следующие статьи, написанные автором GSAP и автором Velocity.js: