Plus rapide sélecteur de méthode en jquery et CSS - ID ou pas?

Ce qui est le plus rapide en jquery/javascript?

$('#myID .myClass')

ou

$('.myClass')

Ce qui est le mieux pour l'utiliser en CSS?

#myID .myClass{}

ou

.myClass{}

Je vois maintenant que je l'ai expliqué mieux. Désolé!

Ofceauce ID est plus rapide d'un sélecteur CSS et JavaScript. Mais parfois, vous devez utiliser la classe puisqu'il y a plusieurs sélecteurs.

Dire par exemple que j'ai j'ai de GROS document html. Dans le milieu de la page j'ai:

<div id="myID">

<a class="myClass">link1</a>

<a class="myClass">link1</a>

<a class="myClass">link1</a>

</div>

Si je veux cible de tous les "myClass". Il serait préférable de cibler l'ID avant de cibler les classes? (alors je ne voudrais pas avoir à faire domtravel de l'ensemble du document HTML) Ex.:

Serait-ce:

$('#monid').find('.maclasse')

Être plus rapide que l':

$('.maclasse')

Je suis désolé, mais il devrait être seulement un élément avec un ID spécifique de sorte que la première pourrait être simplement $('#myID') ou suis-je malentendu vous?
Les différents navigateurs ont différents DOM méthodes de sélection utilisées, donc il n'existe pas une seule réponse correcte. Dans les anciens navigateurs, faire $('#myID').find('.myClass') est probablement le plus rapide. Dans les nouveaux navigateurs, j'ai le sentiment que vous ne verrez pas beaucoup de différence, sauf si vous avez un horriblement vaste et complexe de la page.
Merci à tous pour vos commentaires. En fait, j'ai un "horriblement VASTE et complexe de la page". C'est ce qui m'a fait poser la question, mais je ne se soucient des navigateurs modernes.
Selon votre définition de "moderne", les navigateurs modernes allons utiliser le natif querySelectorAll méthode, qui est généralement très rapide. Mais soyez prudent. Grésillement (jQuery sélecteur moteur) ajoute non-standard de sélecteurs qui querySelectorAll ne peut pas tolérer. Donc, si vous utilisez l'un de ces, le contrôle est donné à son propre JavaScript basé sur le moteur, ce qui est beaucoup plus lent. Je pense que de toute façon, $('#myID').find('.myClass') sera très rapide.

OriginalL'auteur Hakan | 2011-05-17

  1. 13

    Mon les tests sur moderne navigateurs suggère que vous devriez aller avec soit,

    $('#id').find('.class') //or
