Rendimiento de CSS relativo a translateZ (0)


96

Varios blogs han expresado la ganancia de rendimiento al "engañar" a la GPU para que piense que un elemento es 3D al usarlo transform: translateZ(0)para acelerar animaciones y transiciones. Me preguntaba si hay implicaciones al usar esta transformación de la siguiente manera:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

6
¿Puedes vincular a esos artículos del blog?
Jürgen Paul

@PineappleUndertheSea este: blog.teamtreehouse.com/ ... me envió aquí.

Por cierto, -o-transform: translateZ(0)nunca ha existido. caniuse.com/#search=translate3d
Volker E.

@Ahmed Nuaman sí, no es solo un truco. Pero se usa oficialmente en alguna aplicación. Pero si terminas en un dispositivo (de gama baja) sin GPU ... no estoy seguro de cómo funciona. Pero ya que si lo que puede hacer un procesador (Gráficos 2D) se delega a GPU por la única razón de que hay comando 3D aunque no tiene impacto final. Y 3D usa múltiples núcleos en su interior y funciona más rápido. Esto es lo que tiene sentido aquí. Necesita más investigación ...
TooGeeky

Respuestas:


102

Las transformaciones CSS crean un nuevo contexto de apilamiento y un bloque contenedor, como se describe en la especificación. En términos sencillos, esto significa que los elementos de posición fija con una transformación aplicada actuarán más como elementos absolutamente posicionados, y z-indexes probable que los valores se confundan.

Si echas un vistazo a esta demostración , verás lo que quiero decir. El segundo div tiene una transformación aplicada, lo que significa que crea un nuevo contexto de apilamiento, y los pseudo elementos se apilan en la parte superior en lugar de debajo.

Entonces, básicamente, no hagas eso. Aplique una transformación 3D solo cuando necesite la optimización. -webkit-font-smoothing: antialiased;es otra forma de aprovechar la aceleración 3D sin crear estos problemas, pero solo funciona en Safari.


27

Si desea implicaciones, en algunos escenarios, el rendimiento de Google Chrome es horrible con la aceleración de hardware habilitada . Por extraño que parezca, cambiar el "truco" a -webkit-transform: rotateZ(360deg);funcionó bien.

No creo que nunca supiéramos por qué.


3
Tuve problemas como imágenes comprimidas y animaciones horriblemente incorrectas al usar la altura máxima en Safari 5 y 6. Cuando desactivé la aceleración de la GPU (translateZ (0)), todo funcionó según lo previsto, pero la animación no fue lo suficientemente fluida. Cambié translateZ (0) a rotateZ (360deg), y de repente las animaciones se volvieron fluidas y el hardware se aceleró y ya no hubo problemas.
jakub_jo

14

Obliga al navegador a utilizar la aceleración de hardware para acceder a la unidad de procesamiento gráfico (GPU) del dispositivo para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite que el software realice la mayor parte (si no todo) del renderizado, lo que resulta en menos potencia para las transiciones. Pero la Web se ha puesto al día y la mayoría de los proveedores de navegadores ahora ofrecen aceleración de hardware gráfico mediante reglas CSS particulares.

El uso -webkit-transform: translate3d(0,0,0);hará que la GPU entre en acción para las transiciones CSS, haciéndolas más suaves (FPS más alto).

Nota: translate3d(0,0,0) no hace nada en términos de lo que ve. Mueve el objeto 0px en los ejes x, y y z. Es solo una técnica para forzar la aceleración del hardware.

Buena lectura aquí: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/


7

Puedo dar fe del hecho de que -webkit-transform: translate3d(0, 0, 0);afectará a la nueva position: -webkit-sticky;propiedad. Con un patrón de navegación del cajón izquierdo en el que estaba trabajando, la aceleración de hardware que quería con la propiedad de transformación estaba alterando la posición fija de mi barra de navegación superior. Apagué la transformación y el posicionamiento funcionó bien.

Afortunadamente, parece que ya tenía activada la aceleración de hardware, porque tenía -webkit-font-smoothing: antialiasedel elemento html. Estaba probando este comportamiento en iOS7 y Android.


5

En dispositivos móviles, enviar todo a la GPU provocará una sobrecarga de memoria y bloqueará la aplicación. Encontré esto en una aplicación para iPad en Cordova. Lo mejor es enviar solo los elementos necesarios a la GPU, los divs que está moviendo específicamente.

Mejor aún, use las transformaciones de transiciones 3d para hacer las animaciones como translateX (50px) en lugar de left: 50px;


1
¿Quiso decir "usar las transformaciones 3d" en lugar de "usar las transiciones 3d"?
Isius
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.