¿Por qué habilitar la aceleración por hardware en CSS3 ralentiza el rendimiento?
Estoy moviendo 6000 elementos div pequeños en un experimento css3 usando una transición de top: 0 a top: 145px para probar el rendimiento.
Usando no la aceleración por hardware se ejecuta sin problemas en Google Chrome.
Si habilito la aceleración por hardware a través de translateZ(0) el rendimiento se vuelve horrible.
¿Por qué es así?
Aquí está mi código de ejemplo: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
Actualizar (2014-11-13): Desde esta pregunta todavía está atrayendo la atención Me gustaría señalar que el problema en sí todavía parece existir, aunque el tartamudeo mencionado podría no ser visible más en la demostración proporcionada en hardware moderno. Es posible que los dispositivos más antiguos sigan teniendo problemas de rendimiento.
6 answers
Siempre añado:
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
Cuando se trabaja con transformación 3d. Incluso" falso " 3D transforma. La experiencia me dice que estas dos líneas siempre mejoran el rendimiento, especialmente en iPad, pero también en Chrome.
Hice una prueba en su ejemplo y, por lo que puedo decir, funciona.
En cuanto al "por qué" parte de su pregunta... No 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 llenar un error informe o una pregunta y haga que el equipo investigue.
Editar por 19 de agosto 2013:
Hay actividad regular en esta respuesta, y acabo de perder una hora encontrando que IE10 también necesita esto. Así que no olvides :
backface-visibility: hidden;
perspective: 1000;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-13 09:34:17
La animación de la razón fue más lenta cuando agregaste el hack 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 renderizado sufre 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 hack de transformación nula. Véase 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 eficiente que mover muchos objetos pequeños cuando se usa la aceleración 3D porque todas las capas aceleradas en 3D tienen que transferirse a la GPU y de regreso. Por lo tanto, 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:01
Interesante. He intentado jugar con algunas opciones en about:flags, específicamente estas:
Composición por GPU en todas las páginas Utiliza la composición acelerada por GPU en todas páginas, no solo aquellas que incluyen capas aceleradas por GPU.
Dibujo acelerado por GPU Habilitar el dibujo acelerado por GPU de la página contenido cuando la composición está habilitada.
Canvas 2D acelerado por GPU Permite un mayor rendimiento de las etiquetas canvas con un contexto 2D por renderizado mediante Unidad de Procesador de Gráficos (GPU) hardware.
Los habilitó, lo probó y falló miserablemente con la casilla habilitada (al igual que lo hizo). Pero entonces me di cuenta de otra opción:
FPS counter Muestra la velocidad de fotogramas real de una página, en fotogramas por segundo, cuando la aceleración de hardware está activa.
Dado el punto culminante en la descripción de la bandera, especularía que la aceleración de hardware era, de hecho, 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; forzarla con dummy translateZ(0) introducirá sobrecarga de procesamiento redundante dando la apariencia de menor rendimiento.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-11 22:41:02
Compruebe chrome://banderas 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 ejecutándose con animaciones CSS aceleradas, incluso sin el hilo compositor."
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-09 01:51:17
Mi experiencia es que las GPU no son generalmente 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 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 en 2 dimensiones
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-15 23:26:56
Te vi dos demo， Creo que sé la razón por la que confundiste：
- Los elementos de animación no usan la izquierda o la parte superior para cambiar la ubicación, intente usar-webkit-transform;
- Todos los elementos secundarios necesitan activar la aceleración de hardware como use translateZ () o translate3D;
- FPS medir la fluidez de la animación, su demostración FPS en promedio solo 20 FPS.
Arriba, solo una opinión personal, gracias!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-23 04:09:41