w3schools - CSS `will-change`-cómo usarlo, cómo funciona

import style in css

Question

Encontré CSS will-change ^{documentos W3.org , la} propiedad de ^{documentos MDN} (que ya funciona en Chrome y es parcialmente compatible con Firefox y Opera) pero no estoy realmente seguro de cómo funciona. ¿Alguien sabe algo más sobre esta cosa misteriosa?

Acabo de leer que le permite al navegador prepararse para el cálculo sobre el elemento en el futuro. No quiero malinterpretarlo. Entonces tengo algunas preguntas.

1. ¿Debo agregar esta propiedad a la clase de elemento o su estado de desplazamiento?

   .my-class{
       will-change: ''opacity, transform''
   }
   .my-class:hover{
       opacity: 0.5
   }
   .my-class:active{
       transform: rotate(5deg);
   }

   O

   .my-class{
       ...
   }
   .my-class:hover{
       will-change: ''opacity''
       opacity: 0.5
   }
   .my-class:active{
       will-change: ''transform''
       transform: rotate(5deg);
   }

2. ¿Cómo puede aumentar el rendimiento de un navegador? Teóricamente, cuando se carga CSS, el navegador ya "sabe" qué sucederá con cada elemento, ¿no?

Si puedes agregar algún buen ejemplo que ilustre cómo usarlo de manera eficiente, te lo agradeceré :)

Answer 1

Ahora, con la ayuda de CSS, puede hacer varias animaciones, y a veces esta animación se convierte en un cuello de botella para una CPU. Entonces, en lugar de hacer este trabajo en una CPU, sería bueno usar GPU para esta tarea. Y no hace mucho tiempo, la gente comenzó a usar un truco para hacer una transformación 2D haciendo algo como:

.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

Esto hizo que un navegador pensara que está haciendo una transformación 3D, y debido a que todas las transformaciones 3D usan GPU, esto descargará la CPU. Esto parece hacky (porque de hecho lo es) y la propiedad will-change cambiará esto informando al navegador que busque cambios en el futuro y que optimice y asigne memoria en consecuencia.

Basado en el borrador del W3C ,

La propiedad CSS de cambio de voluntad ... permite a un autor informar a la UA con anticipación de los tipos de cambios que es probable que realicen en un elemento. Esto permite que la UA optimice la forma en que manejan el elemento con anticipación, realizando un trabajo potencialmente costoso preparándose para una animación antes de que la animación realmente comience.

Una buena idea para usar will-change es informar al navegador de antemano qué cambios se pueden esperar en un elemento. Esto permite que el navegador realice las optimizaciones adecuadas de antemano, lo que conduce a una representación más rápida.

Esta información fue tomada de esta excelente explicación sobre la propiedad de will-change . El artículo tiene ejemplos adicionales cuando es bueno usarlo y cuando es inútil o incluso perjudicial.

Answer 2

La mejor solución para mí:

transform : translate(calc(-50% + 0.5px), calc(-50% + 0.5px));

Pero, esta solución tiene problemas con calc en ios safari en una posición fija puede causar un alto consumo de batería

Answer 3

No copiaré y pegaré el article completo aquí, pero aquí hay una versión tl; dr:

Especificar qué es exactamente lo que desea cambiar le permite al navegador tomar mejores decisiones sobre las optimizaciones que necesita para estos cambios particulares. Obviamente, esta es una mejor manera de lograr un aumento de velocidad sin recurrir a piratas informáticos y forzar al navegador a crear capas que pueden o no ser necesarias o útiles.

Cómo usarlo:

will-change: transform, opacity;

Cómo no usarlo:

will-change: all;

.potato:hover {
  will-change: opacity;
  opacity:1;
}

La especificación will-change el desplazamiento no tiene efecto:

Establecer will-change en un elemento inmediatamente antes de que cambie tiene poco o ningún efecto. (En realidad, podría ser peor que no configurarlo en absoluto. ¡Podría incurrir en el costo de una nueva capa cuando lo que está animando no hubiera calificado previamente para una nueva capa!)

Answer 4

Pasé algún tiempo buscando cómo funciona la propiedad will-change y cómo la usamos. Espero que sea un resumen útil. Gracias a todos por las respuestas.

1. Hack de capas / Hack de transformación nula

En los ''tiempos antiguos'' (como hace 2 años) alguien descubrió que puedes dibujar tu animación CSS más rápido.

¿Como funciona?

Si agrega transform: translateZ(0) a un selector css, obligará a un navegador a mover el elemento con este selector a la nueva capa de compositor. Además, aumentará el rendimiento (en la mayoría de las situaciones, use las potencias de la GPU en lugar de la CPU). Lea más aquí .

2. Bye Bye hacks, bienvenido "will-change:"

Probablemente, es demasiado pronto para decir adiós a Layer Hack, pero esta vez llegará pronto. La nueva propiedad will change apareció en las especificaciones de CSS y será un gran sucesor del hack de capa.

3. Soporte de navegador

Por ahora, está disponible en Chrome y Opera y también es parcialmente compatible con Firefox.

4. Cómo usarlo adecuadamente

No use will-change en ningún lugar de su CSS hasta que haya completado la implementación de sus animaciones. Solo entonces debería volver a su CSS y aplicar will-change. More

Este es probablemente el consejo más valioso que puede obtener.

No tiene sentido usarlo directamente antes de que comience una acción, por ejemplo, agregándolo al estado :hover de un selector. Porque el navegador no tendrá tiempo necesario para preparar la optimización antes de que ocurra el cambio. El navegador necesitará aprox. 200 ms para aplicar la optimización, por lo que, por ejemplo, es mejor agregar will-change a un elemento cuando un elemento primario está en estado de desplazamiento. article

Ejemplo:

 .parent:hover .change{
     will-change: opacity;
 }
 .change:hover{
    opacity: .5;
 }

Necesitas usarlo con moderación. Si desea optimizar todo, los resultados serán opuestos a los esperados. will-change obliga al navegador a mantener activada la optimización y reservar recursos como la memoria para cambios en el futuro que tal vez nunca sucedan. Se recomienda desactivar el cambio de will-change después, cuando ya no sea necesario, por ejemplo, cuando finalice la animación.

Puede hacerlo fácilmente usando JavaScript document.getElementById(''my_element_id'').style.willChange = off;

Answer 5

Por lo que sé...

1. Es una alternativa para translate-z: 0.
2. No sé sobre hover, pero afaik es mejor usarlo en propiedades que JS está cambiando gradualmente, cambiando la opacidad, la posición durante el desplazamiento, etc.
3. Esta propiedad no debe usarse en exceso, especialmente en teléfonos, tabletas, ya que usar esto en demasiados elementos puede causar problemas de rendimiento.
4. Se recomienda que JS elimine / desactive esta propiedad cuando ya no sea relevante.

Entonces, el uso de ejemplo sería aplicar eso en algún punto de desplazamiento, con scrollTop: 400, luego animar gradualmente la opacidad y, por ejemplo, scrollTop: 500, deshabilitar will-change nuevamente.

Fuente: shoptalkshow podcast - mencionan este artículo - article - que es probablemente una mejor fuente de información que mi publicación: D