Beaucoup d'éducateurs que j'admire dans le domaine du web frontend semblent soit se retirer, soit réduire leurs efforts : Axel Rauschmayer, Salma Alam-Naylor, Josh W. Comeau, pour n'en citer que quelques-uns. D'autres sommités connues comme Kent C. Dodds, Addy Osmani, Rachel Nabors et Lydia Hallie sont passées de parler de développement frontend à parler de… eh bien, devinez.

Je n'ai jamais gagné ma vie en parlant de développement web, mais j'ai ce blog, et j'ai fait des conférences et des podcasts sur des choses qui me passionnent. Récemment, par exemple, ma passion était d'expliquer tous les tenants et aboutissants de la performance CSS : comment fonctionne le shadow DOM, comment fonctionne le moteur de style du navigateur, les pièges du CSS-in-JS, etc.

Juste pour le plaisir, j'ai décidé de demander à Claude Sonnet comment il gérerait une trace Chrome avec des coûts élevés de « Calcul de style ». C'est l'un de mes casse-têtes préférés, car c'est le genre de chose que j'ai vu des développeurs web – même expérimentés ! – trébucher encore et encore. Claude a donné une réponse parfaitement admirable.

La phase Style (Recalculer le style) est l'endroit où le navigateur fait correspondre les sélecteurs CSS au DOM et calcule le style final calculé pour chaque élément affecté. Elle est coûteuse indépendamment du fait que quelque chose bouge ou change de taille. Donc, si Style est élevé mais Layout est faible, vous payez probablement pour la correspondance de sélecteurs ou l'invalidation sur de nombreux éléments.

Cherchez la complexité des sélecteurs, la portée de l'invalidation, la fréquence des changements et la propagation des propriétés héritées. Activez les « Statistiques de sélecteurs » dans les paramètres de Performane de Dev Tools pour voir quels sélecteurs sont lents et contre combien d'éléments ils ont été testés – c'est la mesure suivante la plus utile.

Entités clés : Personnes : Axel Rauschmayer, Salma Alam-Naylor, Josh W. Comeau, Kent C. Dodds, Addy Osmani, Rachel Nabors, Lydia Hallie, Claude Sonnet