Проще / быстрее оценить CSS селекторы LTR или RTL?

Question

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

ul > li a

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

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

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

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

---

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

Answer 1

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

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

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

Так что если у вас есть селектор

#myID > ul a

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

Answer 2

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

ul> li a

если вы пройдете через ltr, вы найдете все UL, а затем все 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 могут быть тысячи таких ссылок. Сдается мне, что, исходя из своего опыта, разработчики браузеров пришли к выводу, что синтаксический анализ справа налево происходит быстрее.

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