Элемент Jquery + класс селектора

Я надеялся, что $('#childDiv2 .txtClass') или $('#childDiv2 input.txtClass') лучше работают при выборе элемента <input type="text" id="txtID" class="txtClass"/>. Но в соответствии с этим анализ производительности $('.txtClass'); - лучший выбор среди этого. Я использую JQuery 1.7.2 Кто-нибудь объясняет это?

HTML

<div class="childDiv2">
    <input type="text" id="txtID" class="txtClass"/>
    <p class="child">Blah Blah Blah</p>
</div>

$('.txtClass');
$('#childDiv2 .txtClass')
$('#childDiv2 > .txtClass')
$('input.txtClass')
$('#childDiv2 input.txtClass')

Ответ 1

Современные браузеры выставляют очень эффективный метод getElementsByClassName(), который возвращает элементы, имеющие данный класс. Вот почему в вашем случае один селектор классов быстрее.

Подробнее о ваших примерах:

$(".txtClass")                  =>  getElementsByClassName()

$("#childDiv2 .txtClass")       =>  getElementById(),
                                    then getElementsByClassName()

$("#childDiv2 > .txtClass")     =>  getElementById(),
                                    then iterate over children and check class

$("input.txtClass")             =>  getElementsByTagName(),
                                    then iterate over results and check class

$("#childDiv2 input.txtClass")  =>  getElementById(),
                                    then getElementsByTagName(),
                                    then iterate over results and check class

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

Ответ 2

var obj = document.getElementById("childDiv");
xxx = obj.getElementsByClassName("txtClass");

на 30 раз быстрее.

http://jsperf.com/selectors-perf/6

Ответ 3

Селекторы CSS анализируются справа налево. Итак, ваш пример

$('#childDiv2 .txtClass')

будет выполнено два действия. Сначала найдите все элементы с классом txtClass. Затем проверьте каждый элемент, чтобы он был дочерним элементом элемента с id childDiv2.

$('.txtClass')

Этот селектор просто предпримет одно действие. Найти все элементы с классом txtClass

Посмотрите эту статью на css-tricks.com

Ответ 4

Похоже, что это также зависит от плотности элементов с классом среди элементов типа.

Я запускал тесты с помощью Google Chrome версии 30.0.1599.69 с использованием JQuery 1.10.1. Не стесняйтесь попробовать его в другом браузере и/или используя другую версию JQuery.

Я попытался выполнить следующие тесты:

Разреженный (10% от div имеют класс) ссылка на тест на jsbin
Плотный (90% от div имеют класс) ссылка на тест на jsbin

Похоже, что выигрыш Плотный div.class выигрывает, но выигрывает разреженный случай .class.