Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Consejos para mejorar el rendimiento de animación CSS y JS

Las animaciones personalizadas pueden ayudar a que un sitio web se destaque entre la competencia, pero los activos mal optimizados pueden conducir a problemas de rendimiento que ahuyentan a los usuarios. Si alguna de sus animaciones se procesa a menos de 60 cuadros por segundo, sus visitantes lo notarán y la experiencia del usuario se verá afectada. Esta guía explica cómo mantener sus animaciones CSS y JavaScript funcionando sin problemas para todos.

Animaciones CSS vs animaciones JavaScript#

Las animaciones realizadas con JavaScript a veces se denominan animaciones imperativas , y las realizadas con CSS se denominan animaciones declarativas. Las animaciones CSS son manejadas por el hilo compositor del navegador en lugar del hilo principal responsable de la pintura y el estilo. En consecuencia, tales animaciones no se ven afectadas por las tareas más caras del hilo principal. Por supuesto, las animaciones que desencadenan los eventos de pintura o diseño requerirán trabajo desde el hilo principal, lo que niega los beneficios de usar animaciones CSS.
JavaScript, por otro lado, siempre se ejecuta por el hilo principal. Sin embargo, JavaScript le brinda un mayor control sobre las animaciones, por lo que es mejor usarlo en algunas situaciones. Si bien CSS es ideal para transiciones simples, JavaScript se recomienda para animaciones con efectos avanzados como el rebote. Las animaciones que permiten al usuario pausar o rebobinar también deben animarse con JavaScript. JavaScript es necesario para implementar ciertos efectos como el desplazamiento de paralaje. Con la ayuda de la API de animaciones web , puede crear animaciones complejas para aplicaciones orientadas a objetos. También puede usar JavaScript para controlar las animaciones CSS.

Consejos de animación de JavaScript#

1. Use requestAnimationFrame()#

En lugar de usar setTimeOut()setInterval(), use el método JavaScript nativo requestAnimationFrame()para ejecutar su código de animación en el mejor momento para el navegador. Este método elige la velocidad de fotogramas adecuada para el dispositivo del usuario, por lo que los visitantes móviles verán una velocidad de fotogramas diferente a la de los usuarios de escritorio.

2. Desacoplar animaciones de eventos#

El código responsable de manejar eventos como el desplazamiento debe mantenerse separado de su código de animación. HTML5Rocks tiene una excelente redacción sobre esto que profundiza en cómo debe desacoplar los eventos del código que maneja requestAnimationFrame().

3. Mantenga su código JavaScript conciso#

Tenga cuidado al agregar grandes porciones de JavaScript a su página web. Si su código se vuelve difícil de manejar, puede intentar usar trabajadores web para ejecutar animaciones de JavaScript en un hilo diferente.

4. No use jQuery#

Manténgase alejado de las bibliotecas de animación más antiguas como jQuery. Si está buscando algo similar, Velocity.js funciona básicamente de la misma manera, pero es mucho más rápido y admite más funciones. Reemplazar $ .animate () de jQuery con $ .velocity () hará una gran diferencia para los usuarios de dispositivos móviles. Web Designer Depot tiene una lista casi exhaustiva de herramientas de animación para JavaScript .

Elegir qué propiedades CSS animar#

Las animaciones continuas pueden consumir una cantidad significativa de recursos, pero algunas propiedades CSS son más costosas de animar que otras. Cuanto más duro debe trabajar un navegador para animar una propiedad, más lenta será la velocidad de fotogramas. Por lo tanto, elegir las propiedades CSS correctas para animar puede tener un gran impacto en el rendimiento de la página.

Hay tres tipos principales de propiedades CSS:#

  • Propiedades de diseño : determinan el tamaño y la ubicación de los elementos de la página. Las animaciones que cambian el ancho y la altura de un elemento pueden afectar la ubicación de otros elementos de la página, lo que puede causar una reacción en cadena conocida como "diseño de golpe". Dado que las animaciones que cambian el diseño de la página son especialmente costosas, es mejor evitarlas.
  • Propiedades de pintura : definen la apariencia de los elementos de la página. Realizar cambios en propiedades como el color requiere volver a pintar, lo que puede ser costoso. Dicho esto, las animaciones simples que requieren que se vuelva a pintar una pequeña parte de la ventana gráfica pueden tener un impacto insignificante en el rendimiento general. Las animaciones más grandes que requieren volver a pintar pueden no valer la pena.
  • Las propiedades compuestas , que incluyen transformación y opacidad, son sus mejores amigos para crear animaciones CSS con un costo mínimo. Con transform, puede escalar y rotar animaciones sin afectar el diseño de la página. Intente utilizar propiedades compuestas para animaciones siempre que sea posible. Con un poco de pensamiento creativo, te sorprendería lo que puedes lograr con solo estas propiedades. ISL.co tiene una publicación de blog útil que explica cómo su equipo convirtió una animación de diseño irregular en una animación compuesta suave.
