selectores - ¿Por qué la aceleración de hardware en CSS3 ralentiza el rendimiento?

selectores avanzados css

Question

Estoy moviendo 6000 elementos div pequeños en un experimento css3 usando una transición de la top: 0 a la top: 145px para probar el rendimiento.

El uso de hardware sin aceleración funciona sin problemas en Google Chrome.

Si habilito la aceleración de hardware a través de translateZ(0) rendimiento se vuelve horrible.

¿Por qué es así?

Aquí está mi código de ejemplo: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

Actualización (14-11-2014): dado que esta pregunta todavía está atrayendo la atención, me gustaría señalar que el problema en sí parece existir aunque el mencionado tartamudeo ya no sea visible en la demostración proporcionada en el hardware moderno . Los dispositivos más antiguos aún pueden ver problemas de rendimiento.

Answer 1

Interesante. He intentado jugar con algunas opciones en about:flags , específicamente estos:

Composición de GPU en todas las páginas Utiliza la composición acelerada por GPU en todas las páginas, no solo aquellas que incluyen capas aceleradas por GPU.

Dibujo acelerado de GPU Habilite el dibujo acelerado de GPU del contenido de la página cuando esté habilitada la composición.

GPU Accelerated Canvas 2D Permite un mayor rendimiento de las etiquetas de lienzo con un contexto 2D mediante el uso del hardware de la Unidad de procesador de gráficos (GPU).

Habilitado esos, lo probé y falló miserablemente con la casilla activada (al igual que lo hizo). Pero luego noté otra opción:

Contador de FPS Muestra la velocidad de cuadros real de una página, en cuadros por segundo, cuando la aceleración de hardware está activa .

Dado lo destacado en la descripción de la bandera, especularía que la aceleración de hardware estaba, de hecho, activada incluso sin la casilla de verificación marcada desde que vi el contador de FPS con las opciones anteriores activadas.

TL; DR: la aceleración de hardware es, en última instancia, una preferencia del usuario; forzándolo con dummy translateZ(0) introducirá sobrecarga de procesamiento redundante dando la apariencia de un menor rendimiento.

Answer 2

La razón por la que la animación fue más lenta cuando se agregó el hack de transformación nula ( translateZ(0) ) es que cada transformación 3D nula crea una nueva capa. Cuando hay demasiadas capas, el rendimiento de la representación se ve afectado porque el navegador debe enviar muchas texturas a la GPU.

El problema se notó en 2013 en la página principal de Apple, que abusó del hack de transformación nula. Ver http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

El OP también notó correctamente la explicación en su comentario :

Mover pocos objetos grandes es más eficaz que mover muchos objetos pequeños cuando se usa la aceleración 3D porque todas las capas aceleradas en 3D deben transferirse a la GPU y al camino de regreso. Entonces, incluso si la GPU hace un buen trabajo, la transferencia de muchos objetos podría ser un problema, por lo que el uso de la aceleración de la GPU podría no valer la pena.

Answer 3

Los vi a ustedes dos, creo que sé la razón por la que confundieron:

1. Los elementos de animación No use la izquierda o la parte superior para cambiar la ubicación, intente utilizar la transformación -webkit;
2. Todos los elementos secundarios deben activar la aceleración de hardware, como use translateZ () o translate3D;
3. Los FPS miden la fluidez de la animación, su demostración de FPS en promedio solo 20 FPS.

Arriba, solo una opinión personal, ¡gracias!

Answer 4

Mi experiencia es que las GPU generalmente no son más rápidas para todo tipo de gráficos. Para gráficos muy "básicos" pueden ser más lentos.

Es posible que haya obtenido un resultado diferente si estuviera rotando una imagen: ese es el tipo de cosas en las que las GPU son buenas.

Tenga en cuenta también que translateZ (0) es una operación en 3 dimensiones, mientras que cambiar arriba o izquierda es una operación bidimensional

Answer 5

Siempre agrego:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Al trabajar con la transformación 3D Incluso transformaciones 3D "falsas". La experiencia me dice que estas dos líneas siempre mejoran el rendimiento, especialmente en el iPad, pero también en Chrome.

Probé tu ejemplo y, hasta donde sé, funciona.

En cuanto a la parte "por qué" de tu pregunta ... no sé. La transformación 3D es un estándar joven, por lo que la implementación es entrecortada. Es por eso que es una propiedad prefijada: para la prueba beta. Alguien podría completar un informe de error o una pregunta y hacer que el equipo investigue.

Editar por cada 19 de agosto de 2013 :

Hay una actividad regular en esta respuesta, y acabo de perder una hora encontrando que IE10 también necesita esto. Entonces no lo olvides

backface-visibility: hidden;
perspective: 1000;

Answer 6

Verifique chrome: // flags en chrome. Dice

"Cuando la composición por hilos está habilitada, las animaciones CSS aceleradas se ejecutan en el hilo de composición. Sin embargo, puede haber ganancias de rendimiento que se ejecutan con animaciones CSS aceleradas, incluso sin el hilo del compositor".