Анимации на основе JavaScript молча быстрее, чем анимация перехода CSS? Кроме того, Adobe и Google выпускали мобильные сайты Rich Media, которые конкурируют на родных приложениях?
В этой статье будет показано, как библиотеки анимации DOM на основе JavaScript, такие как Velocity.js и GSAP, более эффективны, чем библиотеки анимации на основе jQuery и CSS.
jQuery
Начнем с того, что JavaScript и jQuery ошибочно путают. Анимации JavaScript быстрые, но анимации jQuery медленные. Почему? Потому что, хотя jQuery является мощным, его цель никогда не заключалась в том, чтобы быть эффективным движком анимации.
- jQuery не может этого избежатьМакет шокПотому что его код помимо анимации предоставляет множество функций.
- Потребление памяти jQuery часто запускает сборку мусора, вызываяанимация застряла
- jQuery использует setInterval вместо requestAnimationFrame (RAF) дляизбежать некоторых ошибок
Обратите внимание, что шок макета вызвал анимациюНачинатьзаикание, сборка мусора вызвала анимациюпровестиЛаги в игре, отсутствие РАФ приводит к низкой частоте кадров.
Пример реализации
Избегайте колебаний макета, включая простое слияние запросов DOM и обновлений DOM:
var currentTop,
currentLeft;
/* 有布局震荡 */
currentTop = element.style.top; /* QUERY */
element.style.top = currentTop + 1; /* UPDATE */
currentLeft = element.style.left; /* QUERY */
element.style.left = currentLeft + 1; /* UPDATE */
/* 没有布局震荡 */
currentTop = element.style.top; /* QUERY */
currentLeft = element.style.left; /* QUERY */
element.style.top = currentTop + 1; /* UPDATE */
element.style.left = currentLeft + 1; /* UPDATE */
Запрос, который возникает после обновления, заставляет браузер немедленно изменить макет и вычисляет вычисленное значение, которое определяет стиль страницы (с учетом последствий обновления). Это огромные накладные расходы для анимации, выполняемой с интервалом 16 мс.
Точно так же реализация RAF не требует серьезных изменений в существующем коде. Сравним реализацию RAF и реализацию setInterval:
var startingTop = 0;
/* setInterval: 每16ms运行一次来达到60fps (1000ms/60 ~= 16ms). */
setInterval(function() {
/* 由于这里的代码会在1s内执行60次，所以我们把top属性每秒1单位的增长分成60份 */
element.style.top = (startingTop += 1/60);
}, 16);
/* requestAnimationFrame: 不管浏览器是否处于最优状态，都试图运行在60fps */
function tick () {
element.style.top = (startingTop += 1/60);
}
window.requestAnimationFrame(tick);
RAF максимизирует производительность анимации. И вам нужно только изменить небольшое количество кода.
CSS Transitions
Производительность анимации переходов CSS лучше, чем у jQuery, что оставляет логику анимации самому браузеру. Это поможет: 1) оптимизировать взаимодействие с DOM и потребление памяти, чтобы избежать заиканий, 2) использовать функции RAF под капотом и 3) обеспечить аппаратное ускорение (используя возможности графического процессора для повышения производительности анимации).
Однако реальность такова, что эти оптимизации могут быть реализованы непосредственно через JavaScript.GSAPРаботал над этим годами.Velocity.js, новый анимационный движок, который использует не только вышеупомянутые методы, но и другие методы, которые мы вскоре рассмотрим.
Понимание того факта, что анимации JavaScript сопоставимы с библиотеками анимации CSS, — это только первый шаг в нашем плане. Второй шаг — понять, что анимация JavaScript может быть быстрее, чем анимация CSS.
Начнем с изучения недостатков библиотеки анимации CSS:
- Принудительное аппаратное ускорение переходов предназначено для ускорения графического процессора, но это приведет к зависанию анимации при высокой нагрузке графического процессора. Эти эффекты более серьезны на мобильных устройствах. (В частности, это заикание связано с накладными расходами на передачу данных между основным потоком браузера и потоком сортировки. На некоторые свойства CSS, такие как преобразования и непрозрачность, эти накладные расходы не влияют.) Adobeздесьизложил по этому вопросу.
- Переходы имеют проблемы с совместимостью ниже IE10, что может легко вызвать проблемы на сайтах на стороне ПК, поскольку IE8 и IE9 по-прежнемуочень популярный.
-
Поскольку переходы не контролируются JavaScript (они запускаются только JavaScript), браузеры не знают, как синхронно использовать код JavaScript для управления и оптимизации переходов.
Наоборот: библиотеки анимации на основе JavaScript, которые могут решать, когда использовать аппаратное ускорение, совместимы со всеми версиями IE и отлично подходят для пакетной оптимизации анимации.
Я предлагаю использовать собственные переходы CSS, когда вы разрабатываете только мобильный сайт, а ваши анимации состоят только из простых изменений состояния. В этом случае переходы являются эффективным и нативным решением и могут поместить всю логику анимации только в css, избегая раздутых страниц, вызванных введением библиотек JavaScript. Однако, если вы проектируете сложный пользовательский интерфейс или разрабатываете приложение с пользовательским интерфейсом с отслеживанием состояния, используйте библиотеку анимации JavaScript, которая обеспечивает производительность анимации и управляемость рабочего процесса. В частности, есть одна библиотека, которая отлично справляется с управлением переходами CSS. Transit.
JavaScript Animation
Итак, JavaScript может объяснить ветер. Но сколько стоит JavaScript? На самом деле, он смог создать сложные, обычно созданные только с помощью WebGL3D animation demo. Это достаточно быстро, чтобы создать что-то, что обычно можно сделать только с помощью Flash или эффектов тени.multimedia teaser. Он приближается к созданию чего-то, что обычно можно построить только с помощью холста.virtual world.
Для наглядного сравнения производительности лучших библиотек анимации, включая Transit (внутренне использующий переходы CSS), ознакомьтесь с документацией Velocity по адресуVelocityJS.org.
Остается вопрос: как именно JavaScript достигает высокой производительности? Ниже приведен список оптимизаций, которые могут реализовать библиотеки анимации на основе JavaScript:
-
Чтобы уменьшить вибрацию макета, DOM, участвующий во всей анимации, синхронизируется со стеком.
-
Кэшируйте значения свойств в связанных вызовах, чтобы свести к минимуму возникновение запросов DOM, которые являются ахиллесовой пятой производительности анимации DOM.
-
Коэффициенты преобразования единиц кэширования (например, PX в %, em и т. д.) в одном и том же вызове перекрестного родственного элемента.
-
Если обновление стиля визуально не очевидно, пропустите обновление.
Вспоминая о шоках макета, обсуждавшихся ранее, Velocity.js использует эти передовые методы для кэширования конечного значения анимации, которые повторно используются в качестве начального значения последующих анимаций, что позволяет избежать повторного запроса начального значения элемента DOM:
$element
/* 将元素向下滑动到视图中。 */
.velocity({ opacity: 1, top: "50%" })
/* 延迟1000ms，元素滑动出视图 */
.velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });
В приведенном выше примере второй Velocity автоматически знает, что он должен начинаться с непрозрачности 1 и вершины 50%.
Браузеры могли бы в конечном итоге выполнять многие из тех же оптимизаций самостоятельно, но для этого потребовалось бы сильно ограничить то, как разработчики могут кодировать анимацию. Таким образом, по той же причине, по которой jQuery не использует RAF (см. выше), браузеры никогда не будут навязывать оптимизации, даже если эти оптимизации имеют лишь очень небольшой шанс нарушить спецификацию или отклониться от ожидаемого поведения.
Наконец, давайте сравним две библиотеки анимации JavaScript (Velocity.js и GSAP).
-
GSAP — это быстрая и многофункциональная анимационная платформа. Velocit — это легкий инструмент, который может значительно улучшить производительность анимации пользовательского интерфейса и рабочий процесс.
- Требуется GSAPплата за лицензию. Velocity находится в открытом доступе через Массачусетский технологический институт.
-
Производительность отличная, а разницы между GSAP и Velocity в реальных проектах нет.
Мой совет: используйте GSAP, когда вам нужен точный контроль (например, повтор, пауза/возобновление/поиск), движение (например, кривые Безье) или сложная группировка/сортировка. Эти функции очень важны для разработки игр и некоторых нишевых приложений, но не распространены в пользовательском интерфейсе веб-приложений.
Velocity.js
Позиционирование GSAP с богатыми функциями не означает, что скорость имеет одну функцию. И наоборот, в сжатом 7 КБ файл, скорость не только обеспечивает jQuery$.animate()Все функции , но также обеспечивает цветную анимацию, преобразования, циклы, смягчение, классовую анимацию и прокрутку.
Короче говоря, Velocity — это лучшее сочетание jQuery, пользовательского интерфейса jQuery и переходов CSS.
Далее, с точки зрения удобства, Velocity использует jQuery.$.queue()метод, поэтому он без проблем работает с jQuery$.animate(), $.fade()а также$.delay()функциональное взаимодействие. И из-за синтаксиса Velocity и$.animate()последовательный,Код вашей страницы не нужно изменять.
Давайте быстро взглянем на Velocity.js. На основе анимации, скорости и$.animate()Такой же:
$element
.delay(1000)
/* 使用Velocity的2000ms内改变元素top属性的动画*/
.velocity({ top: "50%" }, 2000)
/* 当上面Velocity动画执行完时，使用标准的jQuery方法来使元素淡出*/
.fadeOut(1000);
В расширенной анимации можно создавать сложные сцены прокрутки и 3D-анимации — всего двумя простыми строками кода:
$element
/* 在1000ms内，浏览器滚动到这个元素的顶部 */
.velocity("scroll", 1000)
/* 之后使元素绕着它的Y轴旋转360度。 */
.velocity({ rotateY: "360deg" }, 1000);
заключительные замечания
Цель Velocity — поддерживать лучшую производительность и удобство анимации DOM. Эта статья посвящена первому. пожалуйста идиVelocityJS.orgУзнайте больше о последних знаниях.
Прежде чем мы закончим, помните* Высокопроизводительный пользовательский интерфейс — это больше, чем просто выбор правильной библиотеки анимации.. Остальная часть страницы также должна быть оптимизирована. Узнайте больше из этих фантастических тем Google ниже: