JQuery: производительность селектор

Question

У меня есть следующий HTML:

... 
<div id="panel"> 
    <div class="abc"> 
     <p class="xyz">Hello</p> 
    </div> 
</div> 
... 

Вопрос: Какой самый быстрый способ с JQuery для меня, чтобы получить доступ к p.xyz элемент? I've read some performance reviews, но они не учитывают все разные сценарии.

Я мог бы сделать следующее, но не знаю, как проверить, что является самым быстрым.

$('.xyz'); 
$('p.xyz'); 
$('#panel .xyz'); 
$('#panel p.xyz'); 
$(".xyz", $('#panel')); 

Я уверен, что есть еще больше способов доступа к этому узлу.

>>>Какой самый быстрый и рекомендуемый способ?

Answer 1

Самый быстрый селектор всегда является идентификатором или селектором, который спускается с него. В вашем случае:

$('#panel .xyz'); and $('#panel p.xyz'); 

будет примерно одинаковой скоростью, так близко, это не имеет значения ... но те не-ID, на несколько порядков меньше, чем в производительности.

Существует также уже здоровая доза ответов на этом in another question on SO.

Answer 2

«... но не знаю, как проверить, какой из является самым быстрым».

Посмотрите на firebug. В частности, профайлер Javascript. В основном:

• Установите плагин firebug Firefox.
• Щелкните правой кнопкой мыши по иконке маленькой ошибки на внизу справа от firefox. Выберите «включить все панели».
• Нажмите на вкладку «консоль».
• Нажмите на ссылку «Профиль». Наведите указатель мыши на него: «Время выполнения Javascript». Остальное должно быть достаточно интуитивным. Если вы обнаружите, что это не так, есть много tutorials, чтобы помочь вам.

Теперь вы можете экспериментировать с различными селекторы/DOM структуры и измеряют их относительные времена выполнения для лучшего понимания которых селекторы на самом деле ощутимо влияние на производительность вашего веб-приложения.

Надеюсь, что это поможет.

Answer 3

Каждый раз, когда вы можете использовать селектор ID, он будет быстрее. Механизм селектора jQuery (Sizzle) читается справа налево. Единственное исключение - если в крайнем левом углу находится id, то для охвата поиска используется id.

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

В вашей серии вариантов, как на «что быстрее», это будет выполнять быстрый:

$('#panel p.xyz'); 

Потому что это сфера поиска к одному элементу, а затем найти p теги, а затем выпадают выбора всех тех, у кого нет соответствующего класса.

В некоторых браузерах, с большим количеством других родственный p тегов, не должен соответствовать запрос, он будет выполнять намного быстрее, чем:

$('#panel .xyz'); 

Просто помните, что JQuery использует столько нативные функции насколько это возможно. Каждый основной браузер имеет getElementById, поэтому, если это возможно, используйте id.

Далее, у каждого браузера есть getElementsByTagName. У некоторых браузеров нет getElementsByClassName. Таким образом, помощь jQuery поможет вам с помощью id, где возможно охватить поиск, а также путем сопоставления имен тегов с классом для поиска класса.

Никогда не передавайте объект JQuery в параметре Область

Одна вещь, вы должны НИКОГДА не сделать, это ваш последний пример:

$(".xyz", $('#panel')); 

Это не будет иметь никакого влияния скорости (и в цикл будет медленнее), чем с использованием обычной строки. Только каждый передает элемент DOM в этот параметр. Это может быть очень полезно, если у вас есть элемент DOM уже:.

$("#panel").click(function(){ 
    var p = $("p.xyz", this); // This is fast 
});