Il s'agit davantage d'une question de curiosité. Quand vous faites ce qui suit:Performances jQuery lors de la sélection de plusieurs éléments
$('.selector1, .selector2').doSomething()
Est-ce que jQuery traversent complètement les DOM deux fois pour chaque ensemble d'objets correspondant à chaque sélecteur ou est-il de trouver tous les éléments dans un traversal du DOM?
Je pense qu'il utilise les fonctions de navigateur natif pour trouver ce, en utilisant:
document.getElementsByClassName()
Cela dépend vraiment du navigateur. Dans les nouveaux navigateurs, il utilisera document.querySelectorAll pour toutes les requêtes DOM (sous le capot, cela appelle document.getElementsByClassName pour les classes). Dans les navigateurs plus anciens qui ne supportent pas cela, il doit le faire seul, ce qui sera évidemment plus lent.
En général, vous devriez préférer trouver les choses par id d'abord (ou au moins affiner la portée). Les noms de classe et d'étiquette seraient les prochains pour la vitesse. Fondamentalement, les opérations DOM supportées nativement sont les meilleures.
Il semble que dans la plupart des cas, il va traverser le DOM chaque fois pour chaque sélecteur. Bien que la façon dont il traverse le DOM diffère selon le type de sélecteur (élément par rapport à l'ID par rapport à la classe)? –
Oui, il utilisera une regex pour diviser toutes vos requêtes et les exécuter une à la fois. Cependant, je ne m'inquiéterais pas des performances pour les classes ou les ID. –
Je ne le pense pas car de ce que nous avons vu dans le noyau, les correspondances sont effectuées avec regex sur différentes propriétés de noeud (nodeName, NodeType, id, etc.) Donc un seul sélecteur produit une itération du DOM. Cependant, je ne suis pas 100% positif sur ceci donc je m'en remettrai aux autres plus familiers avec les internes :-) – prodigitalson
réellement l'exemple est mauvais parce que le '' noeud n'existe pas en HTML :) –
Je pense que ce que vous voulez faire est recherchez le moteur de sélection, Sizzle, dont vous pouvez consulter le code source: http://github.com/jeresig/sizzle/ http://github.com/jeresig/sizzle/blob/master/sizzle.js – artlung