Улучшение плавности анимации с помощью 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 будет запускать код анимации синхронно с обновлением экрана.

Возможно, Вас заинтересуют:

• Скачать Google Chrome
• Бесплатный браузер Google Chrome

Комментариев пока нет

Чтобы оставить комментарий - зарегистрируйтесь или авторизуйтесь через любимый сервис (ВКонтакте, Одноклассники, Twitter и др.) с помощью OpenID.