Легче/быстрее оценить CSS-селектора LTR или RTL?

Учитывая селектор CSS, например

ul > li a

Было бы проще/быстрее оценить его слева направо или справа налево? (Я понимаю, что ответы на "легкие" и "быстрые" могут быть разными. Мне нужен ответ на оба вопроса). Я собираюсь запустить один из этих путей, и я не хочу получать половину пути, а затем понимаю, что выбрал неправильный путь:)

LTR: Итерируйте по всем элементам документа, выделите те, которые являются ul, затем проверьте все их дочерние элементы на li, а затем посмотрите на их потомки для a.

RTL: перейдите по всем элементам документа, найдите все a, отфильтруйте те, у которых нет предка, который является li, если он имеет предка li, проверьте если его родительский элемент ul, если нет, отбросьте его a.

Кроме того, на самом деле нет другого способа сделать это, чем есть итерация по всем элементам?

Я думаю в контексте поиска элементов, как это делает jQuery, а не в контексте применения стилей.

Ответ 1

Браузеры и JS-движок Sizzle (что используется в jQuery и других фреймворках) используют сопоставление справа налево.

Справа налево работает как наиболее оптимальное решение для перемещения в большинстве ситуаций.

Sizzle оптимизирует селектор, который начинается с идентификатора. Сначала он решает элемент с идентификатором. Затем он использует это как контекст для дальнейшего прохождения.

Итак, если у вас есть селектор

#myID > ul a

Sizzle сначала найдет элемент С#myID, считая, что в этом случае более точно, слева направо.

Ответ 2

Это один из тех вопросов, которые повторяются на каждом форуме дизайна и программирования. Общим примером является также тот, который дает исходный плакат по этой теме:

ul > li a

если вы пересекаете ltr, вы найдете все uls, а затем все lis этих uls, а затем все теги в этих lis. Обратите внимание на то, что разметка может выглядеть так:

<ul>
    <li>
        <a href="#">Click Here</a>
    </li>
</ul>

или это может выглядеть так:

<ul>
    <li>
        <span>
            <p>
                <div class="someuselessclass">
                    <span class="JunkClass">
                        <a href="#">Click Here</a>
                    </span>
                </div>
            </p>
        </span>
    </li>
</ul>

Дело в том, что вы не знаете, как глубоко пройти обход, и могут быть тысячи таких ссылок в тысячах таких LI. Мне кажется, что на опыте разработчики браузеров пришли к выводу, что быстрее разобрать право налево.

Что мои два цента.