JavaScript est souvent un déclencheur de modifications visuelles. Parfois, ces modifications sont apportées directement via des manipulations de style, et parfois via des 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 courante de problèmes de performances. Vous devez donc essayer de minimiser son impact dans la mesure du possible.
Calcul du style
Modifier le DOM en ajoutant et en supprimant des éléments, en modifiant des attributs, des classes ou en exécutant des animations entraîne le recalcul des styles d'éléments et, dans de nombreux cas, de la mise en page d'une partie ou de la totalité de la page. Ce processus est appelé calcul de style.
Le navigateur commence à calculer les styles en créant un ensemble de sélecteurs correspondants pour déterminer quelles classes, pseudo-sélecteurs et ID s'appliquent à un élément donné. Ensuite, il traite les règles de style des sélecteurs correspondants et détermine les styles finaux de l'élément.
Rôle du recalcul des styles dans la latence d'interaction
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 le moment où le navigateur peint le frame suivant, affichant les mises à jour visuelles correspondantes de l'interface utilisateur.
Un élément important d'une interaction est le temps nécessaire pour peindre le frame suivant. Le travail de rendu effectué pour présenter le frame suivant se compose de plusieurs parties, y compris le calcul des styles de page qui se produit juste avant la mise en page, la peinture et le travail de composition. Ce guide se concentre sur les coûts de calcul de style, mais réduire toute partie de la durée de rendu totale de l'interaction réduit également sa latence totale.
Réduire la complexité de vos sélecteurs
Si vous simplifiez les sélecteurs CSS, vous pouvez 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 avec un simple nom de classe:
.title {
/* styles */
}
Toutefois, à mesure qu'un projet évolue, il a probablement besoin d'un CSS plus complexe, et vous pouvez vous retrouver 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 effectivement demander "s'agit-il d'un élément avec une classe title avec un parent de classe box qui est l'enfant moins-nième-plus-1 de son élément parent ? Le navigateur peut mettre un certain temps à déterminer cela. Pour simplifier, vous pouvez remplacer le sélecteur par un nom de classe plus spécifique:
.final-box-title {
/* styles */
}
Ces noms de classe de remplacement peuvent sembler maladroits, mais ils simplifient grandement la tâche 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 viennent après lui pourraient ê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 base de son nom de classe uniquement.
Réduire le nombre d'éléments stylisés
Un autre facteur de performance, souvent plus important que la complexité du sélecteur, est la quantité de travail à effectuer lorsqu'un élément change.
En termes généraux, le coût maximal 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 style pour voir s'il correspond.
Les calculs de style peuvent cibler directement quelques éléments au lieu d'invalider l'ensemble de la page. Dans les navigateurs modernes, ce problème est moins courant, car le navigateur n'a pas toujours besoin de vérifier tous les éléments qu'une modification peut affecter. En revanche, les navigateurs plus anciens ne sont pas toujours optimisés pour ces tâches. Dans la mesure du possible, 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 de style dans le navigateur. Chacun d'eux dépend de votre choix de le mesurer dans le navigateur de votre environnement de développement ou de mesurer la durée de ce processus pour les utilisateurs réels sur votre site Web.
Mesurer le coût du recalcul des styles dans Chrome DevTools
Une façon de mesurer le coût des recalculs de style consiste à 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, l'écran suivant s'affiche: