Интересный кейс того, что иной раз именно CSS может быть узким местом производительности.
Чаще всего CSS не является бутылочным горлышком. Браузеры хорошо оптимизированы для работы со стилями, и часто более выгодно прилагать усилия для оптимизации JS, а не CSS.
Однако, если речь идёт о действительно больших страницах (с точки зрения структуры DOM), а также необходимости частых обновлений, всё может поменяться.
В статье показано, что время рендеринга одной и той же разметки на разных стилях может отличаться в 7 раз.
Обычно это будет что-то в духе 300мс против 45мс — такая оптимизация приятна, но ничего критичного.
Но в статье приводятся цифры — 7 секунд против 1 секунды.
И вот 7 секунд — это уже катастрофа.
➿➿➿
Ключевые моменты:
⚫️Нужно аккуратно подходить к вычисляемым свойствам
CSS Custom Properties — не бесплатные. Особенно, когда внутри используются другие функции.
Бояться их не нужно, но выстраивать целую систему на этом я бы поостерёгся. Верю в то, что CSS должен быть статичным настолько, насколько это возможно для конкретного интерфейса.
⚫️Нужно стремиться к плоским селекторам
Сложные селекторы вроде
[part~="cell"], а также любой каскад приводит к более частому и дорогому матчингy по сравнению с классами (БЭМ опять молодец 🎉)CSS действительно может быть узким местом, когда его нужно часто пересчитывать и он сложно устроен (селекторы + вычисления).
➿➿➿
В завершение хочется сказать, что нам хочется видеть существенные цифры прироста производительности — ускорили в 5 раз, в 10 раз, но иногда ускорение и на 30% может сыграть свою роль, иногда важно пересечение порога, а не конкретные цифры.
Например, если цикл перерисовки занимает
20мс, то минус 30% — это уже ~14мс, и вот мы уже попадаем в бюджет одного кадра (16.6мс) для 60Гц экрана, и ощущаться интерфейс станет ощутимо приятнее.