Улучшение плавности анимации с помощью Chrome Developer Tools
Если Ваше веб-приложение включает в себя прокрутку вниз длинных списков или у Вас есть игра с летающими птичками (Angry Birds) и разрушаемыми структурами и Вы очень очень хотите улучшенной плавности при анимации и работе с объектами, то стоит прочитать информацию полностью.
Раньше были большие сложности с определением причины дрожания анимации и лагами при действиях пользователя, используя Chrome Developer Tools (Инструменты разработчика, Ctrl+Shift+I
) было практически невозможно узнать причины ошибок. Поэтому разработчики из команды Chrome добавили специальный режим (Frame Mode) для панели Timeline (Временная шкала), этот режим должен помочь определить длинные фреймы и понять какая-часть кода тормозит выполнение.
Что такое фрейм в понимании философии Chrome Developer Tools - фрейм включает все задачи, которые нужно выполнить браузеру для обновления экрана (отрисовки) после действий пользователя или по тику таймера анимации.
Сложная система выполнения кода в приложении может быть такой (но необязательно):
- запуск JavaScript-анимаций и других обработчиков событий;
- обновление CSS-анимаций;
- расчёт стилей и элементов в DOM-структуре;
- отрисовка обновлённых слоёв на странице;
- компоновка и представление пользователю результата.
На всё про всё должно уйти не более 16,6мс (это примерно частота обновления 60 Гц). Если не успеть выполнить все действия, то фрейм будет пропущен, а значит пострадает и анимация.
Теперь стоит показать как Timeline может помочь в непростой ситуации нахождения медленного кода, для этого следует запустить Google Chrome и нужную браузерную игру, открыть Chrome Developer Tools (Ctrl+Shift+I
) и начать запись в Timeline после того как будет запущена игра с нужным участком, где происходят ошибки в отрисовке анимации. Режим Frame будет отображаться цветными полосками, каждая из которых является одним отдельным кадром.
Цвета при этом оповещают о различных событиях:
- сетевая активность и разбор HTML-кода (синий цвет);
- выполнение JavaScript (жёлтый);
- пересчёт стилей и слоёв (фиолетовый);
- отрисовка и компоновка (зелёный);
Вы также можете приблизить выбранные кадры или кликнуть на интересующий кадр. Нажав по определённому кадру можно получить более подробную информацию - длительность кадра, количество кадров при данной длительности.
Даже если в веб-приложении отсутствует анимация режим кадров может быть полезен, браузер часто выполняет повторяющиеся последовательности действий при обработке входных событий таких как нажатия кнопок клавиатуры, действия мышью, скроллинг и т.д. Анализ выполнения этих данных может позволить добавить интерактивности и плавности в события.
В больших веб-приложениях, которые состоят из огромных DOM-деревьев, обработка слоёв может занимать много времени и ресурсов. Выполнять обработку в цикле становится практически невозможным. Поэтому разработчики добавили предупреждающий знак для слоёв, которые запрашивают позиционные свойства (такие как offsetWidth и offsetHeight) из DOM-элементов с помощью JavaScript.
При наведении на событие слоя можно увидеть 2 состояния - Layout invalidate и Layout forced.
Ну и конечно не стоит забывать о лучших практиках для работы с анимацией - использование requestAnimationFrame API, это гарантирует, что браузер Chrome будет запускать код анимации синхронно с обновлением экрана.
/bВозможно, Вас заинтересуют:
Улучшение плавности анимации с помощью Chrome Developer Tools
Рейтинг: 0
(Голосов: 0)
Польза: 0
(Голосов: 0)
Комментарии
Комментариев пока нет
Чтобы оставить комментарий - зарегистрируйтесь или авторизуйтесь через любимый сервис (ВКонтакте, Одноклассники, Twitter и др.) с помощью OpenID.