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

82

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

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

Si habilito la aceleración de hardware a través del 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 (2014-11-13): dado que esta pregunta sigue atrayendo la atención, me gustaría señalar que el problema en sí parece existir, aunque es posible que la tartamudez mencionada ya no sea visible en la demostración proporcionada en el hardware moderno . Es posible que los dispositivos más antiguos sigan teniendo problemas de rendimiento.

css css-transitions hardware-acceleration Timo
fuente
9
La verdadera pregunta es por qué algunos navegadores quieren que los autores recurran a trucos tontos como transformaciones "nulas" para activar la aceleración de hardware. Firefox cede a la GPU tanto como sea posible, mientras que IE elige ACELERAR _ TODAS LAS COSAS. Pero una pregunta interesante aquí, sin embargo, ya que parece demostrar que hacks como este pueden incluso ser contraproducentes a veces.
BoltClock
2
@ BoltClock'saUnicorn Básicamente estoy de acuerdo contigo. ¿Pero no siempre ha sido así con los problemas entre navegadores? :-)
Timo
6
Hice esta pregunta hace bastante tiempo, pero ahora noté que la cantidad de elementos movidos parece tener un gran impacto en el problema. Mover pocos objetos grandes es más eficaz que mover muchos elementos pequeños cuando se usa la aceleración 3D porque todas las capas aceleradas en 3D deben transferirse a la GPU y viceversa. 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.
Timo
1
No veo ninguna diferencia de rendimiento en el ejemplo en ningún navegador y he votado para cerrar porque ya no se puede reproducir.
Jason C
1
@Timo Acabo de verificar lo que sean los últimos Firefox y Chrome, e IE11, en Windows 7 de 64 bits, en un Thinkpad i5 de 2.3 GHz bastante antiguo con un nVidia 4200M, ambas opciones me parecen fluidas. encogimiento de hombros
Jason C

Respuestas:

100

Siempre agrego:

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

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

Probé en su ejemplo y, por lo que puedo decir, funciona.

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

Edición del 19 de agosto de 2013 :

Hay actividad regular en esta respuesta, y acabo de perder una hora descubriendo que IE10 también necesita esto. Así que no olvides:

