No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aceleraci贸n de hardware y la propiedad will-change

18/20
Recursos

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

En la clase anterior, aprendiste que existen propiedades que se deben animar y otras que no, esto se debe a un proceso de renderizado, este proceso consta de varios pasos: JavaScript, Style, Layout y Composite. Los tres 煤ltimos determinan si son adecuados para una animacion, con respecto al rendimiento. Las propiedades recomendables son opacity y transform, porque estas solo necesitan del 煤ltimo paso.

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

La propiedad will-change de CSS sirve para anticipar y preparar los cambios de una transformaci贸n. Este tipo de optimizaciones puede aumentar la capacidad de respuesta de una p谩gina al realizar un trabajo potencialmente costoso en rendimiento.

En el siguiente ejemplo, observa la transici贸n con una propiedad no recomendable y luego agregando la propiedad will-change. 驴Notaste que la transici贸n no es fluida? 驴Qu茅 tanto tiembla el elemento?

El elemento con la propiedad no recomendable tiembla un poco porque la animaci贸n no es fluido y requiere de m谩s recursos, impactando en el rendimiento de la animaci贸n.

Documentaci贸n de will-change

Contribuci贸n creada por Andr茅s Guano, con aportes de Carlos Mazzaroli.

Aportes 28

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渨ill-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.
鈥渨ill-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 鈥渃oloquial鈥. Gracias.

Notas de la clase

me resulta muy agradable cuando usa palabras tan paisas como 鈥渢embleque鈥, me siento algo identificado y me hace sonre铆r un poco

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

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铆

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.

MDN dice:
Don鈥檛 apply will-change to elements to perform premature optimization. If your page is performing well, don鈥檛 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

<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

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

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.

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 鈥渆st茅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!

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

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 鈥渁celeraci贸n de hardware鈥; para esto vamos a usar una propiedad llamada will-change que literalmente significa 鈥渃ambiar谩鈥 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