Что такое repaint?

Repaint (перерисовка) — это перерисовка браузером пикселей элемента при изменении его внешнего вида без изменения геометрии (размеров и позиций).

Когда происходит repaint

• Изменение color, background, visibility.
• Изменение box-shadow, outline, border-color.
• Любое визуальное изменение, не меняющее расположение элементов.

/* Вызовет repaint, но не reflow */
.box { background: red; }

Repaint против reflow

• Reflow — пересчёт геометрии (размеры/позиции), затем обязательно repaint. Дороже.
• Repaint — только перерисовка пикселей без изменения layout. Дешевле reflow, но тоже не бесплатно.

Порядок: reflow → repaint → composite. Repaint может произойти без reflow, но reflow всегда влечёт repaint.

Самый дешёвый путь — composite

Свойства transform и opacity при аппаратном ускорении меняются на этапе composite, минуя layout и paint:

/* Дёшево: только composite, без repaint/reflow */
.box { transform: translateX(10px); opacity: 0.5; }

Поэтому анимации делают через transform/opacity.

Коротко для собеседования

Repaint — перерисовка пикселей при изменении внешнего вида (цвет, фон, тень) без изменения геометрии. Дешевле reflow, но не бесплатен. transform/opacity идут ещё дешевле — на этапе composite, минуя paint.