Оптимизация CSS, вложенные селекторы и индексация идентификаторов / имен классов в браузере

Question

При рендеринге веб-страниц и применении стилей браузеры индексируют идентификаторы и имена классов для эффективного поиска или пересекают весь DOM сверху каждый раз, когда указывается идентификатор или имя класса для достижения правильного элемента.

Мне интересно по причинам оптимизации и стоит ли давать подсказки браузера (более длинные селекторы), где находится объект с определенным идентификатором. * Т.е. 1003 *

#container #one-of-many-container-siblings #my-id 

вместо:

#my-id

Дадут ли первые более высокую производительность, если DOM достаточно велик?

Answer 1

Это на самом деле работает противоположно тому, что вы думаете.

Помните, что браузеры анализируют селекторы CSS справа налево.

Это:

#container #one-of-many-container-siblings #my-id

будетсделайте больше шагов, чтобы соответствовать этому:

#my-id

См .: http://www.css -101.org / потомок-селектор / go_fetch_yourself.php

Рассматривая вопрос, который вытолько что спросил, я рекомендую вам прочитать эту статью:

http://css -tricks.com /ffective-render-css /

Это поможет вам написать большеэффективные селекторы:

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

Answer 2

Определение идентификатора в HTML / CSS является единичным экземпляром элемента.Предполагая, что вы следуете этому правилу, вам нужен только идентификатор этого элемента.Браузер выполнит поиск, найдет этот элемент и остановится.

С вашим «подсказкой» он сначала будет искать первый элемент, затем второй, а затем третий, прежде чем остановиться.Это, как вы, вероятно, видите, более неэффективно.

При работе с классами это может стать немного более двусмысленным и нечетким, но общее правило - чем меньше селекторов, тем лучше.Если вы обнаружите, что делаете три, четыре или пять селекторов, возможно, стоит подумать о небольшом рефакторинге, таком как добавление классов или идентификаторов в стратегических местах или даже не столь специфично с вашими селекторами CSS.

Answer 3

Лучше всего использовать 2 или менее селектора, как правило, для производительности.

Answer 4

Использование более короткой версии всегда будет быстрее, потому что выполняется меньше проверок, однако я не знаю, почему нужно оптимизировать CSS на странице.