Performance des sélecteurs jQuery

Question

Je sais que je ne fais que des TOC sur une durée de quelques millisecondes, mais je me demandais pourquoi ce qui suit est vrai pour moi. Cela semble aller à l'encontre de ma logique.

J'ai actuellement un div qui a disparaît l'image dans le vol stationnaire:

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

Après quelques essais, (boucle à travers sélecteurs 1000 fois, la moyenne des 9 essais) Je l'ai utilisé 3 sélecteurs différents et a conclu que la vitesse est dans cet ordre:

1. $(this).children('img') court le plus rapide -avg environ 400ms;
2. $('img', this) - moyenne d'environ 900ms; et
3. $(this).find('img') court le plus lent - Avg sur les 1000ms

Cela va à l'encontre de la logique que d'avoir deux appels de fonction serait plus lent que l'un. De plus, j'ai lu qu'en interne, jQuery convertit le second cas en troisième cas, le troisième cas serait-il plus lent?

Des pensées?

Answer 1

La différence entre $(this).find('img') et $(this).children('img') est que la fonction children ne recherche que les descendants directs<img>, tandis que la fonction find trouve tout élément <img> partout dans la hiérarchie DOM ci-dessous $(this). C'est pourquoi children est plus rapide.

$(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! --> 

Comme vous pouvez le voir, il y a trois éléments qui ne seront pas vérifiés lors de l'utilisation children, augmentant ainsi la performance.