IN
Я хз, но если кратко — выборка по звёздочке тормозит рендер. Особенно, если применяется к руту
Size: a a a
2021 January 31
NM
Я хз, но если кратко — выборка по звёздочке тормозит рендер. Особенно, если применяется к руту
окей, пойду почитаю на этот счет, спасибо
DM
Выбор по звездочке тормозит только если звездочка - часть селектора, а не весь, насколько я знаю
NM
Выбор по звездочке тормозит только если звездочка - часть селектора, а не весь, насколько я знаю
можно пруфы какие-то и как это вообще работает? я просто хз как css браузером обрабатывается
DM
Причина кроется в том, что браузеры проверяют правила справа налево, поэтому каждый элемент будет проверяться на соответствие правилу со звездочкой в конце. Впрочем, возможно это уже оптимизировано.
DM
Грубо говоря, если ты задал селектор вроде
Браузер будет вынужден для каждого элемента проверять, нет ли у него родителя с классом
.parent * { ... }Браузер будет вынужден для каждого элемента проверять, нет ли у него родителя с классом
.parentDM
То есть двигаться по дому до самого рута документа. Для каждого (!) элемента
DM
Если же у тебя селектор
* {}, то этого не происходит, каждый элемент матчится звездочкой сразу и правило применяется. И все. Никаких тормозов.NM
а про то, что большая вложенность селекторов замедляет работа - тоже правда? есть на русском статьи где почитать, а то я как-то пытался углубиться, но видимо недостаточно пытался
DM
Насколько я знаю все это уже настолько оптимизировано в браузерах, что замедления добиться - это надо еще постараться, но по той логике что я описал - да, возможно это правда )
DM
Но.. всегда можно сделать очень точный последний селектор и все будет тип-топ
DM
Например
.wrapper .parent .card .card_title { ... }DM
Такой длинный и сложный маршрут браузеру придется проверять только для элементов с классом
.card_title, если их 1-2 - никаких тормозов не будетNM
Такой длинный и сложный маршрут браузеру придется проверять только для элементов с классом
.card_title, если их 1-2 - никаких тормозов не будетпросто я иногда настолько ленюсь, что уже по селкторам тегов стилизую, думаю насколько это критично
DM
Никогда не стилизуй теги
DM
Только классы, только хардкор )
DM
Это очень плохая практика, которая на сложных разметках ведет к неочевидным применениям стилей
DM
Ибо сделав
article span { ... } ты ВСЕ спаны в статье стилизуешьNM
ну типа у меня есть текстовая нода в параграфе, а он в контейнере и в проекте часто встречается, то я юзаю вложенность класс_контейнера > p {....}
DM
Ты думаешь - ну и норм, у меня нет же других спанов, только те, что в тексте - все круто работает