«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

в 14:05, , рубрики: animations, chrome, css, DevTools, Google Chrome, Веб-разработка, метки: , , ,

image
Сегодня мы поговорим о том, как Chrome Dev Tools помогают нам бороться с лишней перерисовкой страницы.

Прошлые части:
«Workspace» и «Сниппеты»
«Поддержка Sass»

Подготовка

Как всегда ставим последний Chrome Canary. Необязательно, но очень удобно использовать для тестирования отдельное окружение. Все, что нам сегодня понадобится, там уже активировано.

Ситуация

Рассмотрим реальный случай. Есть очень простая страничка-агрегатор местных новостей. Сделана на AngularJS. Но сегодня это абсолютно неважно. При фильтрации новостей используется css-анимация. И вот мы замечаем, что она работает как-то не очень плавно…

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Выявляем проблему

Открываем Chrome Dev Tools ( Cmd/Ctrl + Shift + I ). Открываем вкладку Timeline. Под ней переходим во вкладку Frames. Снизу находим кнопку Record, нажимаем ее и начинаем делать на страничке различные фильтрации новостей.

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Все происходящие события начнут записываться в окне Dev Tools прямоугольниками различных цветов. В данном случае нас больше интересует верхнее окно, в котором отображается количество кадров в секунду. Чем меньше высота прямоугольника —> тем ближе он к 60 FPS (60 кадрам в секунду) -> тем лучше для всех. Наше же приложение в некоторых местах «просидает». И «просидает» оно именно в Rendering (пурпурный цвет) и Painting (зеленый цвет). Оба этих события связаны именно с отрисовкой страницы.

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Теперь переходим в настройки (иконка шестеренки в правом нижнем углу). В Settings —> General находим группу настроек Rendering. Все эти настройки помогают отлаживать скорость отрисовки страниц. Пойдем по-порядку.

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Отмечаем первый пункт "Show paint rectangles". Данная настройка закрашивает все области страницы, которые перерисовываются, красным цветом. Пробуем поводить по ссылкам — все хорошо. Делаем фильтрацию — многие области закрашиваются красным по многу раз, это печально.

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Следующая настройка "Show composited layer borders". Она показывает, отрисовку каких частей страницы Chrome пытается переложить на плечи GPU. Точно также пробуем делать всякие фильрации, видим оранжевый контур вокруг некоторых элементов.

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Далее идет "Show FPS meter". Вырвиглазно-кроваво-красный (это только у меня так?…) измеритель количества кадров в секунду. Обновляется только при событии перерисовки/отрисовки, для этого водим мышкой или делаем фильтрацию новостей.

И вот мы дошли до главной темы этой статьи — "Enable continuous page repainting". Инструмент в реальном времени показывает сколько милисекунд занимает отрисовка страницы. Делаем нашу фильтрацию — получаем целых 149.5 ms на отрисоку страницы!

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Вся прелесть данного инструмента заключается в том, что мы можем отключать различные css-свойства и тут же смотреть как изменилось время отрисовки. Хм, что же у нас может так сильно увеличивать время отрисовки страницы при использовании анимации?

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Пробуем отключить border-radius и text-shadow для меток источника новости и времени ее публикации. Замечательный инструмент показывает, что это уменьшило время отрисовки страницы до 102.4 ms!

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Ладно, мы же с вами изначально знали, что дело все же в самой анимации с использованием translateX :) Отключаем и смотрим результат:

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Вуаля, максимум времени — 17.7 ms. Не идеально, но мы сократили время отрисовки на 84.7 ms!

Полезный совет: На панели Elements: для отключения тех или иных DOM-элементов не обязательно их удалять. Можно просто их скрыть. Достаточно выделить элемент и нажать на клавиатуре клавишу H.

Заключение

Вот так можно использовать Chrome Dev Tools для ускорения отрисовки страниц. «Continuous page repainting» — замечательный инструмент, позволяющий видеть изменения производительности в реальном времени.

Какие выводы можно сделать? Обратите внимание на производительность своего веб-приложения. Особенно это касается всяких анимаций, теней, закруглений и прочего. Постарайтесь не использовать вместе border-radius и box-shadow, потому что это очень сильно может занизить скорость отрисовки страницы.

Надеюсь, что пост оказался полезен. Всем приятного кодинга!

Автор: olegafx

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js