Photo de Jantine Durnbos à UnsplashCe n'est en aucun cas une critique de collègues, mais juste une courte liste de choses importantes que j'ai moi-même apprises sur CSS récemment.Ce n'est un secret pour personne que de nombreux développeurs ne semblent pas penser au CSS. Cela est facile à remarquer lors des discussions sur Internet et des conversations avec des amis et des collègues. Néanmoins, nous obtenons beaucoup de connaissances précisément de nos collègues, et parfois je comprends que personne ne m'a parlé de certaines nuances CSS importantes, car les gens ne passent tout simplement pas de temps à étudier ce sujet.
Pour résoudre ce problème, j'ai fait quelques recherches et fait une courte liste de concepts que je trouve intéressants et utiles pour une meilleure compréhension et rédaction de CSS.
Cette liste n'est certainement pas exhaustive. Il ne contient que les nouveautés que j'ai apprises ces derniers jours et ce que je veux partager, tout d'un coup ça va aider quelqu'un d'autre.Terminologie
Comme avec tout langage de programmation, certains termes sont utilisés pour décrire des concepts. Étant un langage de programmation, CSS n'est pas différent, il est donc important d'apprendre une terminologie afin de simplifier la communication et uniquement pour le développement personnel.
Combinateur descendant
Avez-vous vu l'écart entre les sélecteurs de votre style? En fait, il a un nom, c'est
un combinateur descendant.
Combinateur descendantMise en page, rendu et composition
Ces termes sont liés au rendu dans le navigateur, mais ils sont importants car certaines propriétés CSS affectent les différentes étapes du pipeline de rendu.
1. Disposition
L'étape de mise en page est le calcul de l'espace occupé par un élément à l'écran. Changer la propriété 'layout' en CSS (par exemple, largeur, hauteur) signifie que le navigateur devra vérifier tous les autres éléments et redessiner la page, c'est-à-dire repeindre les zones affectées et les chevaucher.
2. Dessin (peinture)
Ce processus remplit en pixels toutes les parties visuelles des éléments (couleurs, bordures, etc.). Les éléments sont généralement dessinés sur plusieurs couches.
La modification de la propriété 'paint' n'affecte pas la mise en page, donc le navigateur ignore l'étape de mise en page, mais fait le rendu quand même.
Le rendu prend souvent le plus de temps lors du rendu.
3. Composition (composite)
La composition est l'étape dans laquelle le navigateur doit dessiner les calques dans le bon ordre. Étant donné que certains éléments peuvent se chevaucher, à ce stade, le navigateur vérifie que les éléments sont affichés dans cet ordre.
Si vous modifiez la propriété CSS, ce qui n'affecte ni la mise en page ni le rendu, le navigateur n'a qu'à faire la composition.
Pour plus d'informations sur les processus qui déclenchent diverses propriétés CSS, voir Déclencheurs
CSS .
Performances CSS
Le sélecteur de progéniture peut être coûteux
En fonction de la taille de votre application, utiliser uniquement le sélecteur descendant sans instructions spécifiques peut affecter fortement les ressources. Le navigateur vérifie la conformité avec chaque élément du descendant, car la relation n'est pas limitée aux éléments parent et enfant.
Par exemple:
Exemple de sélecteur de descendantsLe navigateur devra évaluer tous les liens sur la page avant de passer à ceux de notre section
#nav .
Un moyen plus efficace consiste à ajouter un sélecteur de
.navigation-link spécifique à chaque lien
<a> dans la section
#nav .
Le navigateur lit les sélecteurs de droite à gauche
Il semble que j'aurais dû savoir cette chose importante auparavant, mais je ne savais pas ... Lors de l'analyse de CSS, le navigateur analyse les sélecteurs de droite à gauche.
Prenons l'exemple suivant:
Le navigateur lit de droite à gaucheÉtapes:
- correspondre à tous
<a> sur la page;
- trouver tous les
<a> contenus dans <li> ;
- prendre des allumettes et les réduire à celles de
<ul> ;
- enfin, filtrez la sélection ci-dessus sur celles contenues dans l'élément avec la classe
.container .
En regardant ces étapes, nous voyons que plus le sélecteur de droite est précis, plus le navigateur sera efficace pour filtrer et appliquer les propriétés CSS.
Pour améliorer les performances de l'exemple ci-dessus, nous pourrions remplacer
.container ul li a en ajoutant quelque chose comme
.container-link-style sur la balise
<a> elle-même.
Si possible, ne modifiez pas la disposition.
Les modifications apportées à certaines propriétés CSS nécessitent la mise à jour de la mise en page complète.
Par exemple, les propriétés géométriques de
width ,
height ,
top ,
left nécessitent de recalculer la disposition et de mettre à jour l'arborescence de rendu.
Si vous modifiez ces propriétés sur de nombreux éléments, il faudra beaucoup de temps pour calculer et mettre à jour leur position / taille.
Soyez prudent avec la complexité du rendu
Certaines propriétés CSS (comme le flou) sont plus chères que d'autres en matière de rendu. Pensez à des moyens plus efficaces d'obtenir le même résultat.
Propriétés CSS coûteuses
Certaines propriétés CSS sont plus chères que d'autres. Cela signifie que le rendu prend plus de temps.
Certaines des propriétés chères:
border-radiusbox-shadowfilter:nth-childposition: fixed
Cela ne signifie pas qu'ils ne peuvent pas être utilisés du tout, mais vous devez comprendre que si un élément utilise certaines de ces propriétés et est rendu des centaines de fois, cela affectera les performances.
Commande
Questions d'ordre
Regardons ce CSS:
Et puis regardez le code HTML:
L'ordre des sélecteurs en HTML n'a pas d'importance, mais en CSS c'est le cas.
Un bon moyen d'évaluer les performances CSS consiste à utiliser les outils de développement dans un navigateur.
Dans Chrome ou Firefox, vous pouvez ouvrir les outils de développement, accéder à l'onglet Performances et enregistrer ce qui se passe lorsque vous chargez ou interagissez avec votre page.
Capture d'écran de l'onglet Performances dans ChromeLes ressources
En explorant le sujet de cet article, je suis tombé sur des outils vraiment intéressants, listés ci-dessous:
CSS Triggers est un site Web répertoriant certaines fonctionnalités CSS et leur impact sur les performances.
Uncss est un outil pour supprimer les styles inutilisés de CSS.
Css-expliquer est un petit outil expliquant les sélecteurs CSS.
Fastdom est un outil de lecture / écriture par lots DOM pour accélérer les performances de mise en page.
C'est tout pour l'instant! J'espère que cela a du sens!