Aceleración de hardware y la propiedad will-change

Para que lo tengan en cuenta que:

transition: transform 500ms ease;

es lo mismo que decir:

transition-property: trnasform;
transition-duration: 500ms;
transition-timing-function: ease;

Conclusiones de la clase

.
Hay algunas propiedades que no son buenas de animar o transicionar, pero esto porque pasa, no todas las propiedades son lo mismo?
.
La principal diferencia es que algunas propiedades tienen que lidiar con sus posiciones en la pantalla, lo que significa que el navegador tiene que modificar al DOM y mover algunos pixeles para que algunas propiedades funcionen, esto se debe a que el CSS engine funciona en 5 pasos:

• Parse: Aquí solo identifica todas las etiquetas del archivo.html
• Style: Aquí el engine agrega las etiquetas que vienen el el documento.css
• Layout: Aquí el engine identifica donde debería aparecer un nodo en la pantalla (aqui es donde se lidia con pixeles, tamaño de monitor, etc.)
• Paint: Aquí también se lidia con pixeles, ya que si un elemento tiene el background rojo, todos los pixeles dentro de ese elemento cambian.
• Composite & render: Esto es la parte final, aqui ya solo se renderiza y se muestran todos los pixeles en la pantalla.

.
Sabiendo esto, si nuestros elementos a transicionar lidian con pixeles y cambian de cierta forma el DOM, van a causar un mayor esfuerzo a nuestra computadora. Lo que se hace es trabajar con elementos que no dañen al DOM, como lo son opacity y transform.
.
Por ultimo, porque nosotros somo buena onda y el navegador nos cae bien, le podemos decir que se ponga trucha y que empiece a prepararse para optimizar ciertas transformaciones que nosotros sabemos se van a tener que hacer, eso lo hacemos con la propiedad will-change

Esto es ORO puro😊

Siempre me había preguntado como rayos hacia para arreglar esto, y jugaba mucho con los márgenes aunque sabia que no debía ser de esa forma.

¡Genial! 😃

will-change

Propiedad css para anticipar y preparar los cambios

Este tipo de optimizaciones puede aumentar la capacidad de respuesta de una página al realizar un trabajo potencialmente costoso antes de que realmente se requieran.
Propiedades

will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;    
will-change: opacity;          
will-change: left, top;      

La propiedad “will-change” admite múltiples valores, en cuyo caso se deben separar por comas:

.miele {will-change: transform, opacity, contents;}

Recomendación

No aplique will-change a demasiados elementos porque puede hacer que la página se ralentice o consuma muchos recursos.
“will-change” está destinado a ser utilizado como último recurso, con el fin de tratar de hacer frente a los problemas de rendimiento existentes. No debe usarse para anticipar problemas de desempeño.

Hola en esta paginas pueden informarse más sobre la propiedad will-change:
Ingles:
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Español:
https://escss.blogspot.com/2014/05/will-change-propiedad-css.html

Es la primera vez que, me lo explican de manera “coloquial”. Gracias.

MDN dice:
Don’t apply will-change to elements to perform premature optimization. If your page is performing well, don’t add the will-change property to elements just to wring out a little more speed. will-change is intended to be used as something of a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems. Excessive use of will-change will result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. This will lead to worse performance.
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Lo que no menciona es que esta propiedad debe usarse como ÚLTIMO RECURSO cuando estás teniendo problema de optimización con una página y no te queda de otra que probar esta propiedad, también dice que usarla en exceso en realidad puede empeorar el rendimiento del navegador. Documentación de MDN aquí

Notas de la clase

me resulta muy agradable cuando usa palabras tan paisas como “tembleque”, me siento algo identificado y me hace sonreír un poco

will-change está pensado para ser utilizado como último recurso, para intentar solucionar los problemas de rendimiento existentes. No debe utilizarse para anticiparse a los problemas de rendimiento.

❤La aceleración de hardware

La aceleración por hardware permite usar componentes específicos de tu ordenador para quitar trabajo al procesador de tu dispositivo. Uno de estos componentes puede ser una tarjeta gráfica, que puede usarse para renderizar o mostrar el contenido del navegador en tu pantalla.

🧡Propiedades al animar

Hay propiedades que se deben animar y otras que no, esto se debe a un proceso de renderizado, este proceso tiene consta de los últimos 3 pasos que son los indispensables al trabajar con animaciones, que son el layout, paint y composite.

Justamente estos 3 nos hablaran de que propiedades son adecuiadas o no, en lo general, las propeidades adecuadas son opacity y transform, por que estas solo necesitan del composite.

💛Problemas de la aceleración por hardware

• Las imágenes no cargan correctamente.
• En los vídeos, la imagen o el sonido no se reproduce correctamente.
• Algunas partes del navegador aparecen mal diseñadas.

💚Propiedad will-change

