Que sont les enfants les plus rapides () ou find () dans jQuery?
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('.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, alors que find() parcourt la totalité du DOM situé sous le nœud, donc children() devrait soit plus rapide avec des implémentations équivalentes. Cependant, find() utilise des méthodes de navigateur natives , alors que children() utilise le JavaScript interprété dans le navigateur. Dans mes expériences, il n'y a pas beaucoup de différence de performance dans des cas typiques.
Le choix dépend du fait que vous souhaitiez uniquement prendre en compte les descendants immédiats ou tous les nœuds situés au-dessous de celui-ci dans le DOM, c.-à-d. Choisissez 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, alors expérimentez pour trouver la meilleure solution et utilisez-la (ou consultez certains des points de repère dans les autres réponses ici).
Ceci test de 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éé n autre cas de test avec 16 niveaux d'imbrication. find () n'est que plus lent pour trouver tous les div possibles, mais find () surpasse toujours l'enfant () 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 (). C'est un test élémentaire 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 ai remarqué que children () appelle en interne des appels à sibling (), filter (), et utilise un peu plus de regex 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 n lien qui comporte un test de performance que vous pouvez exécuter. find() est en réalité 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 que children() ne vous obtiendra que 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 en raison de l'utilisation de méthodes de navigateur natives.
Aucune des autres réponses ne traitait du cas d'utilisation de .children() ou .find(">") dans uniquement pour rechercher des enfants immédiats d'un élément parent . J'ai donc créé un test de jsPerf à découvrir , en utilisant trois manières différentes de distinguer les enfants.
Même si vous utilisez le sélecteur supplémentaire ">", .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().
Les méthodes
find()etchildren()sont utilisées pour filtrer l'enfant des éléments correspondants, sauf que la première descend de n'importe quel niveau, la dernière d'un niveau.
Pour simplifier:
find()- recherche dans l’enfant, le petit-fils, l’arrière-petit-enfant de l’élément mis en correspondance ... à tous les niveaux.children()- recherche uniquement dans l’enfant des éléments correspondants (niveau inférieur).