Une introduction au fonctionnement des sélecteurs d'éléments CSS

Tutoriel recommandé : Tutoriel vidéo CSS

Dans le travail quotidien des ingénieurs front-end, l'utilisation de sélecteurs d'éléments CSS est monnaie courante ; vous écrivez du CSS général ou SASS, SCSS, LESS, etc. qui doivent être compilés, ils seront finalement compilés en attributs de style CSS ligne par ligne, qui seront éventuellement analysés et appliqués par le navigateur. Mais avez-vous déjà réfléchi à la façon d’y parvenir sans cela ?

Rendu du navigateur

Jetons d'abord un coup d'œil aux étapes de rendu du navigateur :

Une fois le CSS chargé par le navigateur, il sera l'analyser dans un arbre CSSOM et essayer de le superposer avec le Dom pour former un arbre de rendu, puis effectuer des étapes telles que le calcul de position et le rendu. De ce point de vue, la clé pour appliquer les propriétés CSS réside dans la manière de convertir le CSS en une arborescence CSSOM et dans la manière d'appliquer le CSSOM au DOM.

Arbre CSSOM

Lorsque nous écrivons un ensemble de styles CSS, par exemple :

#id .class h4 + p {
   ...
}

Lorsque le navigateur l'analyse, vous pourriez penser que le CSS sera de gauche trouver ＃id>.class>h4>p dans l'ordre de droite, et l'appliquer en dernier, mais en fait l'ordre dans lequel les navigateurs analysent CSS est de droite à gauche p>h4>.class>＃id.

Assez contre-intuitif, non ? Mais si les problèmes de performances sont pris en compte, l’analyse de droite à gauche sera bien plus efficace que celle de gauche à droite.

Supposons qu'il y ait du HTML comme celui-ci :

<p>
    </p><p>
        </p><p>
            ...
        </p>
        <p>
            </p><p>
                ...
            </p>
            <p>
                ...
            </p>
        
    
    <p>
        </p><p>
            </p><p>
                ...
            </p>
        
    

et voici cinq règles de style CSS :

#p1 .c .d {}
.f .c .d {}
.a .c .e {}
#p1 .f {}
.c .d {}

Simulons-le. Si le CSS est analysé de gauche à droite, ce sera Un arbre CSSOM similaire à celui-ci sera généré :

Réfléchissez au <p class="“" d></p> dans .d Lorsque vous appliquez des styles à un tel arbre CSSOM, cela doit être. appliqué à tous les Les règles de style de sont vérifiées pour confirmer si les règles de style affecteront .d Enfin, il est déterminé qu'il existe trois règles de style qui peuvent affecter .d :

• ＃p1 .c .d
• .f .c .d
• .c .d

Par analogie, chaque élément de l'arborescence DOM doit respecter toutes les règles de style. L'obtention de styles individuels entraînera de nombreux calculs redondants, ce qui affectera sérieusement les performances.

À l'inverse, si le CSS précédent est analysé de droite à gauche, l'arborescence CSSOM peut être la suivante :

Identique à l'exemple précédent, de From la perspective de

dans <p class="“" d></p>, puisque les éléments cibles qui seront affectés par les règles de style sont tous concentrés sur la première couche, il n'est pas nécessaire de faciliter l'ensemble de l'arborescence CSSOM, ni même simplement de cocher .d Vérifier si les variables de sous-attributs suivantes sont conformes à la structure DOM réelle, puis récupérez toutes les règles de style correspondantes pour terminer l'application des règles de style .d à l'élément. .d

L'ordre d'analyse de droite à gauche peut rassembler tous les chemins de règles partagés. Lorsque le navigateur effectue une comparaison d'attributs, il n'est plus nécessaire de faciliter l'ensemble de l'arborescence CSSOM, ce qui réduit considérablement les calculs de comparaison invalides.

