attribute - title html css

Mejora del rendimiento de transición de CSS3

Question

¿Alguien tiene trucos o consejos sobre cómo mejorar la suavidad de la animación CSS3? Estoy deslizando la página completa hacia la izquierda utilizando una transición css y es un poco más juttery de lo que me gustaría. Es un elemento único pero contiene numerosas esquinas redondeadas, degradados, sombras paralelas, etc., ya que es una página complicada.

En flash actionscript, hay una propiedad útil cacheAsBitmap que convierte el elemento animador en un mapa de bits antes de que comience la animación. Esta es una bendición y acelera significativamente ciertos tipos de animación. ¿Hay algo como esto para CSS? ¿Hay otros consejos para mejorar el rendimiento sin simplificar el diseño de la página? Estoy pensando en cosas como habilitar la aceleración de hardware o marcar la animación como de alta prioridad para el navegador.

Answer 1

Antes de la directiva de will-change , no podría hacerlo de la misma manera literal que puede hacerlo en otros idiomas. El navegador (o al menos Webkit) se ocupó de representar la página dibujando varias capas. En teoría, debería ser lo suficientemente inteligente como para elaborar las capas para usted, pero a veces era una buena idea forzar algo en su propia capa.

Algunas veces eso funcionó, otras veces no, dependiendo de lo que está pasando exactamente.

De todas formas.

En CSS, una forma de forzar algo en una capa es transformarla usando una transformación 3D. Una estrategia común es agregar:

transform: translateZ(0);

o el equivalente:

transform: translate3d(0,0,0);

o un poco loco:

transform: rotateZ(360deg);

o los traducidos combinados con:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

si las cosas son flickery

Estos crean una nueva capa ya que eso es lo que define la especificación. De http://www.w3.org/TR/css3-transforms/#transform-property ,

"Cualquier valor que no sea ''ninguno'' para la transformación da como resultado la creación de un contexto de apilamiento y un bloque de contención".

Todo esto necesita una prueba cuidadosa, y no es algo que se pueda colgar siempre de algo que pueda necesitarlo: a veces es mejor, a veces no es diferente y a veces es peor.

¡Buena suerte!

Answer 2

Desafortunadamente, esto está limitado por una serie de cosas, muchas de las cuales no puedes controlar:

• Rendimiento del navegador: todos los navegadores se comportan de manera diferente con CSS3 y Javascript. He encontrado que Safari está entre los mejores (¿sorprendentemente?) En términos de rendimiento de representación de CSS3, con Chrome en segundo lugar y Firefox en tercero.
• Rendimiento de la GPU: algunos navegadores ahora descargan operaciones de animación y transición a la GPU, en cuyo caso la GPU limita la velocidad / el rendimiento. Si está en una GPU Intel integrada, no es probable que sea muy suave en comparación con una tarjeta gráfica NVIDIA o AMD discreta.
• Rendimiento de la CPU: para situaciones en las que los navegadores NO se descargan a la GPU, se usa la CPU, en cuyo caso la CPU se convierte en el cuello de botella.
• Número de otras pestañas / ventanas abiertas: muchos navegadores comparten procesos en las pestañas, y otras animaciones u operaciones que consumen CPU en otras pestañas / navegadores podrían crear una degradación del rendimiento.

La mejor manera de mejorar el rendimiento actualmente es limitar la cantidad de cosas que se animan / hacen transiciones de una sola vez.

Answer 3

Por lo que he leído, las sombras son uno de los mayores éxitos de rendimiento en este momento. Puede intentar agregar / eliminar una clase al inicio / final de la animación para desactivar todas las sombras por un momento y volver a atenuarlas después de los movimientos.

Answer 4

Ya que

• Cromo 36
• Firefox 38
• Opera 30
• Navegador de Android 40
• Chrome para Android 42

puede usar will-change para informar al navegador para prepararse para los elementos de aceleración de hardware.

.drawer {
    will-change: transform;
}

La propiedad will-change permite informar al navegador con anticipación sobre los tipos de cambios que probablemente realice en un elemento, para que pueda configurar las optimizaciones adecuadas antes de que sean necesarias, evitando así un inicio no trivial -el costo adicional que puede tener un efecto negativo en la capacidad de respuesta de una página. Los elementos se pueden cambiar y renderizar más rápido, y la página podrá actualizarse rápidamente, lo que resultará en una experiencia más suave.

Para obtener más información, puede leer el artículo completo de esa cita.