Réduire la portée et la complexité des calculs de style

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:

  1. Ouvrez les outils de développement.
  2. Accédez à l'onglet Performances.
  3. Cochez la case Statistiques du sélecteur (facultatif).
  4. Cliquez sur Enregistrer.
  5. Interagissez avec la page.

Lorsque vous arrêtez l'enregistrement, l'image suivante s'affiche:

<ph type="x-smartling-placeholder">
</ph> Outils de développement affichant les calculs de style
Rapport d'outils de développement présentant les calculs de style

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.

<ph type="x-smartling-placeholder">
</ph> Zoom sur
    une zone problématique dans les outils pour les développeurs Chrome, dans le résumé d&#39;activité
    le panneau &quot;Performances&quot;
dans les outils pour les développeurs Chrome.
Cadres de longue durée dans l'activité des outils de développement Résumé.

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.

<ph type="x-smartling-placeholder">
</ph> Obtenir le
    détails des calculs de style à long terme, y compris des informations essentielles telles que
    comme le nombre d&#39;éléments concernés par le travail de recalcul du style.
Un recalcul de style à long terme ne prend plus de 25 ms dans le résumé des outils de développement.

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 un correctif 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.

<ph type="x-smartling-placeholder">
</ph> Le tableau des statistiques du sélecteur CSS
    s&#39;affiche dans le panneau &quot;Performances&quot;
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. <ph type="x-smartling-placeholder">
</ph> Tableau des statistiques du sélecteur, comme indiqué dans le panneau des performances de Chrome DevTools.

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.

<ph type="x-smartling-placeholder">

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

Image principale tirée de Unsplash, par Markus Spiske.