Rendimiento y Renderizado
Escribe CSS que renderiza rápido y se mantiene fluido
Cómo CSS Afecta el Rendimiento
Algunos cambios de CSS activan layout (reflujo), otros solo repintado y algunos pueden ser compuestos eficientemente. Conocer la diferencia ayuda a mantener la UI fluida.
Propiedades Rápidas vs. Lentas
- Rápidas:
transform,opacity(composición) - Más lentas:
background-color,box-shadow(pintado) - Más lentas:
width,height,top,left(layout)
Contención y Visibilidad de Contenido
Omite el renderizado de contenido fuera de pantalla hasta que sea necesario:
.card {
content-visibility: auto;
contain-intrinsic-size: 300px;
}Rendimiento de Selectores
Los selectores complejos pueden ser más lentos de emparejar. Prefiere selectores basados en clases y mantén el anidamiento superficial.
/* Preferir */
.card-title { font-weight: 600; }
/* Evitar cadenas profundas */
main .sidebar ul li a span { }✓ Mejores Prácticas de Rendimiento
- ✓ Anima con
transformyopacity. - ✓ Evita sombras de caja grandes y complejas.
- ✓ Mantén los selectores simples y evita anidamiento profundo.
- ✓ Usa
content-visibilitypara páginas largas.