$('.class')

    mais pas,

    $('#id .class')

    Raison en est que tous les navigateurs modernes en œuvre getElementsByClassName résultant dans la quasi-constante de temps des recherches par nom de classe (en supposant une valeur de hachage de la mise en œuvre). Quels sont les navigateurs modernes est une autre question subjective.

    Frais de test vous y êtes arrivé! Je devrais peut-être commencer à l'utiliser en salle de classe. 🙂
    Enfin, une réponse réelle!

    OriginalL'auteur Anurag

  2. 3

    Ils font à peu près la même dans la plupart des navigateurs modernes, puisque les noms de classe sont hachés en interne. La différence est que les anciens navigateurs n'ont pas .getElementsByClassName ou méthode équivalente, de sorte .myClass est analysée à l'interne de jQuery et de CHAQUE élément dans le dom est vu et vérifié pour la classe (ou il utilise XPath lorsque cela est possible).

    Toujours essayer d'utiliser #myID .myClass lorsque cela est possible, car elle permet de jQuery pour sauter directement à #myID et de parcourir à partir de là où nécessaire.

    Qu'arrive-t .myClass les éléments qui existent à l'extérieur de #myID?
    L'OP posté différents sélecteurs, alors, évidemment, il y a différents cas d'utilisation et à chacun d'eux de générer des résultats différents. J'étais en soulignant que la sélection de .myClass est, dans les navigateurs modernes, non plus lent que la sélection #myID .myClass. Si, par exemple, les seuls cas de .myClass sont à l'intérieur de #myID, la sélection de .myClass directement sera effectivement plus rapide dans la plupart des navigateurs. La différence est que dans les navigateurs plus anciens, en sélectionnant .myClass aura littéralement des milliers de fois plus lent, de sorte #myID .myClass est toujours préféré.
    ne pas vous occuper de votre cas avec un simple $('.maclasse'), désolé si je ne suis malentendu votre question. Ou quand vous dites "qu'arrive-t .myClass..." voulez-vous dire, comment est la recherche manipulés comment la performance est? Et je suppose que dans les deux cas (les anciens navigateurs, contre plus jeunes), depuis que vous vous posez à propos de .myClass seul... il aurait encore à parcourir l'arbre en commençant par la racine −► @zyklus: même si les navigateurs modernes ont un .getElementsByClassName() méthode - comment cette méthode est implémentée différemment de sorte que @BoltClock du scénario qui serait différent?
    DiNenno: À l'époque, j'avais posté mon commentaire il n'y a pas de contexte dans la question, de sorte qu'il n'a tout simplement pas de sens de comparer les deux sélecteurs pour la performance comme ils voulaient des choses complètement différentes - l'une correspond à toutes les .myClass et les autres matches, les seuls à l'intérieur de l'ID. Depuis que la question a été modifiée pour donner le contexte de mon commentaire est obsolète.
    ahhh... un sens aujourd'hui. merci de prendre le temps d'expliquer.

    OriginalL'auteur Mark Kahn

  3. 2

    Pensons simplement logiquement à ce sujet pendant une seconde, et prétendre que vous ne savez rien à propos de la façon dont un navigateur est intégré en interne ou comment il accède à la DOM, mais vous assumez que ce qu'il n'est que logique.

    Par conséquent, n'est-ce pas supporter à la raison que de deux sélecteurs, le plus étroit, on retrouve des résultats rapidement?

    Vous avez deux sélecteurs, qui se traduisent à rugueuses de l'anglais comme

    1. N'importe quel élément de la classe myClass qui est un enfant de l'élément avec l'ID de myID
    2. N'importe quel élément de la classe myClass

    Comme pour "Ce qui est le mieux pour l'utiliser en CSS", ce qui est totalement subjective car elle dépend de si vous avez l'intention de cibler tous instances de .myClass ou tout simplement ceux qui sont des enfants de #myID.

    Il ne peut même pas être subjective, il n'a juste aucune logique à décider lequel est le "mieux" que les deux sélecteurs de ne pas prendre le même ensemble d'éléments en premier lieu. Oh, et oui avoir mon upvote, s'il vous plaît, pour le faire.
    Eh bien, c'est ce que je veux dire par "subjective" - c'est pour le jugement individuel sur la base des circonstances
    Ce n'est pas vraiment vrai. Tous les navigateurs, avec un intérieur .getElementsByClassName méthode aura près de performance identique à la sélection sur un code basé sur le fait que les noms de classe sont hachées.
    Je ne suis pas de faire un point sur l'effectif navigateur moderne implémentations d'aujourd'hui, mais plus sur l'utilisation du raisonnement logique pour déduire quelle approche serait la plus rapide. Même si le hachage méthode basée sur les noms de classe est "presque identiques", il ne peut pas être plus rapide que de rechercher un ID unique - il ne peut y correspondre.
    b-en fait .myClass est plus rapide que #myID .myClass, dans certains cas, comme lorsque le seul cas de .myClass sont à l'intérieur de #myID et que vous utilisez un navigateur moderne. Mais je reçois le point de ton post 🙂

    OriginalL'auteur matt b

  4. 2

    Bonne question en fait.

    Dire que vous avez analysé DOM de N éléments de la profondeur max de D et de pr de S nombre de règles. Ensuite, la tâche de trouver des styles pour tous les éléments de calcul de la complexité d'environ O(N*D*S).

    Évidemment pas tous les sélecteurs CSS a le même calcul de la complexité.

    Par exemple li.item sélecteur et li[class ~= "item"] besoin exactement le même PROCESSEUR ressources comme ils sont équivalents. li[class = "item"] peut être calculé plus rapide car elle ne nécessite pas d'analyse des espaces blancs.

    #1 sélecteur ici:

    #myID .myClass{} /* #1 */
