Muchos de los educadores que admiro en el espacio web frontend parecen estar retirándose o reduciendo sus esfuerzos: Axel Rauschmayer, Salma Alam-Naylor, Josh W. Comeau, por nombrar algunos. Otras luminarias conocidas como Kent C. Dodds, Addy Osmani, Rachel Nabors y Lydia Hallie han pasado de hablar sobre desarrollo frontend a hablar sobre… bueno, adivina.

Nunca me gané la vida hablando de desarrollo web, pero tengo este blog, y he dado charlas en conferencias y podcasts sobre cosas que me apasionan. Recientemente, por ejemplo, mi pasión era explicar todos los entresijos del rendimiento de CSS: cómo funciona el shadow DOM, cómo funciona el motor de estilos del navegador, las trampas de CSS-in-JS, etc.

Solo por diversión, decidí preguntarle a Claude Sonnet cómo manejaría una traza de Chrome con altos costos de "Cálculo de Estilo". Este es uno de mis acertijos favoritos, porque es el tipo de cosa que vi a desarrolladores web – ¡incluso experimentados! – tropezar una y otra vez. Claude dio una respuesta perfectamente admirable.

La fase de Estilo (Recalcular Estilo) es donde el navegador empareja los selectores CSS con el DOM y calcula el estilo final calculado para cada elemento afectado. Es costosa independientemente de si algo realmente se mueve o cambia de tamaño. Entonces, si Estilo es alto pero Diseño es bajo, probablemente estés pagando por el emparejamiento de selectores o la invalidación en muchos elementos.

Busca complejidad de selectores, alcance de invalidación, frecuencia de cambios y propagación de propiedades heredadas. Habilita "Estadísticas de Selectores" en la configuración de Rendimiento de Dev Tools para ver qué selectores son lentos y contra cuántos elementos se probaron – esta es la siguiente medición más útil.

Entidades clave: Personas: Axel Rauschmayer, Salma Alam-Naylor, Josh W. Comeau, Kent C. Dodds, Addy Osmani, Rachel Nabors, Lydia Hallie, Claude Sonnet