La sélection par identifiant uniquement (ou un seul identifiant) est-elle plus rapide que lors de l'ajout d'identifiants supplémentaires?Vitesse du sélecteur jQuery
Par exemple
$('#element')
vs
$('#container #element')
ou encore plus précis:
$('body div#container div#element')
?
$('#element') devrait être le plus rapide, suivi de $('div'). Ceux-ci correspondent aux fonctions natives document.getElementById et document.getElementsByTagName. Tout ce qui est plus complexe doit passer par des scripts complexes et la recherche de documents.
Sur tout sauf IE6, 7 et 8, $('.class') également correspondre à la nouvelle fonction document.getElementsByClassName, mais c'est plus lent que les deux autres et doit encore passer par Sizzle si le navigateur ne le supporte pas.
et si vous avez déjà un objet jQuery et faites un .find ('# élément')? Les ID doivent être uniques, donc cela ne devrait pas vraiment importer mais j'utilise le backbone et je n'utilise pas plutôt jQuery global au lieu de jQuery lié à la vue (qui utilise .find()) –
Oui, la sélection par ID uniquement doit être la plus rapide, car jQuery (ou Sizzle) peut directement utiliser getElementById. Sinon, le reste du sélecteur doit également être évalué, de droite à gauche.
Vous devriez toujours essayer d'utiliser le moins de sélecteurs possible pour identifier correctement les éléments que vous souhaitez traiter. Par exemple, si element est un identifiant unique (comme il se doit), alors #element le spécifiera de manière unique et tout le reste sera inutile, à la fois dans l'analyse et le traitement des frais généraux. (Cela va également pour les règles de style CSS, bien sûr, bien que dans ce cas, le choix optimal des sélecteurs peut être différent lorsque vous utilisez jQuery.)
En fait, appellent
document.getElementById("element");
est le plus rapide.
Si vous voulez vraiment un objet jQuery puis appelez $(document.getElementById("element"));
@john_doe: Pas exactement, au moins le troisième [obtiendra tous les éléments 'div' puis filtrer ceux avec ID' element' ] (http://jsfiddle.net/dFC4k/1/). Et même dans le second cas [jQuery fait un test si '# element' est descendant de' # container'] (http://jsfiddle.net/dFC4k/). –
@FelixKling: Puis j'ai mal lu un article (je ne trouve pas ...) et j'ai mal interprété un commentaire dans la source Sizzle '// Prends un raccourci et mets le contexte si le sélecteur racine est un ID // (mais pas si ce sera plus rapide si le sélecteur interne est un ID) '- merci pour la clarification – Andreas