será este código animación repetitiva lento mi sistema ?:¿Las propiedades de CSS3 como animate también son intensivas de la CPU?
@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}
¿Son todas las propiedades de CSS3 CPU?
Gracias.
Evite el uso de la sombra de cuadro & sombra de texto. No intente animar toda la página o el elemento del cuerpo y use translate3d, scale3d, rotate3d ya que son acelerados por hardware en computadoras y dispositivos móviles. Como se indicó anteriormente, evite el OVERUSE de las propiedades de animación. Sin embargo, dudo que uno o incluso cuatro elementos infinitamente animados ralenticen su página.
Improving the Performance of your HTML5 App
ACTUALIZACIÓN
¡Cuidado! Los navegadores ahora están abandonando la aceleración de hardware para las propiedades de transformación 3D. Deberá utilizar otros métodos para optimizar sus aplicaciones a partir de ahora y en el futuro.
marcado como correcto, para el listado de propiedades. – rajkamal
Tengo curiosidad. ¿De dónde sacaste esa información? ¿Puedes mostrar un enlace a una referencia donde se dice que los navegadores están abandonando la aceleración de la GPU para la renderización de la transformación 3D? Dondequiera que leo, veo lo opuesto. –
Para ejemplo, vea [esta página] (http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome) sobre la aceleración de GPU en Chromium. –
Cada navegador tiene su propia implementación de CSS3 y las formas en que se procesan y procesan los efectos varían. Un navegador se ahogará en ciertas cosas mientras que otro podría no hacerlo. Lo mejor es que sea prudente: no use en exceso los efectos de CSS3 y todo estará bien. Si realmente está preocupado por el rendimiento, siempre puede intentar probar el sitio usando una computadora portátil vieja o algo así. Si se estrangula, es posible que haya exagerado con los degradados o algo así.
Como dice uno de mis compañeros programadores (en lo que respecta a las aplicaciones C++, pero es perfectamente aplicable aquí): no se preocupe por los problemas de rendimiento hasta que realmente los note :).
De hecho, depende del sistema y de cómo uses las propiedades. Las imágenes de fondo fijas grandes pueden hacer un desplazamiento realmente espasmódico incluso en sistemas modernos, si no recuerdo mal. –
Compruebo el uso de la CPU del navegador cuando veo la animación. Algunas características pueden no ralentizar el sistema, pero otras pueden.
Es cierto que algunos navegadores pueden actuar diferente en ciertas cosas. Sin embargo, probé usando una animación de spinning, y usé aproximadamente un 30-50% de uso de CPU en mi máquina de 3.5ghz, probando con múltiples navegadores. Ya sea que se haya establecido en iteración infinita o no, no importó.
A partir de ahora, ciertas funciones pueden ralentizar la máquina y no ser fáciles de usar. Es posible que desee esperar a que se optimicen estas funciones antes de usarlas. Tengo la sensación de que fueron diseñados ineficientemente, porque la animación se ve sin problemas incluso en mi iPod touch.
También tenga en cuenta que mis navegadores no estaban ejecutando la aceleración de la GPU en ese momento, lo que podría ser un factor.
Tenía una página web que tenía unos 15 elementos que parecían temblar como un terremoto. La animación está en incrementos del 10% y dura 1 s. Se repite en un ciclo infinito. Noté que el uso del procesador se disparaba. Así que yo diría que sí, pero depende de la animación,
Si sólo utiliza 3D transforma en sus animaciones CSS3, por ejemplo:
@keyframes animation {
0% { transform: translate3d(288px,123px,0px) rotate(10deg) scale(1,1) }
50% { transform: translate3d(388px,123px,0px) rotate(20deg) scale(2,2) }
100% { transform: translate3d(488px,123px,0px) rotate(30deg) scale(3,3) }
}
el uso de la CPU será plana después de haber dado instrucciones al navegador para juega la animación Esto se debe a que las transformaciones 3D siempre se procesan a través de la aceleración de la GPU por los navegadores. (Nota: es suficiente establecer una transformación 3D como la anterior para activar la aceleración de la GPU).
La siguiente instantánea se toma mientras se ejecuta el cromo CPU perfilador:
Como se puede ver, la actividad de la CPU es plana después de la animación CSS3 ha sido instruido usando JavaScript (en este caso la animación fue 2 s larga).
Obtendrán una gran cantidad de CPU si los abusa. Eso es todo. – BoltClock
Y no, no "todas" las propiedades son intensivas en la CPU. ¿Qué te hace pensar 'box-shadow' o' box-sizing' va a matar a un Pentium? – BoltClock
son :(por ejemplo, animar la posición de fondo toma 100% de la CPU en todos los navegadores :( – Alex