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

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

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

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

вместо:

#my-id

будет ли прежний выход лучшая производительность, если DOM довольно большой?

6
browser css optimization

4 ответов

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

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

Это:

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

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

#my-id

см.:http://www.css-101.org/descendant-selector/go_fetch_yourself.php

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

http://css-tricks.com/efficiently-rendering-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 */
8

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

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

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

2

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

1

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

1