Почему селекторы CSS совпадают справа налево

В соответствии с правилами CSS (такими как  .box span) будет сформировано дерево индексов, соответствующее правилам.Узлы сверху вниз дерева — это узлы, соответствующие селекторам в правилах справа налево.

 

Правила сопоставления слева направо

Общее мнение состоит в том, что чем более подробно указан селектор, тем легче его сопоставить и тем выше производительность. Это представление основано на том факте, что каждый стиль CSS запрашивается для соответствия узлам в dom.Чем выше уровень детализации селектора, тем менее избыточен запрос и выше производительность. Например:

// 布局
<div class="box">
    <div class="div1">
		<span class="span1">测试1</span>
	</div>
    <div class="div2">
		<span class="span2">测试2</span>
	</div>
</div>


.box .span1{} // 样式1
.box .div1 .span1{} // 样式2

Согласно приведенным выше правилам, стиль 1 будет делать на одно сравнение больше, чем стиль 2, то есть сравнение span2. Этот способ сопоставления запросов CSS с узлами dom представляет собой так называемое правило сопоставления слева направо (для селекторов CSS) — для стиля 1 оно соответствует 5 раз слева направо и 7 раз справа налево.

Правила соответствия справа налево

Другой способ мышления состоит в том, что чем проще спецификация селектора, тем легче его сопоставить и тем выше производительность. Основой этого представления является запрос и сопоставление стиля в CSS для каждого узла dom, чем выше уровень детализации селектора, тем больше совпадений запроса и тем хуже производительность. Например:

// 布局
<div class="box">
    <div class="div1">
		<span class="span">测试1</span>
	</div>
</div>


.div1 .span{} // 样式1
.box .div1 .span{} // 样式2

В соответствии с приведенными выше правилами, для сопоставления шаблона «Тест 1» шаблону 1 требуется на одно совпадение меньше, чем шаблону 2. Этот способ запроса узла dom, совпадающий с селекторами CSS, представляет собой так называемое правило сопоставления справа налево (для селекторов CSS) — для стиля 1 сопоставьте 3 раза слева направо и сопоставьте справа налево 2 раза.

Понятно, что эффективность двух правил сопоставления сильно различается. Это связано с тем, что сопоставление справа налево отфильтровывает большое количество неквалифицированных крайних правых узлов (листовых узлов) на первом шаге, в то время как производительность правил сопоставления слева направо тратится впустую на неудачные поиски.

Подведем итог

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