J'avoue que je ne pense pas souvent à cette question... Quelle est l'efficacité du CSS que nous écrivons et quelle est la vitesse de rendu du navigateur ?
C’est ce dont les développeurs de navigateurs devraient se préoccuper (les pages se chargent plus rapidement et les utilisateurs seront plus satisfaits). Mozilla a un article : sur les meilleures pratiques . Bien sûr, Google est également très préoccupé par ce problème, et ils ont également un article du type : Optimiser le rendu du navigateur .
Jetons un coup d’œil à ce qu’ils préconisent principalement, puis discutons de leur aspect pratique.
de droite à gauche
Un principe important dans la manière dont les navigateurs lisent vos sélecteurs CSS est qu'ils les lisent de droite à gauche. Cela signifie que pour un sélecteur comme ul > li a[title="home"], a[title="home"] sera lu en premier. Cette partie est généralement appelée "sélecteur clé" (peut-on l'appeler "sélecteur cible" -_- !) La dernière partie du sélecteur est également l'étiquette sélectionnée.
Les ID sont les plus efficaces, les universels sont les plus lents
Il existe quatre sélecteurs de cible : ID, classe, balise et caractère universel. Jetons un coup d'œil à leurs efficacités respectives :
#main-navigation { } /* ID (le plus rapide) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Classe */
ul li a.current { } /* Classe *
ul { } /* Balise */
ul li a { } /* Balise */
* { } /* Universel (le plus lent) */
#content [title='home'] /* Universel */ Ensuite on combine les notions de sélecteurs de droite à gauche et de cible, et on peut savoir que le sélecteur suivant n'est pas efficace :
#main-nav > li { } /* Cela semble rapide mais est en fait très lent*/
Bien que cela soit un peu déroutant... comme les identifiants sont les plus efficaces, les navigateurs peuvent rapidement trouver li grâce aux identifiants. Mais le fait est que la balise li est lue en premier.
Ne le modifiez pas avec des balises
Ne fais pas ça jusqu'à ta mort :
ul#main-navigation { }
Les identifiants sont uniques et n'ont donc pas besoin d'être décorés de balises, ce qui les rend simplement moins efficaces.
Ne l'utilisez pas pour modifier des classes si vous pouvez l'éviter. la classe n'est pas unique, donc en théorie vous pouvez l'utiliser dans différentes balises. Si vous le souhaitez, vous pouvez utiliser des balises pour contrôler différents styles, vous aurez donc peut-être besoin de modifications de balises (par exemple : li.first), mais peu de gens le font, alors ne le faites pas.
Il n'y a absolument rien de pire que d'utiliser un sélecteur descendant
David Hyatt :
Le sélecteur descendant est le sélecteur le plus cher en CSS, et son prix est prohibitif, surtout lorsqu'il est placé après les balises et les universels.
Tout comme les trucs suivants, c’est un cancer absolu de l’efficacité :
corps HTML ul li a { }
Il est plus efficace qu'un sélecteur ne parvienne pas à être rendu plutôt que d'être rendu.
Je ne sais pas s'il existe de meilleures preuves de cela, car si vous avez beaucoup de sélecteurs introuvables dans une feuille de style CSS, cela peut sembler bizarre, mais il est important de noter que de droite à gauche Pour paraphraser un sélecteur , une fois qu'il ne le trouve pas, il arrête d'essayer. Cependant, si on le trouve, il faudra plus d’efforts pour l’expliquer.
Pensez simplement à la raison pour laquelle vous écrivez le sélecteur comme ceci
Pensez-y :
#main-navigation li a { font-family: Géorgie, Serif }
Vous n'avez probablement pas besoin de commencer avec un sélecteur (si vous souhaitez simplement modifier la police). Cela pourrait être plus efficace :
#main-navigation { famille de polices : Géorgie, Serif }
Praticité
Vous avez également gravé l'article de Mozilla mentionné plus haut ? Cela fait dix ans. Le fait est que les ordinateurs sont plus lents qu’il y a dix ans (ce n’est pas que j’ai mal compris, ni que l’auteur veuille dire que le WEB actuel devient de plus en plus complexe). J’ai l’impression que ce genre de choses semblait être pris plus au sérieux à l’époque. Il y a dix ans, j’étais un beau garçon de 21 ans. Bien sûr, je ne pensais pas y connaître quoi que ce soit en CSS. Je ne peux donc pas vous parler de la situation précédente... mais je pense que la raison pour laquelle la question de l'efficacité du rendu n'a pas été prise au sérieux est qu'elle n'a jamais été un gros problème.
Voici quelques-unes de mes opinions : Quoi qu'il en soit, les éléments mentionnés ci-dessus ont du sens, et vous pouvez le faire selon la méthode ci-dessus, car cela ne limite pas votre production CSS. Mais il ne faut pas être trop dogmatique. Si vous êtes perfectionniste et que vous n’avez jamais pensé à cela auparavant, il est temps de réexaminer certains des styles que vous avez écrits auparavant pour voir s’il y a place à amélioration. Si vous ne constatez pas que le rendu de votre site Web est manifestement lent, n'y prêtez pas trop d'attention. Accordez-y simplement plus d'attention dans vos travaux futurs.
Super rapide et zéro praticité
Nous savons que les identifiants sont les sélecteurs les plus efficaces. Lorsque vous souhaitez maximiser la vitesse de rendu, vous pouvez configurer un ID pour chaque balise individuelle, puis utiliser ces ID pour écrire des styles. Ce serait super rapide et super ridicule. Le résultat est une sémantique extrêmement médiocre et extrêmement difficile à maintenir. Vous ne devriez pas voir cela se faire, même au fond. Je pense que cela nous rappelle de ne pas abandonner la sémantique et la maintenabilité pour un CSS efficace.
Merci à Jason Beaudoin de m'avoir envoyé un e-mail à propos de cette idée. Si quelqu'un en sait plus sur ce sujet, ou si vous avez d'autres conseils que vous utilisez dans la même veine, écoutons-le !
À propos, comme les sélecteurs CSS sont utilisés par de nombreuses bibliothèques JavaScript, les éléments mentionnés ci-dessus s'appliquent toujours, le sélecteur d'ID est toujours le plus rapide et les sélecteurs descendants et éléments similaires sont plus lents.
PS : Voyons qui ose utiliser plus de N sélecteurs descendants. . . Il y a aussi des gens qui s’opposent à mon utilisation d’une pièce d’identité. . . Waouh haha. . .