Le panneau Performance (Performances) marque chaque tâche de longue durée par un triangle rouge dans l'angle supérieur droit et un avertissement dans l'onglet Summary (Résumé) pour indiquer que l'exécution du thread principal prend beaucoup de temps et présente des performances lentes:
Dans vos enregistrements de performances, certaines de ces tâches de longue durée peuvent être des événements Recalculer le style. L'événement Recalculer le style permet de suivre le temps nécessaire au navigateur pour effectuer les opérations suivantes:
- Parcourez les éléments DOM d'une page pour trouver toutes les règles de style CSS qui correspondent à un élément donné.
- Calculez le style réel de chaque élément, en fonction des règles de style CSS correspondantes.
Les styles CSS doivent être recalculés chaque fois que l'applicabilité des règles CSS est susceptible d'avoir changé, par exemple dans les cas suivants:
- Des éléments sont ajoutés au DOM ou supprimés de celui-ci.
- Les attributs d'un élément sont modifiés, comme la valeur d'un attribut de classe ou d'identifiant.
- L'utilisateur effectue une entrée, comme un déplacement de la souris ou un changement de sélection d'un élément, ce qui peut affecter les règles
:hover.
Si vous trouvez des événements de longue durée Recalculer le style, vous pouvez utiliser l'onglet Statistiques du sélecteur pour identifier les sélecteurs CSS qui prennent le plus de temps et qui ralentissent les performances.
L'onglet Statistiques sur les sélecteurs fournit des statistiques sur les sélecteurs de règles CSS impliqués dans un ou plusieurs événements Recalculer le style dans un enregistrement de performances.
Enregistrer une trace des performances avec les statistiques du sélecteur activées
Pour afficher les statistiques des sélecteurs de vos règles CSS lors d'événements de longue durée Recalculer le style, enregistrez une trace des performances en activant le paramètre de capture Selection Stats (Statistiques des sélecteurs).
Pour enregistrer une trace des performances avec des statistiques sur les sélecteurs:
Ouvrez une page Web, par exemple la page de démonstration de la galerie photo.
Ouvrez les outils de développement, puis accédez au panneau Performances.
Dans le panneau Performances, cliquez sur le bouton settings Capture settings (Paramètres de capture) et cochez la case check_box Activer les statistiques du sélecteur CSS.
Cliquez sur radio_button_checked Enregistrer, exécutez le scénario que vous souhaitez améliorer, puis cliquez sur radio_button_checked Arrêter.
Consultez ensuite les statistiques relatives aux sélecteurs CSS, comme décrit dans les sections suivantes.
Afficher les statistiques du sélecteur de règle CSS pour un seul événement
Pour afficher les statistiques des sélecteurs de règle CSS impliqués dans un seul événement Recalculate Style (Recalculer le style) :
Enregistrez une trace des performances avec les statistiques du sélecteur activées.
Recherchez un événement Recalculer le style dans votre enregistrement des performances, puis cliquez dessus.
Dans la section inférieure du panneau Performances, ouvrez l'onglet Statistiques du sélecteur.
Tableau des sélecteurs CSS dans l'onglet "Statistiques relatives aux sélecteurs"
L'onglet Statistiques sur les sélecteurs contient un tableau des sélecteurs CSS. Le tableau affiche les informations suivantes pour chaque sélecteur CSS:
| Colonne | Description |
|---|---|
| Temps écoulé (ms) | Temps que le navigateur a passé à faire correspondre ce sélecteur CSS. Cette durée est exprimée en millisecondes (ms), où 1 ms correspond à 1/1 000 de seconde. |
| Tentatives de correspondance | Nombre d'éléments que le moteur du navigateur a tenté de faire correspondre à ce sélecteur CSS. |
| Nombre de correspondances | Nombre d'éléments que le moteur du navigateur a mis en correspondance avec ce sélecteur CSS. |
| % de non-correspondances du chemin lent | Ratio entre les éléments qui ne correspondaient pas à ce sélecteur CSS et les éléments que le moteur de navigateur a tenté de faire correspondre, mais qui nécessitaient que le moteur du navigateur utilise du code moins optimisé pour la mise en correspondance. |
| Sélecteur | Sélecteur CSS mis en correspondance. |
| Feuille de style | Feuille de style CSS contenant le sélecteur CSS. |
Lorsque vous avez terminé, dans le panneau Performances, ouvrez les paramètres Paramètres de capture et décochez la case case Activer les statistiques du sélecteur CSS.
Afficher les statistiques de sélecteur de règle CSS pour plusieurs événements
Pour afficher les statistiques globales des sélecteurs de règle CSS impliqués dans plusieurs événements Recalculer le style, copiez plusieurs tableaux Statistiques des sélecteurs dans une feuille de calcul, comme suit:
Enregistrez une trace des performances avec les statistiques du sélecteur activées.
Recherchez le premier événement Recalculer le style qui vous intéresse, puis cliquez dessus.
Dans la section inférieure du panneau Performances, ouvrez l'onglet Statistiques du sélecteur.
Effectuez un clic droit sur le tableau de statistiques du sélecteur, puis sélectionnez Copier le tableau.
Collez le tableau dans une feuille de calcul (Google Sheets, par exemple).
Répétez les étapes précédentes avec les autres événements Recalculer le style qui vous intéressent.
Lorsque vous avez terminé, dans le panneau Performances, ouvrez les paramètres Paramètres de capture et décochez la case case Activer les statistiques du sélecteur CSS.
Afficher les statistiques globales sur le sélecteur de règle CSS pour l'enregistrement complet
Pour afficher les statistiques globales des sélecteurs de règle CSS impliqués dans l'enregistrement des performances complet:
Enregistrez une trace des performances avec les statistiques du sélecteur activées.
Cliquez sur une zone vide du graphique de flammes pour désélectionner tout événement pouvant être sélectionné.
Sélectionnez toute la plage d'enregistrement. Pour ce faire, double-cliquez sur le graphique du processeur en haut du panneau Performances.
Dans la section inférieure du panneau Performances, ouvrez l'onglet Statistiques du sélecteur. Une nouvelle ligne s'affiche en haut de l'écran, avec des données sur les totaux de tous les sélecteurs.
Lorsque vous avez terminé, dans le panneau Performances, ouvrez les paramètres Paramètres de capture et décochez la case case Activer les statistiques du sélecteur CSS.
Analyser les statistiques des sélecteurs CSS
Pour trier les données du tableau Statistiques du sélecteur par ordre croissant ou décroissant, cliquez sur un en-tête de colonne. Par exemple, pour voir quels sélecteurs CSS prennent le plus de temps, cliquez sur l'en-tête de colonne Temps écoulé (ms).
Pour essayer d'améliorer les performances de votre page Web, concentrez-vous sur les sélecteurs CSS qui:
- Le calcul a pris beaucoup de temps (valeur Elapsed (ms)) élevée.
- Nombre de tentatives de correspondance que le navigateur a tenté de mettre en correspondance (valeur de Tentatives de correspondance élevée).
- Correspondance établie avec peu d'éléments dans le navigateur (valeur Match Count faible par rapport à la valeur Match Tentatives).
- qui présentent un pourcentage élevé de non-correspondances de chemins lents.
Par exemple, dans la capture d'écran précédente:
- Le premier sélecteur CSS (
html body .ps[tooltip...) était le plus long. - Le moteur du navigateur a tenté de faire correspondre ce sélecteur CSS 1 104 fois, mais ne correspond à aucun élément.
Par conséquent, ce sélecteur CSS est le premier candidat à essayer de l'améliorer.
Essayez de modifier vos sélecteurs CSS afin qu'ils mettent moins de temps à calculer et qu'ils correspondent à moins d'éléments sur la page. L'amélioration de vos sélecteurs CSS dépend de votre cas d'utilisation.
Répétez les étapes de ce tutoriel pour vérifier que vos modifications ont contribué à réduire la durée de l'événement Recalculer le style dans la colonne Temps écoulé (ms).