0
146
VistasMi sitio web está usando mucha CPU en mi computadora
Estoy usando django con css y js puros en este proyecto y parece que mi sitio web está consumiendo mucha CPU, también estoy usando una animación degradada con css:
body { background: linear-gradient(to right, rgb(247, 85, 202), rgb(18, 103, 248)); background-size: 400% 400%; animation: gradient 15s ease infinite; } .nav-link, .navbar-brand, .nav-link:hover, .navbar-brand:hover { background: linear-gradient(to right, rgb(247, 85, 202), rgb(18, 103, 248)); -webkit-background-clip: text; background-size: 400% 400%; color: transparent; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }Además, estoy usando un detector de eventos para todo el documento usando Javascript:
document.querySelectorAll('.edit').forEach((button) => { . . . }) document.querySelectorAll('.filter-green').forEach(like => {...})1 Respuestas
Responde la pregunta0
Su problema es el uso de la animación en el fondo degradado: si solo en el elemento del cuerpo, en mi sistema (portátil Windows 10/Edge razonablemente potente) no veo que se utilice tanta CPU, pero el uso de la GPU es muy alto (alrededor de 48%).
Si luego introduzco las animaciones en los otros dos elementos que tienen fondos animados, la GPU sube a entre 60% y 75%.
Así que empieza por decidir qué es lo que realmente tiene que tener un fondo animado. Sospecho que es el cuerpo lo que quieres mostrar y eliminar las animaciones de los otros elementos.
Todavía tiene un alto uso de CPU o GPU y sus usuarios no le agradecerán ese comportamiento de aplanamiento de la batería.
Le sugiero que descarte la idea de animar este tipo de degradado o, como mínimo, proporcione una forma para que sus usuarios lo activen y desactiven. En cualquier caso, presta atención a si te han pedido un sitio con poco movimiento: algunas personas reaccionan mal al movimiento en la pantalla.
Consulte MDN para obtener información sobre accesibilidad y animación.