.myClass{} /* #2 */

    besoin de plus de ressources CPU que vous devez faire exactement la même quantité de travail que dans le cas n ° 2 de plus, vous devrez numériser parent/enfant de la chaîne (de max d'éléments) pour trouver l'élément avec "myID".

    Qui est tout au sujet de pure sélecteurs CSS.

    En jQuery & amis de la situation peut être un peu différent. Théoriquement moteur jQuery pouvez utiliser document.getElementById() pour minimiser la recherche de jeu (afin de réduire le nombre N) mais ce ne sera pas du match CSS comportement. Voici un exemple: http://jsfiddle.net/dnsUF/ . Ici, jQuery rapports d'un élément à #foo mais il y a deux de ces éléments, en fait.

    Résumé:

    • En CSS le cas n ° 2 est plus rapide
    • JQuery dans le cas n ° 1 peut être plus rapide (mais techniquement peut ne pas être correcte, en CSS sens).

    Voici mon article sur le sélecteur CSS de la complexité:
    http://www.terrainformatica.com/2008/07/csss-and-computational-complexity-of-selectors/
    Et celui-ci de la façon de l'améliorer en utilisant le style de jeux:
    http://www.terrainformatica.com/2010/09/style-sets-in-h-smile-core/

    Juste pour clarifier: Ce que vous dites, c'est que n ° 1 est plus rapide dans le CSS, mais nécessite plus de ressources CPU de l'ordinateur?
    +1; bonne réponse, mais votre analyse de la complexité semble douteux: vous pouvez presque certainement une smart discbased pour rechercher le style approprié des règles plus rapidement que par l'analyse linéaire; et, de même, il est fort probable que vous n'avez pas besoin de numériser l'ensemble de la profondeur de l'arbre (les résultats intermédiaires pourraient être mis en cache et partagé entre un nœud recherches). Et puis, bien sûr, le temps prévu serait encore plus faible depuis pathologique sélecteurs qui nécessite une mère de numérisation sont probablement rares. De même, j'attends de nom de classe d'espaces de fractionnement est mis en cache, et ne se produit pas au cours de sélecteur d'évaluation.
    Nerbonne: sélecteurs CSS travailler dans différents environnement comme des sélecteurs jQuery. Pour le HTML/CSS vous sont donnés à N éléments du DOM et de règles. Pour tout élément du DOM vous devez analyser tous les sélecteurs de la spécificité afin de vérifier si l'un d'entre eux sera à la hauteur. Et si "oui", le style sera combiné avec ce que vous avez pour le moment. Vous pouvez faire quelques optimisations ici, mais pas tant que ça - en tout cas, il est O(N*S*D) initiale DOM état.
    Je vois l'implémentation naïve vous êtes inférer ici - et si c'est comment mettre en œuvre le style correspondant, bien sûr, vous avez besoin de O(NDS). Mais il n'est pas clair vous avez réellement besoin d'utiliser cet algorithme. Vous prétraiter les règles de style à faire l'appariement plus efficace, par exemple en faisant des indices pour des choses comme les noms de classe et les noms d'éléments. Et si vous rencontrez des deux règles commencent avec la même clé de recherche... fusionner les règles dans votre prétraitement et l'utilisation d'un TRIE comme structure. Il n'est pas clair du tout que vous avez besoin de numériser des règles de style tout lors de l'adaptation; vous pourriez bien être en mesure d'utiliser une recherche-arbre.

    OriginalL'auteur c-smile

  5. 1

    Id sera toujours le moyen le plus rapide pour accéder à un élément, car ils sont uniques.

    Assez optimiste, je dirais. Que faire si ils ne sont pas uniques? Tous les navigateurs prennent en charge plusieurs éléments ayant le même ID. Ici, c'est de tester pour vous: jsfiddle.net/Fu4At
    Juste parce que vous pouvez le faire ne signifie pas que vous devriez.
    J'ai vu cela se produire dans l'action 🙂 Tout à fait une tête bang
    l'unicité des Identifiants est une recommandation pour les auteurs.
    Les id sont uniques de par leur définition. La réutilisation d'un ID n'est pas seulement une mauvaise pratique, il est aussi irréaliste que le navigateur sera toujours sélectionner le premier élément avec l'ID.

    OriginalL'auteur rjb

  6. 1

    Ouais, id est l'une des méthode la plus rapide pour accéder à l'élément. Check it out ce test http://mootools.net/slickspeed/.

    OriginalL'auteur bjornd

  7. 1

    #myID .myClass est certainement une meilleure façon d'accéder à l'élément en supposant que vous avez de nombreux éléments qui la .myClass est appliquée.

    OriginalL'auteur BinomialD

  8. 0

    Mise à jour - 2015 - enregistrez-vous ici

    https://jsperf.com/id-vs-class-vs-tag-selectors/2

    TL;DR;

    À l'aide de l'ID $("#foo") est presque 4x plus rapide que les CSS $(".bar") sur mon chrome 41 sur linux 64bits

    OriginalL'auteur mrbarletta