Comment écrire un meilleur CSS en tenant compte de la performance

Dans le post d'aujourd'hui, nous allons réfléchir aux choix de code que nous pouvons faire en CSS pour améliorer les performances du site. Mais avant de plonger dans ces choix, examinons d’abord brièvement le processus de rendu des pages Web afin de nous concentrer sur leszones problématiques (performances) pouvant être résolues via CSS.

Voici le déroulement approximatif des opérations effectuées par le navigateur après la création de l'arborescence DOM:

1. Recalculer le style (et créer une arborescence de rendu). Le navigateur calcule les styles à appliquer aux éléments de l’arborescence DOM. Une arborescence de rendu est créée ultérieurement en supprimant les nœuds (éléments) de l’arborescence DOM qui ne doivent pas être rendus (éléments avec affichage: aucun) et ceux qui le sont (pseudo-éléments).
2. Mise en page (aka redistribution). En utilisant le style calculé précédemment, le navigateur calcule la position et la géométrie de chaque élément de la page..
3. Repeindre. Une fois que la mise en page est mappée, les pixels sont dessinés à l'écran.
4. Couches composites. Lors du repeinte, la peinture peut être réalisée en différentes couches de manière autonome; ces couches sont ensuite finalement combinées ensemble.

Passons maintenant à ce que nous pouvons faire au cours des trois premières étapes de l'opération pour écrire des codes CSS plus performants..

1. Réduire les calculs de style

Comme mentionné précédemment, dans la phase "Recalculer le style", le navigateur calcule les styles à appliquer aux éléments. Pour ce faire, le navigateur découvre d’abord tous les sélecteurs du CSS qui pointent vers un nœud d’élément donné de l’arborescence DOM. Ensuite, il passe en revue toutes les règles de style de ces sélecteurs et détermine celles qui doivent être réellement appliquées à l'élément..

Pour éviter des calculs de style coûteux, réduire les sélecteurs complexes et profondément imbriqués il est donc plus facile pour le navigateur de déterminer à quel élément un sélecteur se réfère. Cela réduit le temps de calcul.

Autres moyens d’employer: réduire le nombre de règles de style (lorsque c'est possible), supprimer les CSS non utilisées et en évitant redondance et dérogations, afin que le navigateur n'ait pas à répéter le même style lors des calculs de style.

2. Réduire les reflux

Les modifications du reflet ou de la mise en page dans un élément sont des processus très "coûteux" et peuvent poser un problème encore plus important lorsque l'élément qui a subi la modification de la mise en page a une quantité importante d'enfants Reflète en cascade dans la hiérarchie).

Les reflux sont déclenchés par les modifications de mise en page d'un élément, telles que les modifications des propriétés géométriques telles que la hauteur ou la taille de la police, l'ajout ou la suppression de classes aux éléments, le redimensionnement de la fenêtre, l'activation :flotter, Changements DOM par JavaScript, etc..

Comme dans le calcul de style, pour réduire les reflux, éviter les sélecteurs complexes et arbres DOM profonds (encore une fois, ceci permet d'éviter une cascade excessive de Reflows).

Si vous devez modifier les styles de disposition d'un composant dans votre page, cibler les styles de l'élément qui se trouve au plus bas dans la hiérarchie des éléments que le composant est fait de. Ceci afin que les changements de mise en page ne déclenchent (presque) aucun autre effet Reflows..

Si vous animez un élément qui subit des modifications de mise en page, le sortir du flux de page par en le positionnant, Étant donné que la redistribution d'éléments absolument positionnés n'affectera pas le reste des éléments de la page..

Pour résumer:

• Ciblez les éléments situés plus bas dans l'arborescence DOM lors de modifications de la présentation
• Choisissez des éléments parfaitement positionnés pour les animations de changement de mise en page
• Évitez d’animer les propriétés de la présentation autant que possible

3. Réduire les repeints

Repeindre fait référence au dessin de pixels sur l'écran et constitue un processus coûteux, tout comme le redistribution. Les repeintes peuvent être déclenchées par Reflows, le défilement de page, les modifications de propriétés telles que la couleur, la visibilité et l'opacité..

Pour éviter les repaints fréquents et énormes, utiliser moins des propriétés qui causent des repeints coûteux comme des ombres.

Si vous animez des propriétés d'un élément pouvant déclencher Repaint directement ou indirectement, ce sera un avantage considérable. si cet élément est dans sa propre couche empêchant ses travaux de peinture d’affecter le reste de la page et de provoquer une accélération matérielle. En accélération matérielle, le GPU se charge d’effectuer les modifications d’animation dans la couche, ce qui évite au processeur un travail supplémentaire tout en accélérant le processus..

Dans certains navigateurs, opacité (avec une valeur inférieure à 1) et transformer (valeur autre que aucun) sont automatiquement promus vers de nouvelles couches et l'accélération matérielle est appliquée aux animations et aux transitions. Préférer ces propriétés aux animations est donc bon.

Pour forcer promouvoir un élément vers une nouvelle couche et entrer dans l'accélération matérielle pour l'animation, deux techniques sont impliquées:

1. ajouter transformer: translate3d (0, 0, 0); à l'élément, incitant le navigateur à déclencher l'accélération matérielle pour les animations et les transitions.
2. ajouter le changera propriété de l'élément, qui informe le navigateur des propriétés susceptibles de changer dans l'élément à l'avenir. Remarque: Sara Soueidan a publié un article très complet et très utile à ce sujet dans le site Dev.Opera.

Pour résumer:

• Évitez les styles coûteux qui causent Repaints
• Recherchez la promotion de la couche et l'accélération matérielle pour des animations et des transitions lourdes.

Prendre note

(1) Jusqu'à présent, nous n'avons pas abordé la réduction de la taille des fichiers CSS. Nous avons mentionné que la réduction des règles de style (et des éléments DOM) constitue une amélioration significative des performances en raison de: combien le navigateur devra travailler Moins sur le processus de calcul des styles. En conséquence de cette réduction de code, écrire de meilleurs sélecteurs et supprimer les CSS non utilisés, la taille du fichier diminuera automatiquement.

(2) Il est également conseillé de ne pas apporter trop de modifications corrélatives aux styles d'un élément en JavaScript. Au lieu de cela, ajoutez une classe à l'élément (à l'aide de JavaScript) qui contient les nouveaux styles pour apporter ces modifications - cela évite les reflux inutiles..

(3) vous voudrez éviter les mises en page ainsi que le problème (reflows forcés synchrones) résultant de l’accès et de la modification des propriétés de disposition des éléments à l’aide de JavaScript. En savoir plus sur la façon dont cela tue les performances ici.