Брамус рассказывает об интересном исследовании производительности зарегистрированных кастомных свойств в CSS. Напомню, в CSS теперь во всех браузерах можно явно задавать тип кастомного свойства. И по сути это позволяет браузеру понимать, как воспринимать то, что раньше было просто строкой текста.
@property --color-primary {
syntax: '<color>';
inherits: true;
initial-value: tomato;
}
Суть бенчмарка в том, чтобы проверить, ускоряется ли работа по инвалидации значений, если использовать эту новомодную фичу. Дело в том, что при изменении любого CSS-свойства браузер по разным правилам вынужден обновить целое дерево других значений, что не бесплатно. А иногда и всю страницу целиком перерисовать. В рамках исследования было проведено три замера.
1. Сравнение обычного наследуемого свойства, незарегистрированного кастомного свойства и зарегистрированного наследуемого кастомного свойства (`inherits: true`).
В целом, разница для кастомных свойств небольшая. Кастомные свойства в любом случае обрабатываются быстрее, чем обычное свойство. Но зарегистрированные свойства всё-таки чууууть-чуть медленнее.
2. Сравнение обычного ненаследуемого свойства и зарегистрированного ненаследуемого кастомного свойства (`inherits: false`).
Тут уже интереснее. Конечно, логично, что наследование замедляет инвалидацию. Но тут бенчмарк показывает прирост производительности на 1780% (прописью: тысяча семьсот восемьдесят) для обычных свойств! И 848% — для кастомных. При этом обычные свойства производительнее, чем кастомные.
3. Замер времени на обработку 25000 регистраций кастомных свойств.
Почти никак не влияет. Так как регистрация свойств происходит в самом начале загрузки приложения, то результат в 30ms на обработку 25000 регистраций — ничто по сравнению с загрузкой самого CSS, эти регистрации содержащего.
Выводы:
- Если есть возможность задать кастомному свойству
inherits: false — задайте. Прирост производительности при наличии большого количества кастомных свойств будет колоссальный. А с современными дизайн-системами у вас скорее всего таких свойств много.- Лучше зарегистрировать свойство, чем не зарегистрировать. Время на обработку таких конструкций мизерное, зато на выходе получаете полноценное свойство с понятным браузеру значением. Но тут надо внимательно следить за размером CSS-бандла, потому что он точно распухнет.
https://web.dev/blog/at-property-performance
