Traducción de CSS versus cambio de valores de posicionamiento absoluto

Question

He estado escribiendo una aplicación web para iPad y otras tabletas, y después de muchos problemas de visualización en cuanto a posicionamiento y animación adecuados y eficientes. Recientemente se me ocurrió la idea de usar -webkit-transform para todos mis elementos flotantes libres. Mi pregunta es: ¿Sería mejor utilizar las transformaciones proporcionadas por las especificaciones de CSS para animaciones suaves y confiables que, por ejemplo, cambiar los valores de lrtb dentro de los elementos position:relative? Con la aceleración de hardware activada, estoy encontrando un parpadeo aleatorio en los elementos en movimiento, especialmente durante los cambios de orientación. (elementos absolutamente posicionados) Entonces, dado que ningún blog notable usa este método, quería verificar si había alguna razón pro-tip, es una mala idea.

Answer 1

es posible lograr mejores resultados con la transformación en lugar de la posición.

Voy a citar unos pocos bits de este excelente artículo, pero que realmente debería leerlo para obtener el cuadro:

http://www.html5rocks.com/en/tutorials/speed/html5/

Actualmente la mayoría de los navegadores utilizar sólo la aceleración de GPU cuando tienen una fuerte indicación de que un elemento HTML se beneficiaría de ello. La indicación más fuerte es que se le aplicó una transformación 3D. Ahora es posible que realmente no desee aplicar una transformación 3D, pero aún así obtener los beneficios de la aceleración de la GPU: no hay problema. Basta con aplicar la transformación de la identidad:

-webkit-transform: translateZ(0); 

razón detrás de esto, es que se delega algunos de los trabajos que la CPU tiene que hacer, a la GPU, sin embargo sea considerado como esto no será necesariamente siempre vale la pena , especialmente en un dispositivo móvil como el iPad, ese es su entorno:

Tenga en cuenta que aplicar esta transformación no garantiza su rendimiento. Podría simplemente poner en marcha tu GPU, usar más batería pero ofrecer el mismo rendimiento que antes. Así que ten cuidado con esta técnica y solo úsala si experimentas un verdadero rendimiento.

Answer 2

Añadiendo al punto de Luca, aquí hay dos publicaciones que prueban el rendimiento de los objetos de traducción vs. posición.

TLDR:

Usando transform: translate(x,y); aumenta considerablemente los tiempos de pintura en elementos con transiciones CSS.

Sin embargo, position: absolute;top/left será más rápido si se utiliza en elementos sin transiciones.

Why Moving Elements with translate is better than position absolute, top/left (Paul Irish):

Directrices para la animación:

• animación fotograma clave Usar CSS o CSS transiciones, si es posible. El navegador puede optimizar la pintura y la composición de Bigtime aquí.

• Si tiene que ser su animación basada en JS, use requestAnimationFrame. Evita setTimeout, setInterval.

• Evite cambiar los estilos en línea en cada fotograma (jQuery animate() - style) si puede, las animaciones declarativas en CSS pueden ser optimizadas por el navegador mucho más.

• El uso de transformaciones 2D en lugar de posicionamiento absoluto generalmente proporcionará mejores FPS por tiempos de pintura más pequeños y una animación más suave .

• Utilice el modo de Marco de línea de tiempo para investigar qué está ralentizando su comportamiento "Mostrar extractos de pintura" y "Renderizar bordes de capa compilados" son buenos movimientos para verificar dónde se está renderizando su elemento.

Myth Busting transform:translate vs position top/left (Tumulto Blog):

principales conclusiones

• Ajuste de las propiedades superiores/izquierda será más rápido que el uso de una transformación si no está utilizando transiciones.

• Si el objetivo es WebKit, la mayor velocidad de provendrá de uso de las transiciones con la propiedad traducir, y obligando a los gráficos de aceleración para Safari/Mobile Safari (Chrome lo hace de forma automática esto).

• Si compone elementos no opacos, forzar la aceleración de gráficos en WebKit tendrá un gran aumento de rendimiento en Safari/Mobile Safari y un impulso modesto en Chrome.

• Si compone solo elementos opacos, forzar la aceleración de gráficos en WebKit tendrá un impacto negativo en el rendimiento.

NOTA: Con el fin de garantizar acelerado por la GPU transiciones en los navegadores móviles, usar transform: translate3d(0,0,0). (http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/)