backface-visibility: hidden;
perspective: 1000;
mddw
fuente
3
Hice otra prueba. Básicamente lo mismo que la prueba n. ° 1, pero esta vez dejé que las cajas también giraran alrededor del eje z a través de -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html - ¡Esta vez la versión acelerada por hardware es más rápida! Si elimino la rotación, la aceleración del hardware ralentiza la animación. Si su teoría es cierta, entonces esto no debería funcionar (porque la única diferencia es que agregué rotateZ(360)). Por otro lado, ¿quizás Chrome sea lo suficientemente inteligente como para darse cuenta de que para una rotación alrededor del eje Z no se requiere volver a dibujar la parte posterior de esos mosaicos?
Timo
1
Este ya no es el caso en iOS6 :-(
Michael Mullany
2
@Timo Solo un aviso, w3schools no está afiliado a w3c: w3fools.com
Kyle Robinson Young
7
debería agregar dónde agregar estas líneas, no solo un general "solo agregue esto ..." Yo sé dónde, pero muchos no lo harían.
vsync
4
Agréguelo al padre de los elementos que está animando.
mddw
7

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

El problema se notó en 2013 en la página de inicio de Apple, que abusó del truco 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 elementos pequeños cuando se usa la aceleración 3D porque todas las capas aceleradas en 3D deben transferirse a la GPU y viceversa. 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.

Dan Dascalescu
fuente
6

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

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

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

Lienzo acelerado por GPU 2D Permite un mayor rendimiento de las etiquetas de lienzo con un contexto 2D al renderizar utilizando hardware de unidad de procesador de gráficos (GPU).

Los habilitó, lo probé y falló estrepitosamente con la casilla de verificación habilitada (como lo hizo usted). Pero luego noté otra opción:

Contador de FPS Muestra la velocidad de fotogramas real de una página, en fotogramas 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 para mí incluso sin la casilla de verificación marcada, ya que vi el contador de FPS con las opciones anteriores activadas.

TL; DR: la aceleración de hardware es, al final, una preferencia del usuario; forzarlo con dummy translateZ(0)introducirá una sobrecarga de procesamiento redundante dando la apariencia de un rendimiento más bajo.

ov
fuente
2
Bueno, entonces mira esto. Hice otra prueba. Básicamente lo mismo que la prueba n. ° 1, pero esta vez también dejo que las cajas giren alrededor de su propio eje agregando -webkit-transform: rotateZ(360deg); dl.dropbox.com/u/17844821/zeug/hwtest2.html - ¡Esta vez la versión acelerada por hardware es más rápida! Si elimino la rotación, la aceleración del hardware ralentiza la animación.
Timo
@valmar: ¿estás habilitando el contador de fps? En este nuevo ejemplo, lo veo independientemente de cómo establezca la casilla de verificación, lo que significa que la aceleración de hardware todavía es forzada. Supongo que su pregunta se reduce a "por qué es translateZ(0)más lento que rotateZ(360deg)"
ov
En realidad no. translateZ(0)SIEMPRE está activo. En realidad, se requiere para activar la aceleración 3D. rotateZ(360deg)simplemente agrega adicionalmente la animación de rotación. Entonces, diría que la pregunta es: ¿Por qué la animación con aceleración de hardware 3D es más suave con rotateZ(360deg)que sin?
Timo
1
no puedo creerlo. La rotación de imágenes pesadas es más rápida sin aceleración de hardware ...
ProblemsOfSumit
0

Verifique chrome: // flags en chrome. Dice

"Cuando la composición de subprocesos está habilitada, las animaciones CSS aceleradas se ejecutan en el subproceso de composición. Sin embargo, puede haber ganancias de rendimiento al ejecutar animaciones CSS aceleradas, incluso sin el subproceso del compositor".

León
fuente
No puedo encontrar esa opción en chrome: // flags aquí. Si desactiva esa función, ¿la versión acelerada por hardware es más rápida que la no acelerada para usted?
Timo
Ahora esta opción está en la configuración de DevTools
Dmitry Pashkevich
0

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

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

sabof
fuente
Lo más probable es que sea un problema de implementación. Las GPU son mucho más rápidas para todos los gráficos, siempre que lo implementes correctamente;)
scientiaesthete
1
translateZ(0)en realidad no hace más que "activar" la aceleración de hardware 3D. Es un truco pero funciona. Al agregar ese atributo css, el elemento html seleccionado, así como todos los elementos secundarios, serán calculados a la fuerza por la GPU en lugar de la CPU.
Timo
No conozco todos los detalles de implementación de bajo nivel. Tuve problemas similares con QT: la aceleración del hardware ralentiza las cosas. No sé en qué punto (o si) la computadora se da cuenta de que translateZ (0) se puede ignorar y la transformación se puede procesar como un movimiento en 2 dimensiones. (Sin perspectiva, sin suavizado, sin z + = 0 para cada píxel)
sabof
scientiaesthete, la GPU no es más rápida para hacer los cálculos de todos los gráficos, ya que se necesita un esfuerzo de la CPU para mover los comandos y la memoria a la GPU y la memoria de la GPU. Existe un límite de complejidad para que ese esfuerzo valga la pena. YMMV <optimizador manual de ensamblaje anterior aquí;)
tomByrer
Las GPU son mucho más rápidas para la parte de cálculo real. Sin embargo, todas las GPU disponibles actualmente tienen una fase de configuración bastante pesada antes de que pueda comenzar el cálculo real. Para contenido "simple", dejar que la CPU haga todo el renderizado puede ser más rápido que la configuración de la GPU + el cálculo de la GPU. Un navegador bien implementado hará automáticamente la elección correcta y no hay forma de que ningún autor de contenido aleatorio pueda hacerlo mejor.
Mikko Rantalainen
-2

Los vi a los 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 usar la -webkit-transform;
  2. Todos los elementos secundarios deben activar la aceleración de hardware, como el uso de translateZ () o translate3D;
  3. FPS mide la fluidez de la animación, su FPS de demostración en promedio solo 20FPS.

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

一丝 冰凉
fuente
¡Bienvenido a Stack Overflow! No utilices firmas / lemas en tus publicaciones. Su casilla de usuario cuenta como su firma y puede usar su perfil para publicar cualquier información sobre usted que desee. Preguntas frecuentes sobre firmas / lemas
Andrew Barber
3
Ya expliqué por qué, y también se menciona por qué en la entrada de preguntas frecuentes a la que he vinculado. Usted ya tiene una firma - mirada hacia la derecha, donde se muestra su nombre y foto del avatar.
Andrew Barber
好吧 ， 你 “淫” 了。 不过 还是 很 感谢 ， 还 不太 熟悉 “stackoverflow” 的 规则。
一丝 冰凉
1
De nada. Tenga en cuenta también que este es un sitio web solo en inglés. :) Tu nombre está bien, pero tus publicaciones deben hacerse en inglés, por favor.
Andrew Barber
3
苦 逼 了, no hablo inglés, por favor perdóname.
一丝 冰凉