Vous pouvez aussi y penser d'une autre manière : dans la structure du HTML, un élément peut avoir d'innombrables éléments enfants, mais il ne peut avoir qu'un seul élément parent en recherchant de l'enfant au parent (de bas en haut). top) est nettement plus rapide.

Appliquer les styles

Après avoir analysé l'arborescence CSSOM, peut-elle être combinée avec le DOM ? Ce serait génial si c'était vraiment aussi simple.

En plus des fichiers CSS définis par les développeurs, il existe plusieurs endroits où des règles de style peuvent être définies, affectant le rendu de l'écran :

Paramètres de style HTML en ligne
Valeur par défaut du navigateur (c'est-à-dire ce que la réinitialisation/normalisation CSS écrasera)
• Paramètres des préférences utilisateur du navigateur

Le navigateur est responsable du traitement de la partie CSS. les choses et les règles de style définies dans le fichier CSS sont organisées en groupes de règles de style distincts (ensembles de règles CSS), qui enregistrent des informations telles que les règles de style, les attributs cibles, etc.

Attribut cible

Afin d'améliorer l'efficacité des calculs ultérieurs, le noyau de traitement CSS du navigateur regroupera et stockera les règles individuelles dans le groupe de règles de style en fonction de leurs attributs cibles ; quatre groupes

idRules
• classRules
• tagNameRules
• universalRules

De cette façon, lors de l'accès, vous peut dépendre de l'existence ou non de l'élément cible. Cet attribut peut rapidement filtrer les styles qui peuvent être appliqués.

Appliquer les règles

La dernière étape consiste à appliquer les règles. Le navigateur appliquera toutes les règles de style dans l'ordre et l'importance des règles de style suivants :

• Paramètres par défaut du navigateur
• Préférences utilisateur du navigateur
• CSS défini par le développeur
• style en ligne
• Ajoutez l'attribut de style !important

Vous pourriez être curieux : pourquoi le style en ligne et le CSS défini par le développeur sont-ils traités séparément ?

Nous pouvons revoir les étapes de rendu du navigateur. Puisque le style en ligne existe dans l'élément DOM, il n'est accessible que lorsque CSS est appliqué au DOM. Il est impossible de combiner les deux. à l'avance.

Efficacité CSS

En fait, le navigateur a complété le mécanisme d'optimisation ici ; le navigateur prendra automatiquement des instantanés de style des éléments avec un statut cohérent. Le statut cohérent signifie que les conditions suivantes doivent être remplies :

• Aucun identifiant n'est défini
• la balise et la classe doivent être exactement les mêmes
• Aucun attribut de style n'est défini
• Divers sélecteurs de frères et sœurs (par exemple : 〜, +, :first-child, etc.) ne peuvent pas être utilisés dans les règles de style

En raison des conditions ci-dessus et des Opérations CSS évoquées précédemment, il y a quelques endroits auxquels vous pouvez prêter attention lors de l'écriture de CSS :

• Étant donné que les attributs cibles des règles de style sont stockés dans des groupes, le sélecteur d'identifiant est très efficace, il ne peut pas être mélangé avec d’autres conditions.
• N'écrivez pas de règles de style CSS trop approfondies
• Si vous ne pouvez pas utiliser le style en ligne, ne l'utilisez pas. En plus d'être difficile à maintenir, car il existe dans le DOM. arbre, il ne peut pas être combiné avec d'autres styles à l'avance, donc L'efficacité sera également considérablement réduite

Si vous pouvez prêter attention à ces petits détails typiques, l'efficacité CSS peut naturellement être grandement améliorée.

Extension

Après avoir découvert les sélecteurs CSS, vous serez certainement curieux, qu'en est-il des sélecteurs d'éléments JavaScript ? Vous pouvez vous référer au code source de jQuery pour cette question. Il est analysé de gauche à droite. Quant à la raison pour laquelle c'est différent, il y a en fait une réponse dans l'article, je vous laisse réfléchir et creuser.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!