sélecteurs CSS efficaces et inefficaces (selon Google, PageSpeed ??...)

Question

Tout en essayant de réduire la taille de HTML d'une page Web, je suis venu à travers des suggestions par Google et le PageSpeed ??Firefox Add-On efficacité regading des sélecteurs CSS qui (presque) m'a fait reconsidérer les changements:

http: // code. google.com/intl/de-DE/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Plus précisément, les sélecteurs descendants sont parfaits pour la sélection d'un bloc entier (par exemple DIV) en utilisant un ID ou un attribut CLASS puis garder tous ses éléments enfants gratuitement des attributs CLASS / ID. Mais si l'ordre de Traversal pour l'application des règles est tel que décrit par Google, ils ne doivent pas être utilisés:

  

sélecteurs sont inefficaces parce que descendants, pour chaque élément correspondant à la clé, le navigateur doit parcourir l'arbre DOM, l'évaluation de chaque élément ancêtre jusqu'à ce qu'il trouve une correspondance ou atteint l'élément racine. Moins spécifique la clé, plus le nombre de noeuds qui doivent être évalués.

Je doute fort que les navigateurs utilisent un tel ordre inefficace des traversal, sûrement ils ne traitera sous-arbres d'éléments qui correspondent à la composante de sélection de haut, à savoir en #foo span {...} que des éléments ci-dessous #foo doit être vérifiée et non chaque travée. Quelqu'un peut-il qui a regardé confirmation récente de code du navigateur / nier?

La deuxième suggestion est discutable sur les sélecteurs trop qualifiés:

  

sélecteurs d'ID sont uniques par définition. Y compris qualificatifs de balise ou de classe ajoute simplement des informations redondantes qui doivent être évalués inutilement.

Si sélecteurs d'ID sont uniques par définition, pourquoi les navigateurs doivent vérifier les informations redondantes? Je sais qu'ils le font parce que, par exemple,

  

div # foo {color: black; }    #foo {color: white; }

le texte sera noir dans un <div id=foo>, mais a) il ne doit pas être fait (? Référence W3C nécessaire) et b) Je ne vois pas pourquoi il serait nettement plus lent quand il résulte d'un simple O (1) vérifier le nom de l'étiquette de l'élément.

Quelqu'un peut-il en bons termes avec le code source de navigateurs modernes à faire la lumière sur ces allégations? Étant donné que la plupart des sites modernes utilisent des sélecteurs descendants (y compris SO) et ils ont des avantages évidents, je serais très semblable à les utiliser ...

Modifier:

Je l'ai expérimenté un peu avec les pages générées et il semble que les navigateurs traitement des sélecteurs descendants est en effet pitoyable:

Une page consistant en (en abrégé):

  

#top un {text-decoration: none;}

     

# foo1 a.foo {color: red;}

     

# foo2 a.foo {color: red;}

     

[... répété 10000 fois]

     

     

... [emboîtés 50 fois] bla

[...]

     

[ligne précédente répété 10000 fois]

(10000 essentiellement lignes avec 50 divs imbriqués chacun de traverser jusqu'à ce que le noeud racine et une sélection qui correspond de 10000)

charges et rend (le temps jusqu'à ce que se exécute window.onload()) en 2,2 secondes en utilisant Safari 5 et un peu moins de 10 secondes avec Firefox 3.6.10.

Lorsque le sélecteur de classe .foo est retiré des règles de non-application, la page prend environ 200 secondes avec Safari 5 et 96 secondes avec Firefox 3.6.10. Cela illustre à quel point les sélecteurs descendants sont mis en œuvre (dans ce cas, chacun des 10000 règles aboutirait probablement à une traversal jusqu'à #top, où la règle échoue).

Comment faire fare sélecteurs enfants? #foo > span > div > div > div > div > div a {color: red;} (correspond également à jamais mais les forces de 6 noeuds Traversal parent) prend 27 secondes avec Safari 5 et 31 secondes avec Firefox 3.6.10.

Conclusion

Descendant et sélecteurs de l'enfant à la fois sucent actuellement sur les principaux navigateurs. Il est toujours préférable d'ajouter des attributs de classe laid / id à tous vos balises de stylesi vous vous souciez de vitesse, au moins pour les balises HTML très courantes (comme un, img, div, etc.).

Answer 1

Jetez un coup d'œil à cet article récent de Jonathan Snook: http://snook.ca / Archives / html_and_css / css-parent-sélecteurs

Vous verrez comment les navigateurs évaluent les expressions et le raisonnement derrière la raison pour laquelle certains sélecteurs sont inefficaces.

Une citation pertinente du message:

  

CSS s'évalué de droite à gauche.

     

Pour déterminer si une règle CSS   applique à un élément particulier,   commence à partir de la droite de la règle et   fonctionne ainsi de gauche il.

     

Si vous avez une règle comme corps   div # contenu p {color: # 003366; } puis   pour chaque élément comme il se rend   à la page-première se demander si physique, fera c'est un   élément de paragraphe. Si elle est, ça va   travailler son chemin le DOM et demander si   c'est un div avec un ID de contenu. Si   il trouve ce qu'il cherche, il va   continuer son chemin jusqu'à la DOM jusqu'à   atteint le corps.

     

En travaillant de droite à gauche, le navigateur   peut déterminer si une règle applique   à cet élément particulier qu'il est   en essayant de peindre à la fenêtre beaucoup   plus rapide. Pour déterminer quelle règle est   plus ou moins performant, vous devez   savoir combien de nœuds doivent être   évalué pour déterminer si un style   peut être appliqué à un élément.