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

Селектор на родителя может вызвать relayout, если он изменяет размеры или положение родителя. Например:

.parent:hover {
  padding: 20px; /* Изменение padding вызовет relayout */
  width: 100%;   /* Изменение ширины - relayout */
}

При наведении браузер пересчитает геометрию родителя и всех его дочерних элементов. Это дорогая операция, особенно для сложных DOM-деревьев.

Оптимизация:

• Избегайте изменяющих геометрию свойств (width, height, padding, margin)
• Используйте transform и opacity для анимаций (они не вызывают relayout)
• Применяйте will-change для сложных анимаций