Propiedades recomendadas y no recomendadas para animar
Al hacer animaciones debemos fijarnos que no sean demasiado costosas computacionalmente para que no parezcan inestables y poco fluidas.
Para ello, debemos comprender un concepto clave llamado: el proceso de renderizado.
Resulta que, como el navegador no entiende el código que hacemos, debe hacer una transformación de ese código para que finalmente pueda ser entendido y visualizado en la pantalla.
Esa transformación se hace en una serie de pasos como los que puedes ver a continuación:
Sin embargo, los pasos que nos interesan en este momento son los últimos 3: Layout, Paint y Composite. Cada uno cumple un papel muy importante, pero no todas las propiedades pasan por estos 3 procesos.
Si una propiedad debe pasar por el paso de Layout, obligatoriamente debe pasar por Paint y Composite también. Si una propiedad debe pasar por el paso de Paint, obligatoriamente debe pasar por Composite también. Pero, si una propiedad debe pasar por el paso de Composite, no debe pasar por ningún otro paso.
Con lo anterior, podemos darnos cuenta de que hay propiedades que requieren un costo mayor que otras al tener que pasar por más pasos. Puedes revisar el proceso de renderizado que realiza cada propiedad en esta página: https://csstriggers.com/. Revisemos algunas de ellas:
Propiedad height: En cada uno de los motores de renderizado, podemos darnos cuenta por la imagen de abajo que requiere de los pasos de Layout, Paint y Composite, lo cual es bastante costoso.
Propiedad background-color: Es una propiedad que no afecta el diseño (Layout) pero requiere una nueva capa de pintura (Paint), lo cual la hace una propiedad también costosa.
Propiedades transform y opacity: Estas dos propiedades sólo requieren del paso de Composite, lo cual las hace muy baratas de animar. Si necesitas modificar propiedades como width y left (propiedades costosas), puedes reemplazarlas usando la propiedad transform para tratar de lograr el mismo efecto.
Finalmente, si sabemos por cuáles pasos de renderizado pasa cada una de las propiedades, sabremos con exactitud cuáles propiedades son más costosas y menos recomendadas para animar (como height, width y background-color), como también, cuáles propiedades son menos costosas y más recomendadas para animar (como transform y opacity).
Creo que hay una contradiccion en la lectura, Se menciona que transform & opacity solo pasan por la etapa de composite, Si bien en el caso de transform es cierto , pero opacity en la misma imagen adjunta , dice que si ocasiona un Paint y luego ya pasa por el Composite
"But since is a visual property, it will cause a painting to occur"
Tambien he escuchado mencionar esto antes , Investigando un poco mas , Enconre esta respuesta donde se menciona que efectivamente causa un re-paint pero cuando se le cambia la
opacidad a cero el navegador lo ignora y salta al siguiente paso,
Hola Nilson ! Gracias por tu excelente pregunta. Este caso es algo especial, precisamente porque en general los motores de renderizado trabajan de la misma forma, pero algunos, hacen que una propiedad pase por 1 o más pasos, como en este caso. Adicional a esto, lo que se menciona en CSS Triggers es precisamente que esta propiedad al "pintar", debe sí o sí tener que pasar por el proceso de pintado, pero, el caso que mencionas es bastante interesante porque, qué sucede si queremos pasar de opacity: 1; a opacity: 0; ? Debemos pintar ? Esto también sucede con la propiedad visibility y, podríamos decir que, en efecto, el motor de renderizado analiza si debe pintar o no, y dependiendo de eso, hace ese proceso o lo ignora.
Resumen:
Para hacer animaciones eficientes, debemos evitar propiedades que sean costosas computacionalmente y utilizar aquellas que son más económicas. El proceso de renderizado en los navegadores consta de varios pasos, pero los más importantes son Layout, Paint y Composite. Algunas propiedades requieren pasar por más pasos, lo que las hace más costosas de animar, como height, width y background-color. En cambio, propiedades como transform y opacity son más baratas de animar ya que solo requieren del paso de Composite.
El primer paso javascript entiendo es todo lo referente a javascript por lo que un cambio de alguna propiedad utilizando javascript utilizarái muchos más recursos que usando css directamente, por ejemplo si se quiere cambiar el color de un elemento hace tiempo utilizabamos javascript pero ahora usando por ejemplo el :hover, resulta en muchos menos recursos.... lo he entendido bien, sería así?
Costosas computacionalmente, es decir, que no consuman muchos recursos de nuestra computadora, porque algunas animaciones pueden consumir más o menos recursos, y recuerda que no todos tienen computadoras tan buenas para correr esas animaciones :D
Debes evitarlo siempre que busques crear transiciones o movimientos continuos en tu interfaz, ya que recalcular la geometría de la página es la tarea más pesada para el navegador. Si tu animación se ve entrecortada en dispositivos móviles, es muy probable que estés alterando propiedades de Layout como márgenes o bordes. Reserva estos cambios estructurales solo para interacciones estáticas o redimensionamientos de pantalla.
¡Maquina de CSS de Mozilla está escrita con Rust! También algunas blockchain 0.0 por la eficiencia de procesos y de memoria, que noticia, no me lo esperaba.
lock
lock
lock
lock
lock
