JavaScript est souvent un déclencheur de changements visuels. Parfois, cela rend ces des changements directement par des manipulations de style, et parfois par des calculs qui entraînent des changements visuels, comme la recherche ou le tri des données. au mauvais moment ou des scripts JavaScript de longue durée sont souvent à l'origine de problèmes de performances. devez chercher à minimiser son impact lorsque vous le pouvez.
Calcul du style
Changer le DOM en ajoutant et en supprimant des éléments, en modifiant les attributs, les classes, ou la lecture d'animations amène le navigateur à recalculer les styles des éléments dans de nombreux cas, la mise en page d'une partie ou de la totalité de la page. Ce processus s'appelle calcul de style.
Le navigateur commence à calculer les styles en créant un ensemble de sélecteurs correspondants pour déterminent les classes, les pseudo-sélecteurs et les ID qui s'appliquent à un élément donné. Ensuite, il traite les règles de style des sélecteurs correspondants et détermine quels sont les styles finaux de l'élément.
Rôle du recalcul des styles dans la latence des interactions
INP (Interaction to Next Paint) : environnement d'exécution centré sur l'utilisateur métrique de performances qui évalue la réactivité globale d'une page aux entrées utilisateur. Il mesure la latence d'interaction entre le moment où l'utilisateur interagit avec la page et le navigateur affiche l'image suivante en montrant les mises à jour visuelles correspondantes pour l'interface utilisateur.
Une composante importante d'une interaction est le temps qu'il faut pour peindre cadre. Le rendu effectué pour présenter l'image suivante est composé de nombreuses parties, y compris le calcul des styles de page qui apparaissent juste avant la mise en page, la peinture et travail de composition graphique. Ce guide se concentre sur les coûts du calcul de style, mais la réduction de la durée totale d'affichage de l'interaction réduit également la latence.
Simplifiez vos sélecteurs
La simplification des sélecteurs CSS peut accélérer les calculs de style de votre page. Les sélecteurs les plus simples font référence à un élément en CSS uniquement par un nom de classe:
.title {
/* styles */
}
Mais lorsqu'un projet se développe, il a probablement besoin d'un CSS plus complexe, avec des sélecteurs qui se présentent comme suit:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Pour déterminer comment ces styles s'appliquent à la page, le navigateur doit faire en sorte
demandez "est-ce un élément avec une classe de title
avec le parent d'une classe de
box
, qui est l'enfant moins-nth-plus-1 de son élément parent ? Comprendre
peut prendre un certain temps pour le navigateur. Pour simplifier, vous pouvez modifier
le sélecteur soit un nom de classe plus spécifique:
.final-box-title {
/* styles */
}
Ces noms de classe de remplacement peuvent sembler étranges, mais ils rendent le navigateur
beaucoup plus
facile. Dans la version précédente, par exemple, pour que le navigateur connaisse
un élément est le dernier de son type, il doit d'abord tout savoir sur toutes les
d’autres éléments pour déterminer si des éléments
suivants qui pourraient
correspond à nth-last-child
. Cela peut être beaucoup plus
coûteux en calcul que
faire correspondre un sélecteur à un élément sur la seule base du nom de sa classe.
Réduire le nombre d'éléments stylisés
Autre considération liée aux performances (souvent plus importante que le sélecteur) la complexité, c'est la quantité de travail qui doit être accomplie lorsqu'un élément change.
En général, le coût dans le pire des cas de calcul du style des éléments calculés correspond au nombre d'éléments multiplié par le nombre de sélecteurs, car le navigateur doit vérifier chaque élément au moins une fois par rapport à chaque style pour voir s’il correspond.
Les calculs de style peuvent cibler directement quelques éléments au lieu d'invalider la page entière. Dans les navigateurs récents, cela est moins problématique, car le navigateur n'a pas toujours besoin de vérifier tous les éléments qu'un changement pourrait affecter. Les navigateurs plus anciens, en revanche, ne sont pas toujours optimisés pour ce type de tâches. Où vous devez réduire le nombre d'éléments invalidés.
Mesurer le coût du recalcul des styles
Il existe plusieurs façons de mesurer le coût du recalcul d'un style dans le navigateur. Chacun d'eux varie selon que vous souhaitez effectuer des mesures dans le navigateur ou non. dans votre environnement de développement, ou si vous voulez mesurer la durée pour les utilisateurs réels de votre site Web.
Mesurer le coût du recalcul des styles dans les outils pour les développeurs Chrome
Pour mesurer le coût des recalculs de style, vous pouvez utiliser la métrique dans les outils pour les développeurs Chrome. Pour commencer, procédez comme suit:
- Ouvrez les outils de développement.
- Accédez à l'onglet Performances.
- Cochez la case Statistiques du sélecteur (facultatif).
- Cliquez sur Enregistrer.
- Interagissez avec la page.
Lorsque vous arrêtez l'enregistrement, l'image suivante s'affiche:
![Outils de développement affichant les calculs de style](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/devtools-showing-style-ca-2cc07caa90f6e.png?authuser=5&hl=fr)
La bande du haut est un graphique de flammes miniature qui représente également seconde. Plus l'activité est proche du bas de la bande, plus vite les cadres sont peints par le navigateur. Si le graphique de type "flamme" se stabilise en haut avec des barres rouges au-dessus, cela signifie que le travail des frames de longue durée.
![Zoom sur
une zone problématique dans les outils pour les développeurs Chrome, dans le résumé d'activité
le panneau "Performances"
dans les outils pour les développeurs Chrome.](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/zooming-on-trouble-area-16c06721266c6.png?authuser=5&hl=fr)
Les images de longue durée lors d'une interaction comme le défilement valent la peine un style. Si vous voyez un grand bloc violet, faites un zoom avant sur l'activité et sélectionnez une Recalculer le style pour obtenir plus d'informations de recalcul de style coûteux.
![Obtenir le
détails des calculs de style à long terme, y compris des informations essentielles telles que
comme le nombre d'éléments concernés par le travail de recalcul du style.](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/getting-details-long-ru-995bd5d17169.png?authuser=5&hl=fr)
Cliquez sur l'événement pour afficher sa pile d'appels. Si le rendu a été causé par l'interaction avec l'utilisateur, il appelle le code JavaScript qui a déclenché le changement de style. Il indique également le nombre d'éléments concernés par la modification (un peu plus de 900). dans ce cas, et combien de temps a pris le calcul du style. Vous pouvez utiliser cette pour tenter de trouver une correction dans votre code.
Si vous avez coché la case Statistiques sur le sélecteur dans les paramètres du panneau "Performances" avant d'effectuer une trace, puis en bas de la trace comporte un onglet supplémentaire du même nom.
![Le tableau des statistiques du sélecteur CSS
s'affiche dans le panneau "Performances"
des outils pour les développeurs Chrome. Ce tableau contient
et les données correspondantes pour des éléments tels que le temps écoulé, les correspondances
le nombre de tentatives, le nombre de correspondances, le pourcentage de nœuds qui ne correspondent pas, les sélecteurs
la feuille de style dans laquelle
ils se trouvent.](https://web.dev/static/articles/reduce-the-scope-and-complexity-of-style-calculations/image/selector-stats.png?authuser=5&hl=fr)
Ce panneau fournit des données utiles sur le coût relatif de chaque sélecteur, ce qui permet d'identifier les sélecteurs CSS coûteux.
Pour en savoir plus, consultez la documentation sur les statistiques des sélecteurs CSS.
Mesurer le coût du recalcul des styles pour les utilisateurs réels
Si vous souhaitez connaître le temps nécessaire au recalcul des styles pour
les utilisateurs réels de votre site Web, l'API Long Animation Frames ;
vous donne les outils
nécessaires pour le faire. Les données de cette API ont été ajoutées au
web-vitals
bibliothèque JavaScript,
y compris le temps de recalcul du style.
Si vous pensez que le délai de présentation d'une interaction est le principal à l'INP d'une page, vous devez déterminer passé à recalculer les styles sur la page. Pour en savoir plus, consultez comment mesurer le temps de recalcul des styles sur le terrain.
Ressources
- Statistiques sur les sélecteurs dans les outils pour les développeurs Chrome
- Invalidation de style dans Blink
- INP (Interaction to Next Paint)
- Bibliothèque JavaScript
web-vitals
- Mesurer le temps de recalcul du style dans le champ
Image principale tirée de Unsplash, par Markus Spiske.