Esta es la segunda parte del artículo.Lea la primera parte aquí.
Sé que me escucho a mí mismo como un spoiler, pero ¿no todos queremos un sitio web más actuante?Un juguete popular son temporizadores y debemos reducir su uso (si no evitar).Temporizador despierta la CPU.El temporizador de JavaScript demuestra ser un buen punto de partida para que los desarrolladores estadounidenses comiencen a optimizar.
¡A todos nos encanta cuando parpadea y brilla!Pero aún más a menudo es en este punto.Contenido animado continuamente, como GIF animados y tocando automáticamente videos, continuamente (a menudo innecesario) dibujo de electricidad (a menudo innecesario).El pequeño gif girador desencadena continuamente la pintura en el navegador, incluso si no podemos verlo.
Si necesitamos animaciones, debemos usar animaciones declarativas (animaciones y transiciones de CSS) si es posible.El navegador puede optimizar esto si el elemento animado no es visible, y son más eficientes que las animaciones controladas por script.Sin embargo, las animaciones CSS también son más limitadas que sus grandes homólogos de JavaScript.
Si es posible, debemos evitar las propiedades alentadoras que activen los eventos de diseño o pintura.Sin embargo, esto significa limitar las animaciones a la opacidad o transformar [1]: el navegador puede optimizar tanto en gran medida [2].
Cuando se trata de la sostenibilidad de un sitio web, puede practicar o hacer sin.Construya la animación opulenta de un pequeño declarativo reducido con CSS.
.Box { / * Connect Animation * / Nombre de animación: Boxing Lider;/ * Establecer duración */ animación causando: 1300ms;/ * Tasa de repetición */ animación-northrayal Count: Infinite;/*...Una dirección de ida y vuelta */ animación: alternativa;} @Keyframes Boxing Lider {0% {Transform: Translate (0, 0);Opacidad: 0.3;} 25% {Opacidad: 0.9;} 50% {transformar: traducir (100px, 100px);Opacidad: 0.2;} 100% {Transform: Translate (30px, 30px);Opacidad: 0.8º;}}
También debemos evitar las encuestas populares cuando se trata de obtener actualizaciones regulares de un servidor.¡Estamos en 2020 y se nos permite usar tecnologías como webockets, eventos de seno de servidor o obtener una conexión permanente [3]!Un sitio web que funciona continuamente, incluso si debe estar inactivo, también reacciona menos a las interacciones del usuario.¡Minimizar la actividad de fondo mejora la capacidad de reacción y al mismo tiempo la batería de por vida-ganar-ganar [4]!
