Вопрос по performance, css, css-selectors – Выбор эффективных селекторов на основе вычислительной сложности

6

Учитывая особенности обработки CSS, наиболее заметноRTL соответствие а такжеэффективность селектораКак селекторы должны быть написаны исключительно с точки зрения производительности движка рендеринга?

Это должно охватывать общие аспекты и включать использование или избегание псевдоклассов, псевдоэлементов и селекторов отношений.

& Quot; CSS Selector Profiler & quot; в инструментах разработчика Chrome полезен, если вы хотите ... профилировать свои CSS-селекторы. thirtydot
Хороший вопрос, но всегда помните: производительность - это еще не все, пока вам не придется беспокоиться. Только начинайте беспокоиться о производительности, если вы уверены, что вам абсолютно необходимо максимально сэкономить, и ваш дизайн это позволяет. BoltClock♦

Ваш Ответ

1   ответ
6

содержащемN элементы со средней глубинойD, Существует также в общей сложностиS Правила CSS в применяемых таблицах стилей.

Elements' styles are applied individually meaning there is a direct relationship between N and overall complexity. Worth noting, this can be somewhat offset by browser logic such as reference caching and recycling styles from identical elements. For instance, the following list items will have the same CSS properties applied (assuming no pseudo-classes such as :nth-child are applied):

<ul class="sample">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Selectors are matched right-to-left for individual rule eligibility - i.e. if the right-most key does not match a particular element, there is no need to further process the selector and it is discarded. This means that the right-most key should match as few elements as possible. Below, the p descriptor will match more elements including paragraphs outside of target container (which, of course, will not have the rule apply but will still result in more iterations of eligibility checking for that particular selector):

.custom-container p {}
.container .custom-paragraph {}

Relationship selectors: descendant selector requires for up to D elements to be iterated over. For instance, successfully matching .container .content may only require one step should the elements be in a parent-child relationship, but the DOM tree will need to be traversed all the way up to html before an element can be confirmed a mismatch and the rule safely discarded. This applies to chained descendant selectors as well, with some allowances.

On the other hand, a > child selector, an + adjacent selector or :first-child still require an additional element to be evaluated but only have an implied depth of one and will never require further tree traversal.

The behavior definition of pseudo-elements such as :before and :after implies they are not part of the RTL paradigm. The logic the assumption is that there is no pseudo element per se until a rule instructs for it to be inserted before or after an element's content (which in turn requires extra DOM manipulation but there is no additional computation required to match the selector itself).

I couldn't find any information on pseudo-classes such as :nth-child() or :disabled. Verifying an element state would require additional computation, but from the rule parsing perspective it would only make sense for them to be excluded from RTL processing.

Учитывая эти отношения, вычислительная сложностьO(N*D*S) должен быть снижен в первую очередь за счет минимизации глубины селекторов CSS и адресации пункта 2 выше. Это приведет к значительно более сильным улучшениям по сравнению с минимизацией количества правил CSS или только элементов HTML.

Shallow, preferably one-level, specific selectors are processed faster. Это подняло Google на совершенно новый уровень (программно, а не вручную!), Например, редко используется селектор с тремя ключами, и большинство правил в результатах поиска выглядит так

#gb {}
#gbz, #gbg {}
#gbz {}
#gbg {}
#gbs {}
.gbto #gbs {}
#gbx3, #gbx4 {}
#gbx3 {}
#gbx4 {}
/*...*/

^ - while this is true from a rendering engine performance standpoint, there are always additional factors such as traffic overhead and DOM parsing etc.

Источники:1 2 3 4 5

В селекторах все псевдоэлементы (не только::before а также::after) подчиняются тому же правилу, что они могут применяться только к субъекту селектора и оцениваются только после завершения сопоставления селектора -w3.org/TR/selectors/#pseudo-elements От CSS1 до CSS3, это всегда ключевой селектор; однако в CSS4 это может измениться.
@BoltClock: хорошая мысль; Я хотел бы предположить, что родительский селектор CSS4 будет фактически псевдоклассом сhas-children условие - в противном случае может быть много избыточных циклов сопоставления. Что касается специфических для кода реализаций, то им, вероятно, лучше придерживаться предложенного поведения - ярким примером этого является IE7 & apos; кеширование:first-child Рекомендации o.v.
Разбор RTL является деталью реализации и может варьироваться от двигателя к двигателю, но общая концепция запуска с помощью ключевого селектора и обратной работы согласована между поставщиками. Какие простые селекторы в каждом составном селекторе оцениваются первыми, кажется, что может ответить только исходный код ... подробнее об этомhere.

Похожие вопросы