Repaint Time
Repaint Time (время перерисовки) - это метрика веб-производительности, измеряющая время, которое браузер тратит на визуальное обновление интерфейса после изменений в DOM или CSS, определяя, насколько плавно и быстро страница реагирует на взаимодействия пользователя.
Метрика используется в веб-разработке и SEO-оптимизации для диагностики проблем с плавностью интерфейса. Например, при создании интернет-магазина с фильтрацией товаров каждое изменение фильтра может вызывать перерисовку элементов, и если Repaint Time превышает 16 миллисекунд, анимация становится дергающейся, а сайт воспринимается как «тормозящий».
Repaint Time - часть критического пути рендеринга (Critical Rendering Path) наряду с Reflow (пересчёт геометрии) и JavaScript-выполнением. Понимание этой метрики важно для frontend-разработчиков и технических SEO-специалистов, оптимизирующих производительность сайтов. В Core Web Vitals метрика напрямую не входит, но влияет на INP (Interaction to Next Paint).
Кратко
[править]Repaint Time - это время, затрачиваемое браузером на закрашивание изменённых элементов на экране. Если это время превышает допустимые значения (16 мс для 60 FPS), интерфейс выглядит дергающимся, даже если код выполняется быстро.
Что такое Repaint Time
[править]Repaint Time - это время, необходимое браузеру для визуального обновления элементов страницы после изменения их визуальных свойств (цвет, фон, видимость, тень, прозрачность), когда геометрия элемента не меняется. В отличие от Reflow (пересчёт расположения и размеров элементов), repaint не затрагивает структуру страницы, только её визуальное оформление.
Repaint Time измеряется в миллисекундах и зависит от сложности CSS-свойств (градиенты, тени, фильтры), количества изменяемых элементов и производительности устройства. Типичное время перерисовки для плавного интерфейса должно составлять менее 16 миллисекунд (для 60 FPS) или менее 8 миллисекунд (для 120 FPS на современных дисплеях). Превышение этих значений приводит к пропуску кадров (dropped frames) и визуальным задержкам.
Как работает Repaint Time
[править]Браузер проходит несколько этапов для отображения страницы:
- JavaScript. Выполняется код, который может изменять стили или DOM.
- Style. Вычисляется, какие CSS-правила применяются к элементам.
- Layout (Reflow). Рассчитывается геометрия элементов (размеры, позиции).
- Paint (Repaint). Закрашиваются пиксели на основе стилей.
- Composite. Объединяются слои и отправляются на экран.
Repaint происходит на этапе Paint. Если изменяются только стили, не влияющие на геометрию (например, background-color, opacity, visibility, box-shadow), браузер может пропустить этап Layout и сразу перейти к Paint, что быстрее, чем полный Reflow.
| Группа свойств | Примеры |
|---|---|
| Цвет и фон | color, background-color, border-color, outline-color |
| Визуальные эффекты | opacity, visibility, box-shadow, text-shadow, filter |
| Трансформации (иногда) | transform (если не выделен в отдельный слой) |
Инструменты измерения Repaint Time
[править]| Инструмент | Как измеряет |
|---|---|
| Chrome DevTools - Performance | В таймлайне отображаются задачи Paint (зелёные блоки) с указанием времени выполнения |
| Lighthouse | В отчёте производительности показывает проблемы с рендерингом |
| Web Vitals JavaScript библиотека | Позволяет отслеживать INP, который коррелирует с Repaint Time |
| Frame Rate API (requestAnimationFrame) | Позволяет подсчитывать пропущенные кадры |
Преимущества
[править]- Высокая плавность интерфейса: низкое Repaint Time обеспечивает 60-120 FPS, что критически важно для анимаций, скролла и интерактивных элементов.
- Улучшение Core Web Vitals: снижение времени перерисовки положительно влияет на INP (Interaction to Next Paint).
- Позитивное восприятие бренда: быстрые и плавные сайты ассоциируются с качеством и профессионализмом.
- Снижение нагрузки на GPU: оптимизация перерисовок уменьшает использование графического процессора, особенно на мобильных устройствах.
- SEO-преимущество: Google учитывает производительность (Core Web Vitals) в ранжировании, а Repaint Time влияет на эти метрики.
Недостатки
[править]- Сложность диагностики: определить, что именно вызывает долгие перерисовки, сложнее, чем выявить медленный JavaScript или сетевые запросы.
- Зависимость от устройства: на старых смартфонах или бюджетных ноутбуках Repaint Time может быть высоким даже при оптимизированном коде.
- Влияние CSS-эффектов: градиенты, размытие (filter: blur), сложные тени значительно увеличивают время перерисовки.
- Не все изменения можно оптимизировать: некоторые визуальные эффекты требуют перерисовки больших областей экрана, что невозможно обойти.
Где используется
[править]Repaint Time критически важен для:
- Сайтов с анимацией: лендинги с параллакс-эффектами, интерактивные презентации.
- Интернет-магазинов: быстрая фильтрация товаров, анимация добавления в корзину.
- Веб-приложений (SPA): дашборды, конструкторы, где интерфейс постоянно обновляется.
- Мобильных версий сайтов: где ресурсы GPU ограничены, а пользователи особенно чувствительны к «тормозам».
- SEO-оптимизации: для прохождения Core Web Vitals и улучшения позиций в Google.
Сравнение с Reflow
[править]| Критерий | Repaint | Reflow (Layout) |
|---|---|---|
| Что изменяется | Визуальные свойства (цвет, тень, фон) | Геометрия элементов (размеры, позиции) |
| Затратность | Меньше (только закрашивание пикселей) | Больше (пересчёт всех размеров и позиций) |
| Триггеры | background-color, opacity, visibility, box-shadow | width, height, margin, padding, display, font-size |
| Частота | Выше (каждое изменение стиля) | Ниже (требует пересчёта структуры) |
| Оптимизация | Через выделение слоёв (will-change, transform) | Через минимизацию изменений, batch-обновления |
Способы оптимизации Repaint Time
[править]- Использовать transform и opacity для анимаций: эти свойства работают на этапе compositing, не вызывая repaint.
- Выделять анимируемые элементы в отдельные слои: через CSS-свойство will-change: transform.
- Избегать сложных CSS-эффектов: градиенты, размытие (filter: blur), сложные тени увеличивают время перерисовки.
- Уменьшать количество перерисовываемых элементов: группировать изменения, использовать CSS-классы вместо inline-стилей.
- Применять requestAnimationFrame для группировки визуальных обновлений.
Часто задаваемые вопросы
[править]Чем Repaint отличается от Reflow?
[править]Repaint - это перерисовка цветов, теней и других визуальных свойств без изменения геометрии (лёгкая операция). Reflow - это пересчёт расположения и размеров элементов (тяжёлая операция). Reflow всегда вызывает Repaint, но Repaint может происходить без Reflow.
Как снизить Repaint Time?
[править]Снизить Repaint Time можно, используя CSS-свойства transform и opacity (они работают в отдельном слое), избегая сложных градиентов и теней, выделяя анимируемые элементы в отдельные слои (will-change: transform) и уменьшая количество перерисовываемых элементов.
Влияет ли Repaint Time на SEO?
[править]Косвенно влияет. Google учитывает Core Web Vitals (INP, LCP, CLS) в ранжировании. Высокое Repaint Time ухудшает INP (время отклика на взаимодействие), что может снижать позиции сайта в поисковой выдаче.
Как измерить Repaint Time на реальном устройстве?
[править]Для измерения на реальном устройстве можно использовать Chrome DevTools на подключённом смартфоне (режим Remote Debugging) или встроенные инструменты производительности браузера на мобильных устройствах. Также доступны сторонние сервисы (WebPageTest, BrowserStack) с возможностью записи производительности.
Какое Repaint Time считается хорошим?
[править]Для плавной анимации и отзывчивого интерфейса Repaint Time не должен превышать 16 миллисекунд (соответствует 60 FPS). Для современных устройств с дисплеями 120 Гц целевое значение - менее 8 миллисекунд.
