Режим непрерывного рисования для профилирования рисования теперь доступен в Chrome Canary . В этой статье объясняется, как выявить проблему во время рисования страницы и как можно использовать этот новый инструмент для обнаружения узких мест в производительности рисования.
Исследование времени рисования на вашей странице
Итак, вы заметили, что ваша страница прокручивается не плавно. Вот как вы начнете решать проблему. В качестве примера мы будем использовать демо-страницу Дэна Седерхолма «Вещи, которые мы оставили на Луне» .
Вы открываете веб-инспектор, запускаете запись временной шкалы и прокручиваете страницу вверх и вниз. Затем вы смотрите на вертикальную шкалу времени, которая показывает, что произошло в каждом кадре.
Если вы видите, что большая часть времени уходит на рисование (большие зеленые полосы выше 60 кадров в секунду), вам нужно внимательнее разобраться, почему это происходит. Чтобы исследовать свои краски, используйте настройку «Показать прямоугольники краски» в Веб-инспекторе (значок шестеренки в правом нижнем углу Веб-инспектора). Это покажет вам регионы, в которых Chrome рисует.
Chrome перерисовывает области страницы по разным причинам:
- Узлы DOM изменяются в JavaScript, что заставляет Chrome пересчитывать макет страницы.
- Воспроизводятся анимации, которые обновляются в покадровом цикле.
- Взаимодействие с пользователем, например наведение курсора мыши, приводит к изменению стиля определенных элементов.
- Любая другая операция, вызывающая изменение макета страницы.
Как разработчик, вы должны быть в курсе перерисовок, происходящих на вашей странице. Отличный способ сделать это — посмотреть на прямоугольники краски. На скриншоте выше вы можете видеть, что весь экран покрыт большим прямоугольником с краской. Это означает, что весь экран перерисовывается при прокрутке, что нехорошо. В данном конкретном случае это вызвано стилем CSS background-attachment:fixed , который заставляет фоновое изображение страницы оставаться в той же позиции, в то время как содержимое страницы перемещается поверх него при прокрутке.
Если вы обнаружите, что перекраска занимает большую площадь и/или занимает много времени, у вас есть два варианта:
- Вы можете попробовать изменить макет страницы, чтобы уменьшить объем рисования. Если возможно, Chrome рисует видимую страницу только один раз и добавляет части, которые не были видны при прокрутке вниз. Однако бывают случаи, когда Chrome необходимо перекрасить определенные области. Например, правило CSS
position:fixed, которое часто используется для элементов навигации, которые остаются в одном и том же положении, может вызвать такие перерисовки. - Если вы хотите сохранить макет страницы, вы можете попытаться снизить затраты на прорисовку перекрашиваемых областей. Не все стили CSS имеют одинаковую стоимость прорисовки: некоторые оказывают незначительное влияние, другие — большое. Вычисление стоимости покраски определенных стилей может оказаться непростой задачей. Вы можете сделать это, переключая стили на панели «Элементы» и глядя на разницу в записи временной шкалы, что означает переключение между панелями и выполнение большого количества записей. Здесь в игру вступает режим непрерывного рисования .
Режим непрерывной окраски
Режим непрерывного рисования — это инструмент, который помогает вам определить, какие элементы на странице требуют больших затрат. Он переводит страницу в состояние постоянной перерисовки, показывая счетчик того, сколько работы по рисованию происходит. Затем вы можете скрывать элементы и мутировать стили, наблюдая за счетчиком, чтобы понять, что работает медленно.
Настраивать
Чтобы использовать режим непрерывного рисования, вам необходимо использовать Chrome Canary .
В системах Linux (и на некоторых компьютерах Mac) вам необходимо убедиться, что Chrome работает в режиме композиции. Это можно включить навсегда, используя настройку компоновки графического процессора на всех страницах в about:flags .
Как начать
Режим непрерывного рисования можно включить, установив флажок Включить непрерывную перерисовку страницы в настройках Веб-инспектора (значок шестеренки в правом нижнем углу Веб-инспектора).
На небольшом дисплее в правом верхнем углу отображается измеренное время покраски в миллисекундах. Более конкретно это показывает:
- Последнее измеренное время рисования слева.
- Минимум и максимум текущего графика справа.
- Гистограмма, отображающая историю последних 80 кадров внизу (линия на диаграмме указывает 16 мс в качестве контрольной точки).
Измерения времени отрисовки зависят от разрешения экрана, размера окна и оборудования, на котором работает Chrome. Имейте в виду, что для ваших пользователей эти вещи могут отличаться.
Рабочий процесс
Вот как вы можете использовать режим непрерывного рисования , чтобы отслеживать элементы и стили, которые увеличивают затраты на рисование:
- Откройте настройки веб-инспектора и установите флажок «Включить непрерывную перерисовку страницы» .
- Перейдите на панель «Элементы» и перемещайтесь по дереву DOM с помощью клавиш со стрелками или выбирая элементы на странице.
- Используйте сочетание клавиш H , недавно представленный помощник, для переключения видимости элемента.
- Посмотрите на график времени рисования и попытайтесь обнаружить элемент, который увеличивает время рисования.
- Просмотрите стили CSS этого элемента, включая и выключая их, глядя на график, чтобы найти стиль, который вызывает замедление.
- Измените этот стиль и сделайте еще одну запись на временной шкале, чтобы проверить, улучшила ли это работу вашей страницы.
На анимации ниже показано переключение стилей и его влияние на время рисования:
Этот пример демонстрирует, как отключение одного из стилей CSS box-shadow или border-radius значительно сокращает время рисования. Использование для элемента как box-shadow , так и border-radius приводит к очень дорогостоящим операциям рисования, поскольку Chrome не может оптимизировать это. Поэтому, если у вас есть элемент, который часто перерисовывается, как в примере, вам следует избегать этой комбинации.
Примечания
Режим непрерывного рисования перерисовывает всю видимую страницу. Обычно этого не происходит при просмотре веб-страницы. Прокрутка обычно закрашивает только те части, которые раньше не были видны. А при других изменениях на странице перерисовывается только минимально возможная область. Поэтому проверьте с помощью другой записи временной шкалы, действительно ли ваши улучшения стиля повлияли на время отрисовки вашей страницы.
При использовании continuous painting mode вы можете обнаружить, что, например, стили CSS border-radius и box-shadow увеличивают время рисования. В целом не рекомендуется использовать эти функции, они потрясающие, и мы рады, что они наконец-то появились. Но важно знать, когда и где их использовать. Избегайте использования их в местах с большим количеством перекрасок и вообще избегайте их чрезмерного использования.
Живая демо-версия
Нажмите ниже, чтобы просмотреть демонстрацию, в которой Пол Айриш использует непрерывную покраску, чтобы определить исключительно дорогостоящую операцию покраски.