Pourquoi est-jQuery $(“td:eq(0)”) plus lent que $(“td”).eq(0)

Je suis à l'aide de jQuery 1.7.1 et j'essaie de trouver pourquoi le code suivant 4600 MS, si je change le :eq(0) à :first c'est le même résultat.

$("tr:eq(0) td"); //x10000 takes 4600ms
$("tr").eq(0).find("td"); //x10000 takes 470ms

La deuxième codes est près de 10 fois plus vite! Et c'est seulement écrit différemment.

Aussi si j'utilise un sélecteur souhaitez, il vous suffit de sélectionner un ID ou à la recherche au sein d'un nœud:

someparent.find("#test") //x10000 takes 500ms
$("#test") //x10000 takes 100ms
$("div#test") //x10000 takes 470ms

Je dirais, si je passe un div#test serait plus rapide que #test mais il est 5 fois plus lent. Pourquoi?

J'ai fait toutes les courses une couple de fois et il est vrai lent si je fais la même chose de différent.

Pourquoi utiliser le sélecteur plus lent à l'aide de fonctions?

Quel navigateur et la version?
Firefox 8.0, je suis actuellement à l'aide, mais j'attends qu'il prend plus de temps dans tous les navigateurs.

OriginalL'auteur Niels | 2011-12-06

  1. 18

    Réponse droit de la bouche du cheval:

    Remarques Supplémentaires:

    Parce que :eq() est une extension jQuery et ne fait pas partie de la spécification CSS, requêtes à l'aide de :eq()
    ne peut pas tirer profit de l'augmentation des performances fournies par les natifs de DOM querySelectorAll()
    la méthode. Pour de meilleures performances dans les navigateurs modernes, l'utilisation
    $("your-pure-css-selector").eq(index) à la place.

    Je dois ajouter que ledit querySelectorAll API est pris en charge dans tous les navigateurs modernes, de sorte qu'il peut être "sans discernement", utilisé comme un remplacement pour getElementById etc.

    Donc la raison pour laquelle :first-child est rapide, c'est parce que c'est un sélecteur CSS 3? J'ai donc besoin d'utiliser :first-child ou de séparation de mes requêtes.
    La première partie est clair, mais pourquoi la recherche de l'ID de plus si j'ai défini un parent? J'ai pensé que si je lui donne un parent, il n'a pas à faire une boucle par tous les nœuds.
    n'est pas le même que :eq(0).
    Parce que c'est un sélecteur de CSS3 qui est également pris en charge par les navigateurs -- si jQuery ont été forcés de s'en inspirer sur certains navigateur, le résultat serait différent. Comme pour le sélecteur d'id w/ parent ou pas: probablement parce que sans un parent, jQuery alimente directement à getElementById ou équivalent, alors que, avec un parent, il doit marcher aussi le DOM pour s'assurer que l'élément avec l'id en fait le parent spécifié.
    Sous le capot, les différentes API native méthodes seront utilisées. La première utilisation querySelectorAll, et le second, je pense que les utilisations getElementById suivie par getElementsByTagName, à la fois de ce qui sera généralement extrêmement rapide, et généralement plus rapide que querySelectorAll, qui est une méthode plus complexe, et n'a pas autant d'années de peaufinage derrière elle.

    OriginalL'auteur Jon

  2. 6

    jQuery est construit au large de la Le grésillement de la bibliothèque. Grésillement prend avantage de navigateur natif appels dans la mesure du possible.

    'tr' est valable un sélecteur pour querySelectorAll qui fonctionne très rapidement. Une fois la liste de 'tr' éléments est acquis, .eq() tout simplement un index de recherche qui est très rapide.

    'tr:eq(0)' n'est pas valide d'un sélecteur, il a pour itérer sur chaque élément dans le DOM.

    Cette divergence dans l'analyse comparative est noté dans le jQuery docs pour :eq():

    Parce que :eq() est une extension jQuery et ne fait pas partie de la spécification CSS, requêtes à l'aide de :eq() ne peuvent pas tirer parti de l'augmentation des performances fournies par les natifs de DOM querySelectorAll() méthode. Pour de meilleures performances dans les navigateurs modernes, l'utilisation $("your-pure-css-selector").eq(index) à la place.

    OriginalL'auteur zzzzBov

  3. 1

    jQuery n'a pas besoin de diviser la chaîne d'entrée en fonctions et de convertir cette séquence de fonctions de chaînes de caractères dans les appels de méthode.

    OriginalL'auteur Rich O'Kelly

  4. 0

    Je ne sais pas exactement pourquoi, mais j'ai un problème similaire dans une autre langue, et il dépend de la fonction elle-même:

    $("tr:eq(0) td"); doit être analysée au travail, et puis faire l'appel de la fonction.

    $("tr").eq(0).find("td"); seulement l'appel de la fonction

    OriginalL'auteur Marco Pace