Проще / быстрее оценить 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>

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

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