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

Jeremy Wagner

Paul Lewis

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 calculé.

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.

Temps de recalcul des styles et latence d'interaction

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. Cette page se concentre sur les coûts de calcul des styles, mais la réduction de la phase de rendu liée à l'interaction réduit également la latence, y compris pour les calculs de style.

Simplifiez vos sélecteurs

Simplifier le nom de vos sélecteurs peut vous aider à rendre le style de votre page plus rapide des calculs. Les sélecteurs les plus simples font référence à un élément en CSS avec seulement nom de la 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 dont le parent est le moins-nth-plus-1 avec une classe de box ?" Cela peut prendre beaucoup de temps, selon le sélecteur utilisé comme ainsi que le navigateur en question. Pour simplifier, vous pouvez modifier le sélecteur n'est qu'un nom de classe:

.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 simplement parce que sa classe correspond.

Réduire le nombre d'éléments stylisés

Autre facteur lié aux performances, souvent plus important que le sélecteur la complexité, est la quantité de travail qui doit être effectuée 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

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. Cliquez sur Enregistrer.
4. Interagissez avec la page.

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

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.

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.

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 ces informations pour commencer à essayer de trouver un correctif dans votre code.

Utiliser bloc, élément, modificateur

Approches du codage telles que le BEM (bloc, élément, modificateur) en termes de performances de la mise en correspondance des sélecteurs. BEM recommande tout a une classe unique et, si vous avez besoin d'une hiérarchie, est également intégré au nom de la classe:

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

Si vous avez besoin d'un modificateur, comme dans l'exemple du dernier élément enfant, vous pouvez l'ajouter ceci:

.list__list-item--last-child {
  /* Styles */
}

Le modèle BEM est un bon point de départ pour organiser votre CSS, à la fois à partir d'une structure et en raison des simplifications de la recherche de style qu'elle promeut.

Si vous n'aimez pas le BEM, il existe d'autres façons d'aborder votre CSS, mais nous vous conseillons à évaluer leurs performances et leur ergonomie avant de commencer.

Ressources

• Invalidation de style dans Blink
• BEM (bloc, élément, modificateur)

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