Перерисовка

После того как браузер знает, где стоит каждый блок, он превращает их в изображение: заливает фоны, рисует рамки, тени, текст и картинки. Это этап отрисовки (paint). Если затем меняется только внешний вид — кнопка при наведении стала другого цвета, — раскладку пересчитывать не нужно, но нарисовать заново затронутую область придётся. Это и есть перерисовка, или repaint.

Она дешевле перерасчёта компоновки, но не бесплатна. Стоимость зависит от площади и сложности: поменять цвет текста в ссылке — мелочь, а перерисовывать полноэкранный блок с размытой тенью и градиентом на каждом кадре анимации — уже заметная нагрузка на слабом телефоне.

Что вызывает перерисовку

• color, background, border-color, outline;
• box-shadow, text-shadow, border-radius;
• visibility — элемент не исчезает из раскладки, но перестаёт рисоваться;
• фильтры и размытие, особенно backdrop-filter.

Свойства transform и opacity обычно обходятся без перерисовки: если элемент вынесен на отдельный слой, композитор браузера сдвигает или делает прозрачной уже готовую картинку.

Как оживить тень без перерисовки

Анимация box-shadow при наведении на карточку заставляет перерисовывать её на каждом кадре. Обходной приём — нарисовать тень один раз на псевдоэлементе и анимировать только его прозрачность:

.card { position: relative; }
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 12px 32px rgb(0 0 0 / .18);
  opacity: 0;
  transition: opacity .2s;
}
.card:hover::after { opacity: 1; }

Как увидеть перерисовки

В Chrome во вкладке Rendering инструментов разработчика есть флажок Paint flashing: области, которые браузер перерисовывает, подсвечиваются зелёным. Если при прокрутке зелёным мигает весь экран — ищите фиксированные элементы с тенями, фоны с background-attachment: fixed или анимации, которые не останавливаются за пределами экрана. Во вкладке Performance отрисовка отмечена блоками Paint.

Подсказка will-change: transform заранее выносит элемент на отдельный слой и снимает часть перерисовок. Расставлять её всем элементам подряд не стоит: каждый слой занимает видеопамять, и на мобильных это может замедлить страницу сильнее, чем перерисовки.