Как измеряется производительность CSS модулей

Производительность CSS измеряется по нескольким ключевым метрикам:

1. Время загрузки и парсинга – чем больше CSS, тем дольше браузер его обрабатывает. Оптимизация: минификация, разделение на критический и отложенный CSS.

2. Сложность селекторов – глубокие вложенности (div > ul > li > a) замедляют рендеринг. Лучше использовать классы с низкой специфичностью.

3. Количество пересчетов стилей (reflows/repaints) – изменение стилей через JS может вызвать дорогие операции. Пример:

/* Плохо: вызывает repaint */
.element { width: 100px; }
/* Лучше: использует transform (не трогает layout) */
.element { transform: scale(1.1); }

4. Использование GPU-ускорения – свойства типа transform, opacity работают быстрее, так как используют композитинг.

Инструменты для проверки: Lighthouse, Chrome DevTools (Performance tab), CSS Stats.