JavaScript est souvent un déclencheur de modifications visuelles. Parfois, il effectue ces modifications directement par le biais de manipulations de style, et parfois par le biais de calculs qui entraînent des modifications visuelles, comme la recherche ou le tri de données. Un code JavaScript mal synchronisé ou de longue durée peut être une cause fréquente de problèmes de performances. Vous devez donc essayer de minimiser son impact dans la mesure du possible.
Calcul du style
La modification du DOM en ajoutant et en supprimant des éléments, en modifiant des attributs ou des classes, ou en lançant des animations, oblige le navigateur à recalculer les styles des éléments et, dans de nombreux cas, la mise en page d'une partie ou de la totalité de la page. Ce processus est appelé calcul du style.
Le navigateur commence à calculer les styles en créant un ensemble de sélecteurs correspondants pour déterminer les classes, les pseudo-sélecteurs et les ID qui s'appliquent à un élément donné. Il traite ensuite les règles de style des sélecteurs correspondants et détermine les styles finaux de l'élément.
Le rôle du recalcul de style dans la latence d'interaction
L'Interaction to Next Paint (INP) est une métrique de performances d'exécution centrée sur l'utilisateur qui évalue la réactivité globale d'une page aux entrées utilisateur. Elle mesure la latence d'interaction entre le moment où l'utilisateur interagit avec la page et celui où le navigateur affiche le prochain frame montrant les mises à jour visuelles correspondantes de l'interface utilisateur.
Un élément important d'une interaction est le temps nécessaire pour afficher le prochain frame. Le rendu effectué pour présenter le prochain frame se compose de nombreuses parties, y compris le calcul des styles de page qui se produit juste avant la mise en page, la peinture et la composition. Ce guide se concentre sur les coûts de calcul du style, mais la réduction de la durée totale du rendu de toute partie de l'interaction réduit également sa latence totale.
Réduisez la complexité de vos sélecteurs
Simplifier les sélecteurs CSS peut aider à accélérer les calculs de style de votre page. Les sélecteurs les plus simples référencent un élément en CSS avec un simple nom de classe :
.title {
/* styles */
}
Toutefois, à mesure que votre projet se développe, il a probablement besoin d'un CSS plus complexe. Vous pouvez alors vous retrouver avec des sélecteurs comme celui-ci :
.box:nth-last-child(-n+1) .title {
/* styles */
}
Pour déterminer comment ces styles s'appliquent à la page, le navigateur doit effectivement se demander "s'agit-il d'un élément avec une classe title dont le parent a une classe box et qui est l'enfant moins-ième-plus-1 de son élément parent ? Le navigateur peut mettre un certain temps à déterminer cela. Pour simplifier cela, vous pouvez remplacer le sélecteur par un nom de classe plus spécifique :
.final-box-title {
/* styles */
}
Ces noms de classes de remplacement peuvent sembler étranges, mais ils simplifient considérablement le travail du navigateur. Dans la version précédente, par exemple, pour que le navigateur sache qu'un élément est le dernier de son type, il doit d'abord tout savoir sur tous les autres éléments pour déterminer si des éléments qui le suivent peuvent être le nth-last-child. Cela peut être beaucoup plus coûteux en termes de calcul que de faire correspondre un sélecteur à un élément sur la seule base de son nom de classe.
Réduire le nombre d'éléments stylisés
Un autre élément à prendre en compte pour les performances (et souvent plus important que la complexité du sélecteur) est la quantité de travail nécessaire lorsqu'un élément change.
En termes généraux, le coût le plus élevé du 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 toute la page. Dans les navigateurs modernes, ce problème est généralement moins fréquent, car le navigateur n'a pas toujours besoin de vérifier tous les éléments qu'une modification peut affecter. En revanche, les anciens navigateurs ne sont pas toujours optimisés pour ces tâches. Dans la mesure du possible, réduisez le nombre d'éléments invalidés.
Mesurer le coût de recalcul de votre style
Il existe plusieurs façons de mesurer le coût du recalcul de style dans le navigateur. Chacune d'elles dépend de la façon dont vous souhaitez la mesurer : dans le navigateur de votre environnement de développement ou pour les utilisateurs réels sur votre site Web.
Mesurer le coût du recalcul de style dans les outils pour les développeurs Chrome
Pour mesurer le coût des recalculs de style, vous pouvez utiliser le panneau "Performances" des 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, un écran semblable à celui ci-dessous s'affiche :
La bande en haut de l'écran est un graphique de flammes miniature qui représente également les images par seconde. Plus l'activité est proche du bas de la bande, plus le navigateur affiche rapidement les frames. Si vous voyez le graphique en flammes se stabiliser en haut avec des barres rouges au-dessus, cela signifie que vous avez du travail qui provoque des frames de longue durée.
Les frames de longue durée lors d'une interaction, comme le défilement, méritent un examen plus approfondi. Si vous voyez un grand bloc violet, effectuez un zoom avant sur l'activité et sélectionnez n'importe quel élément intitulé Recalculer le style pour obtenir plus d'informations sur les tâches de recalcul de style potentiellement coûteuses.
Cliquez sur l'événement pour afficher sa pile d'appel. Si le rendu a été causé par une interaction de l'utilisateur, le JavaScript qui a déclenché le changement de style est indiqué. Il indique également le nombre d'éléments concernés par la modification (un peu plus de 900 dans ce cas) et la durée du calcul du style. Vous pouvez utiliser ces informations pour commencer à essayer de trouver une solution dans votre code.
Si vous avez coché la case Statistiques du sélecteur dans les paramètres du panneau "Performances" avant d'effectuer une trace, le panneau inférieur de la trace comportera un onglet supplémentaire portant le même nom.
Ce panneau fournit des données utiles sur le coût relatif de chaque sélecteur, ce qui vous 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 de style pour les utilisateurs réels
Si vous souhaitez savoir combien de temps prend le recalcul du style pour les utilisateurs réels de votre site Web, l'API Long Animation Frames vous fournit les outils nécessaires. Les données de cette API ont été ajoutées à la bibliothèque JavaScript web-vitals, y compris le temps de recalcul du style.
Si vous pensez que le délai de présentation d'une interaction est le principal facteur contribuant à l'INP d'une page, vous devez déterminer combien de temps est consacré au recalcul des styles sur la page. Pour en savoir plus, consultez Mesurer le temps de recalcul des styles sur le terrain.