Страницы

Поиск по вопросам

среда, 22 мая 2019 г.

Влияние на производительность

Вопрос скорее для профи, на удовлетворение моей любопытности. Допустим у нас есть:

TEST

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea maiores impedit magni animi quos fugit ex odit non tenetur, doloribus doloremque cum accusamus, nisi eius!


и допустим я хочу обратится через css к классу .url-con я это могу сделать разными способами: .url-con или .lvl-1 > .con > .url-con или .con > .url-con... и т.д. Зависит ли способ обращения к элементам на скорость обработки страницы?


Ответ

Зависит, но разница настолько ничтожна, что никто ее не заметит, даже на старом по нынешним меркам железе.
Браузер обрабатывает селекторы, начиная с конца. В случае с .url-con - он найдет все ноды с таким классом, и применит к ним стили.
В случае с .con > .url-con браузер точно так же, как в первом случае, найдет все ноды с классом .url-con, а потом среди них оставит только те, у которых есть предок с классом .con. И применит к ним стили.
В случае с .lvl-1 > .con > .url-con
Найдет все ноды с классом .url-con Из них оставит только ноды с предком с классом .con Из них оставит только ноды с предком с классом .lvl-1 И применит к ним стили.

Комментариев нет:

Отправить комментарий