Quelle est la méthode la plus rapide pour sélectionner des éléments descendants dans jQuery?

Autant que je sache, il existe un certain nombre de façons de sélectionner des éléments enfants dans jQuery .

//Store parent in a variable var $parent = $("#parent"); 

Méthode 1 (en utilisant une étendue)

 $(".child", $parent).show(); 

Méthode 2 (la méthode find ())

 $parent.find(".child").show(); 

Méthode 3 (pour enfants immédiats uniquement)

 $parent.children(".child").show(); 

Méthode 4 (via le sélecteur CSS) – proposée par @spinon

 $("#parent > .child").show(); 

Méthode 5 (identique à la méthode 2 ) – selon @Kai

 $("#parent .child").show(); 

Je ne suis pas familier avec le profilage pour pouvoir enquêter seul, alors j’aimerais bien voir ce que vous avez à dire.

PS Je comprends que c’est une duplication possible de cette question mais elle ne couvre pas toutes les méthodes.

La méthode 1 et la méthode 2 sont identiques, la seule différence étant que la méthode 1 doit parsingr la scope passée et la traduire en un appel à $parent.find(".child").show(); .

La méthode 4 et la méthode 5 doivent toutes deux parsingr le sélecteur, puis appeler simplement $('#parent').children().filter('.child') et $('#parent').filter('.child') respectivement.

La méthode 3 sera donc toujours la plus rapide car elle nécessite le moins de travail possible et utilise la méthode la plus directe pour obtenir des enfants de premier niveau.

Basé sur les tests de vitesse révisés d’Anurag ici: http://jsfiddle.net/QLV9y/1/

Test de vitesse: (Plus c’est mieux)

Sur Chrome , la méthode 3 est la meilleure puis la méthode 1/2 puis 4/5

alt text http://tinyurl.com/2clyrbz

Sur Firefox , la méthode 3 est toujours la meilleure puis la méthode 1/2 puis 4/5

alt text http://tinyurl.com/2e89tp5

Sur Opera , la méthode 3 est toujours la meilleure puis la méthode 4/5 puis 1/2

alt text http://tinyurl.com/2a9r9r8

Sur IE 8 , bien que plus lent que les autres navigateurs, il suit toujours la méthode 3, 1,2,4,5.

alt text http://tinyurl.com/2a8ag59

Globalement, la méthode 3 est la meilleure méthode à utiliser car elle est appelée directement et elle n’a pas besoin de parcourir plus d’un niveau d’éléments enfant contrairement à la méthode 1/2 et il n’est pas nécessaire de l’parsingr comme la méthode 4/5

Cependant, gardez à l’esprit que dans certains de ces cas, nous comparons des pommes à des oranges, car la méthode 5 examine tous les enfants au lieu de ceux de premier niveau.

Méthode 1

Ne peut pas être plus court et plus rapide en utilisant jQuery. Cet appel passe directement à $(context).find(selector) ( méthode 2 , en raison de l’optimisation) qui à son tour appelle getElementById .

Méthode 2

Fait la même chose, mais sans quelques appels de fonctions internes inutiles.

Méthode 3

using children() est plus rapide qu’utiliser find() , mais naturellement, children() ne trouvera que des enfants directs de l’élément root alors que find() recherchera récursivement tous les enfants (y compris les sous-éléments enfants)

Méthode 4

Utiliser des sélecteurs comme celui-ci doit être plus lent. Comme sizzle (qui est le moteur de sélection de jQuery) fonctionne de droite à gauche , il correspondra à TOUTES les classes .child avant qu’il ne soit considéré comme un enfant direct de l’ID «parent».

Méthode 5

Comme vous l’avez dit correctement, cet appel créera également un appel $(context).find(selector) , en raison d’une optimisation de la fonction jQuery , sinon il pourrait également passer par le sizzle engine (plus lent).

Comme c’est un ancien message, et les choses changent avec le temps. J’ai fait des tests sur les dernières versions du navigateur jusqu’à présent, et je les publie ici pour éviter les malentendus.

En utilisant jQuery 2.1 sur les navigateurs compatibles HTML5 et CSS3, les performances changent.

Voici le scénario de test et les résultats:

 function doTest(selectorCallback) { var iterations = 100000; // Record the starting time, in UTC milliseconds. var start = new Date().getTime(); for (var i = 0; i < iterations; i++) { // Execute the selector. The result does not need to be used or assigned selectorCallback(); } // Determine how many milliseconds elapsed and return return new Date().getTime() - start; } function start() { jQuery('#stats').html('Testing...'); var results = ''; results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms"; results += "
$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms"; results += "
$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms"; results += "
$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms"; $parent = jQuery('#parent'); results += "
$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms"; jQuery('#stats').html(results); }
      HTML5 test