Rendimiento: propiedades transformables frente a propiedades que provocan repintado
Aprenda qué propiedades cuentan con aceleración de GPU y cuáles provocan repintados costosos del layout.
Rendimiento: propiedades transformables frente a propiedades que provocan repintado es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
El pipeline de renderizado
Los navegadores renderizan en tres etapas: Layout (tamaño y posición) → Paint (píxeles) → Composite (combinación de capas de la GPU). Animar propiedades que activan etapas anteriores es costoso.
Propiedades que activan Layout
Cambiar estas propiedades obliga al navegador a recalcular el layout de toda la página o de una parte potencialmente extensa. Evite animarlas:
width,heightmargin,paddingtop,leftfont-sizedisplay
Propiedades que activan Paint
Estas propiedades omiten el layout, pero vuelven a pintar los píxeles. Su coste es moderado:
background-colorcolorbox-shadowborder
Propiedades exclusivas de Composite
Estas propiedades omiten tanto el layout como el paint: el navegador solo necesita componer capas rasterizadas previamente. Son muy económicas y están aceleradas por la GPU:
transformopacity
Regla de oro de las animaciones CSS
Para conseguir animaciones fluidas a 60 fps, anime únicamente transform y opacity. Use transform: translate() en lugar de top/left, y opacity en lugar de desvanecimientos con display.
<div class="box demo-active">Box</div>Propiedad will-change
will-change indica al navegador que promocione un elemento a su propia capa de GPU antes de que comience la animación, lo que evita un «destello de promoción» durante la animación.
<div class="animated">Animated</div>will-change: auto
Establezca will-change: auto o elimine por completo la propiedad cuando terminen las animaciones. Mantener demasiados elementos promocionados desperdicia memoria de la GPU.
Medición con DevTools
Use la pestaña Performance de Chrome DevTools para grabar e inspeccionar los tiempos de los fotogramas. La pestaña Rendering puede activar el parpadeo de pintura (una superposición verde) para mostrar qué elementos se vuelven a pintar en cada fotograma.
transform en lugar de top/left
La optimización más importante consiste en reemplazar las animaciones de posición por transform:
<div class="fly demo-active">Fly</div>Coste de las transiciones de color
Las transiciones del color de fondo activan el repintado, pero no el layout. Son aceptables para elementos pequeños. Para fondos grandes, considere usar un pseudoelemento con una transición de opacity:
<button class="btn demo-active">Hover me</button>Propiedad contain
La propiedad contain indica al navegador que un elemento y su subárbol son independientes. Esto limita el alcance de la invalidación del layout y mejora el rendimiento del repintado.
<div class="widget">Widget</div>Comprobación rápida
¿Qué dos propiedades CSS se pueden animar en la etapa Composite sin activar el layout ni el paint?
Repaso
Animar propiedades del layout (width, top, margin) activa recálculos costosos. Las propiedades de paint (color, background) son más económicas. Solo transform y opacity se animan en la etapa Composite de la GPU sin activar el layout ni el paint. Prefiera siempre estas propiedades para conseguir animaciones fluidas y eficientes.
Preguntas frecuentes
¿La lección «Rendimiento: propiedades transformables frente a propiedades que provocan repintado» es gratis?
Sí — el texto completo de «Rendimiento: propiedades transformables frente a propiedades que provocan repintado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Rendimiento: propiedades transformables frente a propiedades que provocan repintado»?
Aprenda qué propiedades cuentan con aceleración de GPU y cuáles provocan repintados costosos del layout. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Rendimiento: propiedades transformables frente a propiedades que provocan repintado»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Duración y temporización de las transiciones
- Funciones de easing: ease, linear y cubic-bezier
- Transición de varias propiedades
- Rendimiento: propiedades transformables frente a propiedades que provocan repintado