Que sont les enfants les plus rapides () ou find () dans jQuery?

Question

Pour sélectionner un nœud enfant dans jQuery, vous pouvez utiliser enfants () mais également find ().

Par exemple:

$ (this) .children ('. foo');

donne le même résultat que:

$ (this) .find ('. toto');

Maintenant, quelle option est la plus rapide ou préférée et pourquoi?

Answer 1

enfants () ne regarde que les enfants immédiats du noeud, alors que find () parcourt l'intégralité du DOM situé sous le nœud, donc children () devrait être plus rapide compte tenu des implémentations équivalentes. Cependant, find () utilise des méthodes de navigateur natives , tandis que enfants () utilise JavaScript interprété dans le navigateur. Dans mes expériences, il n'y a pas beaucoup de différence de performance dans les cas typiques.

La méthode à utiliser dépend de la prise en compte des descendants immédiats ou de tous les nœuds situés au-dessous de celui-ci dans le DOM, c’est-à-dire que vous choisissez la méthode appropriée en fonction des résultats que vous souhaitez, et non de sa vitesse. Si les performances sont vraiment un problème, alors expérimentez pour trouver la meilleure solution et utilisez-la (ou consultez certaines des références dans les autres réponses ici).

Answer 2

Ce test jsPerf suggère que find () est plus rapide. J'ai créé un test plus approfondi , et il semble toujours que find () surpasse enfants ().

Mise à jour: Conformément au commentaire de tvanfosson, j'ai créé un autre test. cas avec 16 niveaux d’imbrication. find () est plus lent lorsque vous trouvez tous les div possibles, mais find () surpasse toujours les enfants () lors de la sélection du premier niveau de div.

children () commence à surperformer find () quand il y a plus de 100 niveaux d'imbrication et environ 4000+ divs à parcourir par find (). C'est un test élémentaire rudimentaire, mais je pense toujours que find () est plus rapide que enfants () dans la plupart des cas.

J'ai parcouru le code jQuery dans les outils de développement Chrome et constaté que children () appelle en interne des appels à sibling (), filter () et utilise quelques expressions plus régulières que find ().

find () et children () répondent à des besoins différents, mais dans les cas où find () et children () produiraient le même résultat, je recommanderais d'utiliser find ().

Answer 3

Voici un lien contenant un test de performance que vous pouvez exécuter. find () est en réalité environ 2 fois plus rapide que enfants () .

Answer 4

Ceux-ci ne donneront pas nécessairement le même résultat: find () vous obtiendrez tous les nœuds descendants , alors que enfants () obtiendra uniquement les enfants immédiats qui correspondent.

À un moment donné, find () était beaucoup plus lent, car il devait rechercher tous les nœuds descendants susceptibles de correspondre, et pas seulement les enfants immédiats. Cependant, ce n'est plus vrai; find () est beaucoup plus rapide grâce à l'utilisation de méthodes de navigateur natives.

Answer 5

Aucune autre réponse ne concerne le cas d'utilisation de .children () ou de .find (">") à uniquement recherche des enfants immédiats d'un élément parent. J'ai donc créé un test jsPerf à découvrir , en utilisant trois façons différentes de distinguer les enfants.

En l'occurrence, même lorsque vous utilisez le supplément "> "" sélecteur, .find () est toujours un lot plus rapide que .children () ; sur mon système, 10x donc.

Donc, de mon point de vue, il ne semble pas y avoir beaucoup de raisons d’utiliser le mécanisme de filtrage de .children () .

Answer 6

  

Les méthodes find () et enfants () sont utilisées pour filtrer l'enfant des éléments correspondants, sauf que la première passe de niveau inférieur à l'autre, la dernière de parcours un seul niveau vers le bas.

Pour simplifier:

1. find () - recherchez dans l'enfant, le petit-fils, l'arrière-petit-enfant des éléments correspondants ... à tous les niveaux.
2. enfants () - recherchez uniquement dans l’enfant des éléments correspondants (niveau inférieur).