Les sélecteurs plus spécifiques sont-ils plus rapides à analyser?

Plus le sélecteur est court, mieux c'est. Si possible, assurez-vous que le sélecteur de clé est une classe ou un identifiant pour le garder rapide et spécifique.

Pour plus d'informations, veuillez lire l'article ci-dessous. Fortement recommandé.

https://www.sitepoint.com/ optimisation-des-sélecteurs-id-css-et-autres-mythes /

Avant de lire ma réponse, je voudrais vous dire que l'optimisation de la vitesse via le code CSS est un grand espace de problèmes. Vous pouvez optimiser la vitesse en utilisant un minificateur et en minimisant la taille de votre CSS. Cela faciliterait le chargement du fichier côté serveur et son envoi vers Internet (à tous les navigateurs qui le demandent) et côté navigateur, cela augmenterait les performances en diminuant le fichier qu'il doit télécharger. En dehors de cet aspect, la performance du code CSS est strictement un problème au niveau du navigateur et vous ne devriez travailler dessus que si vous observez des problèmes de performance côté client.

De plus, avant de faire toute optimisation de votre CSS, veuillez d'abord tester en supprimant règles pour h1 et voyez si cela fait une différence dans les performances.

Dans cette réponse, je supposerai que vous avez des problèmes de performances côté client lorsque le navigateur exécute votre CSS. Le sélecteur id de # indique au navigateur de rechercher un id donné et, puisque dans le cas d'un code HTML valide, le id est unique, la plupart des navigateurs arrêteront la recherche à sa première occurrence. Cependant, vous définissez l ' id pour body , ce qui n'augmente pas trop les performances, puisque body est l'enfant direct de la racine balise html . Si vous avez une section où se trouvent toutes vos balises h1 , alors ce serait bien si vous lui donniez un id et l’utilisiez dans votre sélecteur. Les sélecteurs de class ne s'arrêteront pas à la première correspondance, car une classe n'est pas supposée être unique. Supposons que vous ayez un div dans lequel se trouvent toutes vos balises h1 :

#h1-container h1 {
    /*Your rules*/
}

Si vous lui donnez un id :

<div id="h1-container">
    <!-- There are some h1 tags in here -->
</div>

et utilisez-le dans votre sélecteur:

<div>
    <!-- There are some h1 tags in here -->
</div>

alors ça devrait être joli rapide. Si vous rencontrez toujours des problèmes de performances, vous devrez nous donner plus d'informations sur votre problème, éventuellement avec un exemple reproductible, comme un JSFiddle.

Je ne pense pas que nous puissions dire que la spécificité améliore la vitesse d'analyse. Ce que id améliore légèrement, c'est la vitesse de rendu. Il y a d'autres facteurs qui affectent votre vitesse de rendu, tels que la taille du fichier CSS et le fait d'avoir à de nombreuses règles redéfinir la même classe encore et encore, par exemple

Quelques recommandations pour améliorer vos rendus:

1. Définissez vos règles de base pour les éléments que vous allez utiliser dans le contenu général (paragraphes, listes, gras, italique ...). De cette façon, vous écraserez les règles CSS par défaut du navigateur.
2. S'il y a des règles qui ne sont pas communes à chaque
par exemple, qui sont spécifiques d'un module, l'utilisation de la classe parent du module pour les définir évitera au navigateur d'explorer tout le HTML et vous avez gagné Il n'est pas nécessaire de remplacer les règles par la suite lorsque vous utilisez la même balise pour un élément de conception différent.
4. S'il y a plusieurs niveaux de nœuds enfants, utilisez des classes pour chacun d'entre eux qui doivent être personnalisés au lieu d'ajouter plus de niveaux suspendus à la classe parente, sinon vous vous retrouverez avec de grandes chaînes de classes hiérarchiques lorsque vous aurez besoin d'exceptions.
5. / li>
6. Essayez de créer des modules CSS que vous pouvez recycler dans toute votre conception en appliquant une seule classe qui définit cet élément modulaire.
7. Évitez d'utiliser * seul si possible. Aujourd'hui, ce n'est pas tellement un problème qu'il y a 20 ans, mais plus il est précis, mieux c'est pour la vitesse.
8. N'abusez pas de: avant et: après, utilisez-les de manière responsable. Ce sont des pseudo-éléments qui modifient le DOM à la volée et parfois, certains navigateurs ne les rendent pas correctement.
9. Essayez d'utiliser les raccourcis CSS en règle générale.
10. Si vous utilisez des motifs de type baground, équilibrez la taille de l'image et la fréquence de répétition. Créez un motif de 40px png ou gif au lieu d'utiliser la taille minimale de 4px, par exemple car le navigateur devra rendre l'image 10 fois moins, ce qui vaut la petite taille de fichier supplémentaire.
11. Utilisez des sprites pour des icônes et des éléments similaires mais pas trop gros. Vous pouvez créer un sprite par couleur. Je recommande également de le faire verticalement, le tout dans une colonne. De cette façon, vous pouvez facilement trouver des icônes en utilisant quelque chose comme background-position-y: calc (-8 * $ module) . Cette méthode vous fera économiser beaucoup de règles css pour définir la position ainsi que des éléments HTML car vous n'aurez pas à regrouper les images bg dans les deux axes (x, y)
12. Si vous utilisez des balises, ajoutez toujours les attributs avec et height en ligne. Et si ces images sont au format .jpg, utilisez une compression d'environ 60 et sauvegardées au format jpg progressif.

Je pense qu'avec ces règles de base, vous n'aurez aucun problème de rendu dans la plupart des cas.

<section class="content">
  <h1>My title</h1>
  <img class="thumnnail" src="https://fakeimg.pl/250x100/" title="my image"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <ul>
    <li>Excepteur sint occaecat cupidatat</li>
    <li>non proident sunt in culpa</li>
    <li>qui officia deserunt mollit anim id est laborum.</li>
  </ul>
</section>
<aside>
  <ul class="tabs">
    <li class="tab">Tab 1</li>
    <li class="tab">Tab 2</li>
    <li class="tab">Tab 3</li>
  </ul>
</aside>

h1 {
  margin: 16px 8px;
  font-size: 24px;
  color: #999966;
}
p {
  margin: 8px 8px 16px;
}
.thumnnail {
  float: left;
  margin: 0 8px;
}
.content, aside {
  display: table-cell;
  }
.content {
  width: 75%;
}
.content ul {
  margin: 8px;
  padding: 8px 16px ;
}
.content li {
  margin:8px 0;
}
.tabs {
  margin: 0;
  padding: 0;
  background: #ddd;
}
.tab {
  list-style: none;
  padding: 8px;
}
.tab + .tab {
  border-top: solid 2px #fff;
}