CSS Triggers tiene un gráfico útil que explica qué procesos son activados por las propiedades individuales de CSS en varios navegadores.
css triggers
Puede ayudarlo a determinar si sus animaciones causarán cambios en la pintura o el diseño. Para obtener los mejores resultados, intente limitarse a usar estas cuatro propiedades compuestas:
  • posición
  • escala
  • rotación
  • opacidad
Puede hacer casi todo con estas cuatro opciones que puede usar con las propiedades de diseño sin afectar el posicionamiento de otros elementos de la página. Por ejemplo, para cambiar el tamaño de una imagen, use scale () en lugar de width ().

Consejos de animación CSS#

1. Evitar animaciones simultáneas#

Es posible que las animaciones que se ejecutan sin problemas de forma aislada no funcionen tan bien en una página junto con docenas de otras animaciones. Es probable que más de dos animaciones al mismo tiempo causen retraso. Por lo tanto, cronometrar sus animaciones para que no se ejecuten todas a la vez es vital para mantener un rendimiento constante. Esto se puede lograr agregando retrasos en la transición . Descubrir cómo coreografiar de manera óptima sus animaciones puede requerir un poco de prueba y error, pero el aumento de rendimiento que obtendrá valdrá la pena.

2. Examina tus animaciones en cámara lenta#

Si una animación se ve bien en cámara lenta, se verá genial a velocidad normal. Disminuir la velocidad de una animación puede ayudarlo a identificar mejor los problemas de representación.

3. Retrasar todas las animaciones por una fracción de segundo#

Dado que el navegador está muy ocupado cuando su página comienza a cargarse, retrasar todas las animaciones hasta unos cientos de milisegundos después del evento de carga inicial puede marcar una diferencia notable en el rendimiento general de la página.

4. No enlace las animaciones CSS para desplazarse#

Las animaciones que siguen la ventana gráfica a medida que el usuario se desplaza no solo son molestas, sino que también reducen el rendimiento de todo lo demás en la pantalla.

5. Combina CSS con SVGs#

Los gráficos vectoriales escalables, o SVG, son excelentes para animaciones, ya que se pueden escalar sin degradar la resolución. Puede crear SVG en un programa como Adobe Illustrator y aplicar CSS para modificar su apariencia. Solo otra razón para elegir SVGs sobre fuentes de iconos .

Cuando usar will-change#

Si ha intentado todo lo demás y todavía tiene problemas de rendimiento, puede intentar agregar la will-changepropiedad a sus animaciones. Como su nombre lo indica, will-change indica que las propiedades de un elemento cambiarán para que el navegador pueda realizar los preparativos adecuados. Enumere las propiedades específicas que cambiarán así:
.element {
    will-change: transform, opacity;
}
Dado que el uso will-changeconsume recursos, tenga en cuenta que el uso excesivo puede conducir a más problemas de rendimiento. Ponerlo antes de cada animación por defecto no es recomendable. Úselo solo will-changecomo último recurso para optimizar el rendimiento de la página.

Pon a prueba tus animaciones#

Las pruebas de rendimiento deben ser un proceso continuo al crear animaciones para su aplicación web. Cuanto más espere para identificar los problemas de representación, más difícil será identificar la raíz del problema.
Las herramientas de desarrollador para Chrome , Firefox y Safari ofrecen un desglose cuadro por cuadro de los eventos de pintura y renderizado en sus pestañas de red. Esta información puede ayudarlo a optimizar las animaciones a medida que las diseña. Si está usando Chrome, busque en la pestaña Renderizado en la consola de DevTools características adicionales como un medidor FPS.
fps meter
El tamaño de la pantalla del usuario tiene un gran impacto en cómo se muestran las animaciones, así que asegúrese de probar su proyecto en múltiples plataformas, incluidos los dispositivos móviles.

Resumen#

Optimizar animaciones para la web es un proceso relativamente sencillo. Elegir animaciones atractivas que atraerán a los nuevos visitantes a permanecer en su sitio web es más difícil porque debe tener en cuenta a su audiencia. Además de realizar un seguimiento de cómo el rendimiento técnico de su sitio afecta las conversiones, tome nota del impacto que las animaciones web tienen en sus resultados. Si sus animaciones no están ayudando, entonces solo están desperdiciando recursos mejor gastados en otros lugares.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas