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

#html #css #html5 #css3

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




  
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... и т.д.
Зависит ли способ обращения к элементам на скорость обработки страницы?
    

Ответы

Ответ 1

Зависит, но разница настолько ничтожна, что никто ее не заметит, даже на старом по
нынешним меркам железе.

Браузер обрабатывает селекторы, начиная с конца. В случае с .url-con - он найдет
все ноды с таким классом, и применит к ним стили.

В случае с .con > .url-con браузер точно так же, как в первом случае, найдет все
ноды с классом .url-con, а потом среди них оставит только те, у которых есть предок
с классом .con. И применит к ним стили.

В случае с .lvl-1 > .con > .url-con:


Найдет все ноды с классом .url-con;
Из них оставит только ноды с предком с классом .con;
Из них оставит только ноды с предком с классом .lvl-1;
И применит к ним стили.