Es una propiedad de CSS para anticipar y preparar los cambios. ****Este tipo de optimizaciones puede aumentar la capacidad de respuesta de una página al realizar un trabajo potencialmente costoso antes de que realmente se requieran.

💙Lecturas Recomendadas

will-change en ingles

will-change español

Escribir

transition: transform 500ms ease;

Es lo mismo que escribir

transition-property: transform;

transition-duration: 500ms;

transition-timing-function: ease;

La aceleración de hardware

Es una funcionalidad de Chrome en donde el sistema comparte ciertas cargas con la GPU para liberar a la CPU. De esta manera, el navegar mejorará su rendimiento dejando las tareas de reproducción de videos, por ejemplo, a la GPU, librando al procesador de esta carga

Algo que creo importante destacar es que en la documentación de la MDN aclaran que la propiedad

will-change

solo debe ser usada como último recurso a la hora de tratar con un problema de rendimiento, y que no debería ser usado para anticiparlo. Osea que no lo empieces a abusar en cada transición o animación que hagas, solo cuando veas algún slowdown o sepas de alguna en específico que consuma muchos recursos.

<code> 
<style>
        button {
            background: palegoldenrod;
            width: 100px;
            height: 30px;
        }

        .better {
            will-change: transform;
            transition: transform 500ms;
        }

        .better:hover {
            transform: translateY(5px) ;
        }

        .worst {
            will-change: margin-top;
            transition: margin-top 500ms;
        }

        .worst:hover {
            margin-top: 5px;
        }
    </style>

Lo repliqué pero realmente no note ningún cambio

a mi tambien

les juro que no logro distinguir el temblor que dice la profe, al igual que en las clases anteriores

me parece excelente ver que hay mas de una forma de llegar al mísmo resultado pero con diferentes herramientas, y ya dependiendo de la aplicación o página podemos analizar cual herramienta utilizar…

Algo curioso para eso es que eso puede ser malo la optimizacion
"No aplique voluntad de cambio a demasiados elementos. El navegador ya se esfuerza al máximo para optimizar todo. Algunas de las optimizaciones más sólidas que es probable que estén vinculadas will-changeterminen utilizando una gran cantidad de recursos de una máquina y, cuando se usan en exceso como esta, pueden hacer que la página se ralentice o consuma una gran cantidad de recursos."
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Antes de ponerle el «will-change» y persiguiendo el botoncito «worst» con el mouse se puede ver el desplazamiento intermitente en cambio con el botoncito «better» hacía como una especie de rebote.
Aplicando el will-change en «worst» aleatoriamente hacía el rebote pero seguía con intermitencia.

La propiedad will-change no es una propiedad “estética” sino funcional. Esto es, lo que hace es facilitar el rendimiento del navegador a la hora de manejar las páginas y su renderizado

❤La aceleración de hardware

La aceleración por hardware permite usar componentes específicos de tu ordenador para quitar trabajo al procesador de tu dispositivo. Uno de estos componentes puede ser una tarjeta gráfica, que puede usarse para renderizar o mostrar el contenido del navegador en tu pantalla.

🧡Propiedades al animar

Hay propiedades que se deben animar y otras que no, esto se debe a un proceso de renderizado, este proceso tiene consta de los últimos 3 pasos que son los indispensables al trabajar con animaciones, que son el layout, paint y composite.

Justamente estos 3 nos hablaran de que propiedades son adecuiadas o no, en lo general, las propeidades adecuadas son opacity y transform, por que estas solo necesitan del composite.

💛Problemas de la aceleración por hardware

• Las imágenes no cargan correctamente.
• En los vídeos, la imagen o el sonido no se reproduce correctamente.
• Algunas partes del navegador aparecen mal diseñadas.

💚Propiedad will-change

Es una propiedad de CSS para anticipar y preparar los cambios. ****Este tipo de optimizaciones puede aumentar la capacidad de respuesta de una página al realizar un trabajo potencialmente costoso antes de que realmente se requieran.

La propiedad que necesitaba para mejorar y optimizar el rendimiento de mi pagina.

Le agregué animaciones y el rendimiento me habia quedado por los suelos. Con esto tips puedo saber qué utilizar, qué no y cómo lo puedo mejorar

Esta clase es MUY importante, vale oro. Gracias.

Lo hice y no noto mucha diferencia

Mi computadora es bastante potente y siempre tengo activada la aceleración por Hardware. Sin embargo, sí pude observar la diferencia. Es genial!

Clarisimo!!!

18.-Aceleración de hardware y la propiedad will-change

Al usar solo composite el navegador no se la complica y delega todo el trabajo a la GPU, que se encarga de optimizar la animación lo más que pueda, aún así este paso puede causar algunos problemas mejor conocidos como “aceleración de hardware”; para esto vamos a usar una propiedad llamada will-change que literalmente significa “cambiará” que le dice al navegador que tenemos propiedades que van a cambiar lo que le permite alistarse para optimizar el proceso.

Básicamente es más preferible usar translate que otra propiedad