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

Pour sélectionner un nœud enfant dans jQuery, on peut utiliser children () mais aussi find ().

Par exemple:

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

donne le même résultat que:

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

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

children()ne regarde que les enfants immédiats du nœud, tout en find()parcourant tout le DOM 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 , tout en children()utilisant JavaScript interprété dans le navigateur. Dans mes expériences, il n'y a pas beaucoup de différence de performances dans les cas typiques.

La méthode à utiliser dépend de si vous souhaitez uniquement prendre en compte les descendants immédiats ou tous les nœuds inférieurs à celui-ci dans le DOM, c'est-à-dire choisir la méthode appropriée en fonction des résultats que vous souhaitez, et non de la vitesse de la méthode. Si les performances sont vraiment un problème, essayez de trouver la meilleure solution et utilisez-la (ou consultez certains des benchmarks dans les autres réponses ici).

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

Mise à jour: selon le commentaire de tvanfosson, j'ai créé un autre cas de test avec 16 niveaux d'imbrication. find () n'est plus lent que lors de la recherche de tous les divs possibles, mais find () surpasse toujours les enfants () lors de la sélection du premier niveau de divs.

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

J'ai parcouru le code jQuery dans Chrome Developer Tools et j'ai remarqué que children () appelle en interne sibling (), filter () et passe par quelques regex plus 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 ().

Voici un lien contenant un test de performances que vous pouvez exécuter. find()est en fait environ 2 fois plus rapide que children().

Ceux-ci ne donneront pas nécessairement le même résultat: find()vous obtiendrez n'importe quel nœud descendant , alors children()que vous ne recevrez que des enfants immédiats qui correspondent.

À un moment donné, cela a find()été beaucoup plus lent car il a dû rechercher tous les nœuds descendants pouvant 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 navigation natives.

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

En fait, même lorsque vous utilisez le sélecteur supplémentaire ">", il .find()est encore beaucoup 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 .children().

Les deux méthodes find()et children()sont utilisées pour filtrer l'enfant des éléments correspondants, sauf que le premier descend d'un niveau, le second descend d'un seul niveau.

Pour simplifier:

1. find() - recherchez l'enfant, le petit-enfant, l'arrière-petit-enfant des éléments appariés ... tous les niveaux plus bas.
2. children() - recherche dans l'enfant des éléments correspondants uniquement (niveau inférieur).