A travers un interesting video sur les performances de rendu de débogage dans Chrome devtools. Dans sa leçon, Umar identifie le changement d'une classe CSS sur la balise html comme source d'un goulot d'étranglement de rendu. Devtools montre que la modification de cette classe affecte potentiellement les 3 874 éléments du DOM en dessous de html et déclenche une opération coûteuse recalculate style.Est-ce que plusieurs classes sur la balise html affectent toujours les performances de rendu?
Dans le passé, j'ai ajouté des classes CSS à mes balises html ou body comme moyen pratique d'exprimer l'état de la page à ce niveau.
Votre CMS peut le faire dans le même but. Par exemple, dans un site WordPress, vous pouvez voir un tas de classes comme post-template-default single single-post postid-99999 single-format-standard logged-in category-news subcategory-uk has-hover sur la balise body d'un message.
Faut-il éviter cette pratique? Ou cela affectera-t-il seulement les performances de rendu lorsque les classes sont utilisées dans les règles CSS?
Je ne sais pas quel est le problème. Le problème de performance est causé par la re-peinture nécessaire de la page. Donc, s'il n'y a pas de re-peinture, il n'y a pas de problème. –
Différentes méthodologies CSS comme BEM, par exemple, utilisent ce modèle, et personne n'a dit à propos de la performance d'empiler plus de 1 classe dans une ligne. – Nicholas
Merci @MrLister, je pense que je comprends - si il n'y a pas de règles CSS relatives à une classe, et que je change la classe sur la balise html, le navigateur ne tentera pas de recalculer les styles. Je suppose que le point important de la vidéo d'Umar est que cela peut être coûteux quand il y a des règles CSS affectées par une classe sur une balise en haut du DOM. –