Производительность селекторов jQuery

Question

Я знаю, что я просто являюсь OCD в течение нескольких миллисекунд времени на производительность, но мне просто интересно, почему для меня справедливо следующее. Кажется, это противоречит моей логике.

Я в настоящее время есть DIV, который имеет затухает изображение внутри по наведению:

$('div.someclass').hover(function() { 
    $(this).children('img').fadeOut(function(){ 
     // do something 
    }); 
}, function() { 
    // do something 
}); 

После некоторого тестирования (циклически селекторы 1000 раз, принимая в среднем 9 тестов) я использовал 3 разных селекторов и пришел к выводу о том, что скорость в этом порядке:

1. $(this).children('img') работает быстрее всех - около 400 мс;
2. $('img', this) - avg около 900ms; и
3. $(this).find('img') работает медленнее всего - в среднем около 1000 мс

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

Любые мысли?

Answer 1

Разница между $(this).find('img') и $(this).children('img') является то, что функция children ищет только прямых<img> потомков, в то время как функция find находит любой <img> элемент в любом месте в иерархии DOM ниже $(this). Вот почему children быстрее.

$(this).children('img'):

<h1>       <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Never checked. --> 
    <span>Bla bla</span>  <!-- Never checked. --> 
</h1> 
<a href="#">     <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Never checked. --> 
</a> 
<img alt="" src="..." />  <!-- Is this img? Yeah, return it! --> 

$(this).find('img'):

<h1>       <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Is this img? Yeah, return it! --> 
    <span>Bla bla</span>  <!-- Is this img? Nope! --> 
</h1> 
<a href="#">     <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Is this img? Yeah, return it! --> 
</a> 
<img alt="" src="..." />  <!-- Is this img? Yeah, return it! --> 

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