От автора: роль веб-анимации эволюционировала от простого декоративного пуха до конкретных целей в контексте пользовательского опыта — например, предоставления визуальной обратной связи, когда пользователи взаимодействуют с вашим приложением, направляя внимание пользователей на выполнение целей вашего приложения, предлагая визуальные сигналы, которые помогают пользователям понять интерфейс вашего приложения и т. д.
Для обеспечения того, чтобы веб анимация JavaScript соответствовала таким важнейшим задачам, важно, чтобы движение происходило в нужное время в гладкой и плавной форме, чтобы пользователи воспринимали его как помощь, а не как мешали каким-либо действиям пытаясь продолжить свое приложение.
Один страшный эффект плохо продуманной анимации jank, который объясняется на jankfree.org следующим образом:
Современные браузеры пытаются обновить содержимое на экране в синхронизации с частотой обновления устройства. Для большинства устройств сегодня экран будет обновляться 60 раз в секунду или 60 Гц. Если на экране есть какое-то движение (например, прокрутка, переходы или анимация), браузер должен создать 60 кадров в секунду, чтобы соответствовать частоте обновления. Jank — это любое заикание, искажение или просто остановка, которую пользователи видят, когда сайт или приложение не поддерживают скорость обновления.
Если анимация дергается, пользователи в конечном итоге будут взаимодействовать все меньше и меньше с вашим приложением, тем самым отрицательно влияя на его успех. Очевидно, никто этого не хочет.
В этой статье я собрал несколько советов по производительности, которые помогут вам решить проблемы с анимацией JavaScript и упростить выполнение целевой задачи 60 кадров в секунду для достижения плавного движения в Интернете.
№1 Избегайте анимации тяжелых свойств CSS
Планируете ли вы анимацию свойств CSS Transitions/CSS keyframes или JavaScript, важно знать, какие свойства приводят к изменению геометрии страницы (макета) — это означает, что позиция других элементов на странице должна быть пересчитана или что операции отрисовки будут задействованы. Как макеты, так и задачи рисования очень дороги для обработки браузеров, особенно если на вашей странице несколько элементов. Как следствие, вы увидите, что производительность анимации значительно улучшится, если вы избегаете анимирования свойств CSS, которые запускают операции макета или рисования, и придерживаются таких свойств, как transform и opacity, поскольку современные браузеры отлично справляются с их оптимизацией.
В CSS Triggers вы найдете обновленный список свойств CSS с информацией о работе, которую они запускают в каждом современном браузере, как при первом изменении, так и при последующих изменениях.
Изменение свойств CSS, которые запускают только сложные операции — это простой и эффективный шаг, который вы можете предпринять для оптимизации вашей веб-анимации для повышения производительности.
№2 Выделяйте элементы, которые вы хотите оживить на свой уровень (с осторожностью)
Если элемент, который вы хотите оживить, находится на собственном уровне композиции, некоторые современные браузеры используют аппаратное ускорение, выгружая работу на GPU. Если использовать разумно, этот ход может положительно повлиять на производительность ваших анимаций.
Чтобы элемент был на своем слое, вам нужно его продвигать. Один из способов сделать это — использовать свойство CSS will-change. Это свойство позволяет разработчикам предупреждать браузер о некоторых изменениях, которые они хотят сделать на элементе, так что браузер может сделать необходимые оптимизации загодя.
Тем не менее, не рекомендуется, чтобы вы продвигали слишком много элементов на своем собственном уровне или что вы делаете это с преувеличением. Фактически, для каждого слоя, создаваемого браузером, требуется память и управление, что может быть дорогостоящим.
№3 Замените setTimeOut / setInterval на requestAnimationFrame
JavaScript-анимации обычно кодируются с использованием либо setInterval(), либо setTimeout(). Код будет выглядеть примерно так:
var timer;
function animateElement() { timer = setInterval( function() { // animation code goes here } , 2000 );
} // To stop the animation, use clearInterval
function stopAnimation() { clearInterval(timer);
}
Хотя это работает, риск jank высок, потому что функция обратного вызова работает в какой-то момент кадра, возможно, в самом конце, что может привести к пропущению одного или нескольких кадров. Сегодня вы можете использовать собственный JavaScript-метод, который предназначен для гладкой веб-анимации (DOM-анимация, холст и т. д.), requestAnimationFrame().
requestAnimationFrame() выполняет ваш код анимации в самое подходящее время для браузера, как правило, в начале кадра.
Ваш код может выглядеть примерно так:
function makeChange( time ) { // Animation logic here // Call requestAnimationFrame recursively inside the callback function requestAnimationFrame( makeChange ):
} // Call requestAnimationFrame again outside the callback function
requestAnimationFrame( makeChange );
№4 Отделите события от анимации в коде
При 60 кадрах в секунду браузер имеет 16,67 мс для выполнения своей работы на каждом кадре. Это не так много времени, поэтому сохранение вашего кода может повлиять на плавность ваших анимаций.
Развязка кода для обработки событий, таких как прокрутка, изменение размера, события мыши и т. д. из кода, который обрабатывает обновления экрана с помощью метода requestAnimationFrame() является отличным способом оптимизации кода анимации для производительности.
№5 Избегайте долгого кода JavaScript
Браузеры используют основной поток для запуска JavaScript вместе с другими задачами, такими как вычисления стиля, макеты и операции рисования. Долгосрочный JavaScript-код может негативно повлиять на эти задачи, что может привести к тому, что кадры будут пропущены и ядовитые анимации. Поэтому упрощение вашего кода, безусловно, может быть хорошим способом обеспечить бесперебойную работу ваших анимаций.
Для сложных операций JavaScript, которые не требуют доступа к DOM, рассмотрите возможность использования Web Workers. Веб воркер выполняет свои задачи, не влияя на пользовательский интерфейс.
№6 Используйте DevTools браузера для проверки производительности при проверке
Инструменты разработчика вашего браузера позволяют отслеживать, насколько сильно ваш браузер работает для запуска вашего JavaScript-кода или библиотеки сторонних разработчиков. Они также предоставляют полезную информацию о частоте кадров и многое другое.
Вы можете получить доступ к Chrome DevTools, щелкнув правой кнопкой мыши на своей веб-странице и выбрав Inspect внутри контекстного меню. Например, запись вашей веб-страницы с использованием инструментов Performance даст вам представление об узких местах производительности на этой странице:
Нажмите кнопку записи, а затем остановите запись через несколько секунд:
На данный момент у вас должно быть множество данных, которые помогут вам проанализировать производительность вашей страницы:
Этот Chrome DevTools Guide поможет вам извлечь максимальную пользу из DevTools для анализа производительности и множества других данных в браузере Chrome. Если Chrome не является вашим браузером по выбору, это не имеет большого значения, так как большинство современных браузеров в настоящее время поставляются с супер мощными DevTools, которые вы можете использовать для оптимизации вашего кода.
# 7 Используйте Canvas вне экрана для сложных операций рисования
Этот отзыв относится конкретно к оптимизации кода для HTML5 Canvas.
Если ваши фреймы связаны с сложными операциями рисования, хорошей идеей было бы создать внеэкранный холст, где вы выполняете все операции рисования один раз или только когда происходит изменение, а затем на каждом кадре просто рисовать заставку.
Заключение
Оптимизация кода для производительности — это необходимая задача, если вы не хотите разочаровывать ожидания пользователей в Интернете сегодня, но это далеко не всегда легко или просто. Могут быть несколько причин, по которым ваши анимации не работают хорошо, но если вы попробуете советы, перечисленные выше, вы пройдете долгий путь, чтобы избежать наиболее распространенных ошибок производительности анимации, тем самым улучшив пользовательский интерфейс вашего веб-сайта или приложения.
Автор: Maria Antonietta Perna
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.