Aceleración por hardware con CSS3
La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores capaces).
Si estás haciendo animaciones y transformaciones varias utilizando CSS3, existe un truco para engañar al browser y forzar a que utilice el GPU para realizar las animaciones. Basta con que declares la siguiente propiedad y valor (si no la estás utilizando):
-webkit-transform: translateZ(0);Si ya la estabas utilizando sigue con lo que tenías, que la GPU se encargará de hacer el mejor trabajo posible con tu animación.
❦
Nota: no creas que hace milagros; no hay garantía de que mejore notablemente la performance. Con esto simplemente activarás la memoria gráfica, por ende utilizarás más batería si estás en un móvil/tablet/laptop.
❦
Sobre el Autor: Jorge Epuñan
Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.
Jonathan
06 / Agosto / 2012