< H / $ > Хак/Собесов

Перейти на PRO

Какие свойства CSS влияют на последний этап отрисовки компонента

«Какие свойства CSS влияют на последний этап отрисовки компонента» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

На последнем этапе отрисовки (painting) влияют свойства, изменя которые браузер перерисовывает элемент без изменения layout или composite:

Цветовые свойства: color, background-color, border-color
Декоративные: box-shadow, text-shadow, outline, opacity
Фоновые: background-image, background-size, background-position
Маски и фильтры: filter, mask, clip-path

Пример:

.button {
  background-color: blue; /* Триггерит repaint */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Триггерит repaint */
  opacity: 0.8; /* Триггерит repaint (но иногда может попадать в composite) */
}

Эти изменения дешевле, чем reflow (изменение layout), но всё равно влияют на производительность при частых анимациях. Для оптимизации анимаций лучше использовать transform и opacity, которые могут обрабатываться на этапе compositing.