jquery - paginas - ¿Probar si la aceleración de hardware se ha habilitado para una animación CSS?

efectos jquery para paginas web (1)

Visión general

Una transición de propiedad CSS en un elemento es acelerada por hardware si se cumplen todas estas condiciones:

La composición de capas acelerada por hardware está habilitada en el navegador
La propiedad CSS en transición es acelerable
El elemento ha recibido su propia capa de composición.

En general, los requisitos para estas condiciones son:

Las opciones de aceleración de hardware relevantes deben estar habilitadas, y la GPU del dispositivo y los controladores de gráficos no deben estar en la lista negra
Solo se pueden acelerar las propiedades CSS de composición ( opacity , transform: translate / scale / rotate , etc.)
Cada navegador tiene razones específicas para decidir si otorgar a un elemento su propia capa de composición (o se puede forzar mediante el uso de un truco "ir más rápido" transform: translate3d )

Composición de capa acelerada por hardware

Para identificar si esto está habilitado:

Cromo

1. Aceleración general.

Ir a chrome://settings
Haga clic en el botón + Mostrar configuración avanzada
En la sección Sistema , inspeccione el estado de la casilla Utilizar aceleración de hardware cuando esté disponible

Si la aceleración está habilitada, entonces:

2. Composición acelerada.

Ir a chrome://gpu
En la sección Estado de la característica de gráficos , inspeccione el valor de la composición . Este será uno de los siguientes:
- Hardware acelerado
- Solo software, aceleración de hardware no disponible

Más detalles sobre el Software Compositor de la docs :

En algunas situaciones, la composición del hardware es inviable, por ejemplo, si los controladores de gráficos del dispositivo están en la blacklisted o si el dispositivo carece de una GPU por completo. Para estas situaciones es una implementación alternativa al renderizador GL llamado SoftwareRenderer

(Nota: Chrome también tiene una ruta de reproducción de software heredada , que "aún se mantiene en mayo de 2014, pero pronto se eliminará completamente en Blink").

Aquí hay un gran artículo con más información: Procesamiento acelerado en Chrome .

Firefox

1. Aceleración general.

Ir a las preferencias de Firefox
Ir a la pestaña Avanzado
Ir a la subficha General
Inspeccione el estado de la casilla de verificación Usar aceleración de hardware cuando esté disponible

Si la aceleración está habilitada, entonces:

2. Aceleración de la capa.

Ir a about:config
Búsqueda de layers.acceleration.disabled

Si la aceleración de capa está habilitada (si el valor es false ), entonces:

3. Ventanas aceleradas GPU

Ir a about:support
En la sección Gráficos , inspeccione el valor de GPU Acelerado de Windows

Si no comienza con 0/ , y se muestra una API de representación (por ejemplo, OpenGL, Direct3D), la aceleración de GPU está activa.

Safari

Habilite el menú de depuración de Safari ejecutando este comando en la Terminal:
defaults write com.apple.Safari IncludeInternalDebugMenu 1
Abrir (o reiniciar) Safari
En el menú Depuración de Safari, inspeccione el estado de la opción Deshabilitar composición acelerada en el submenú Marcas de composición / composición

Propiedades CSS aceleradas

Las únicas transiciones de propiedades CSS que pueden ser aceleradas por hardware son aquellas que ocurren en la etapa de composición del proceso de renderizado. Por ejemplo:

opacity
transform: translate y sus amigos: translateX , translateY , translateZ , translate3d
transform: scale y sus amigos: scaleX , scaleY , scaleZ , scale3d
transform: rotate y sus amigos: rotateX , rotateY , rotateZ , rotate3d

Para beneficiarse por completo de la aceleración, no se debe hacer una transición de propiedades que no sean de composición . Por ejemplo:

Una transición solo en la transform: translate puede recibir todos los beneficios de la aceleración (porque la GPU simplemente puede recomponer la capa del elemento).
Una transición en ambas transform: translate y width casi no recibirá ningún beneficio de la aceleración (porque una transición en width hace que la capa del elemento sea repintada por la CPU para cada cuadro de animación).

Composición de capas y bordes de colores.

El motor de representación del navegador decide (en función de las preferencias del usuario, los estilos CSS, etc.) si otorga o no a un elemento su propia capa de composición.

Por ejemplo, Chrome tiene esta lista de razones y también tiene esta opción en chrome://flags :

Compositing para RenderLayers con transiciones
Habilitar esta opción hará que los RenderLayers con una transición de opacidad, transformación o filtro tengan su propia capa compuesta.

Si a un elemento no se le ha dado su propia capa, entonces no se acelerarán las transiciones de CSS en ese elemento.

transform: translate3d ( el truco "ir más rápido" ) generalmente obliga a un elemento a tener su propia capa.

Pero incluso si a un elemento se le ha dado su propia capa, las transiciones en las propiedades de no composición ( width , height , left , top , etc.) todavía no pueden acelerarse , ya que se producen antes de la etapa de composición (por ejemplo, en las etapas de diseño o pintura). ). @ChrisSpittles Esta es la razón por la que no vio ninguna mejora visual después de agregar transform: translate3d .

La mayoría de los navegadores pueden mostrar bordes de colores alrededor de las capas compuestas, para que sean fáciles de identificar para el desarrollo / depuración:

Cromo

La visualización de los bordes de las capas compuestas se puede hacer de dos maneras:

Para todas las páginas : vaya a las chrome://flags de chrome://flags y habilite los bordes de la capa de procesamiento compuesto ("Representa un borde alrededor de las capas de procesamiento compuesto para ayudar a depurar y estudiar la composición de la capa"). Deberás reiniciar Chrome para que esto tenga efecto.
Para páginas individuales : abra las Herramientas del desarrollador, luego abra el Cajón, seleccione la pestaña Representación y active Mostrar bordes de capa compuestos . Ahora, al abrir las Herramientas del desarrollador en cualquier página, los bordes de la capa se mostrarán en esa página.

Ahora activa la transición CSS en el elemento. Si tiene un borde coloreado, entonces tiene su propia capa de composición.

Los colores del borde y sus significados se definen en debug_colors.cc . Más detalles here y here .

Firefox

Para dibujar los bordes de las capas compuestas:

Ir a about:config
Buscar layers.draw-borders y habilitarlo

Ahora activa la transición CSS en el elemento. Si tiene un borde coloreado, entonces tiene su propia capa de composición.

Los colores del borde y sus significados se definen en Compositor::DrawDiagnosticsInternal .

Safari

(Esto no me funciona con Safari 7.0.3, pero parece que funcionó para algunas personas tan recientemente como el año pasado ).

Inicie Safari desde la Terminal con la variable de entorno booleana CA_COLOR_OPAQUE establecida:

$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

Método alternativo:

$ export CA_COLOR_OPAQUE=1 $ /Applications/Safari.app/Contents/MacOS/Safari

Al parecer, las capas aceleradas por hardware deben ser de color rojo. Más detalles here y here .

Actualizar:

Aquí hay un método alternativo que me funciona en Safari 7.0.3 (crédito a David Calhoun ):

En el menú Depuración de Safari, habilite Mostrar bordes de composición en el submenú Marcas de composición / Dibujo

Ahora activa la transición CSS en el elemento. Si tiene un borde coloreado, entonces tiene su propia capa de composición.

Referencias

Para más detalles, echa un vistazo a estos excelentes artículos:

¿Cómo puedo saber (para fines de prueba) si la aceleración de hardware se ha habilitado para una animación CSS?

Tengo el siguiente código que esencialmente amplía un elemento y lo convierte en pantalla completa (sin usar la API de pantalla completa HTML5). Se ejecuta como una tortuga asmática tartamudeante en la mayoría de los móviles cuando se utiliza una animación jQuery, así que en su lugar he usado CSS3.

Aquí está el ejemplo de jsFiddle:

$("#makeFullscreen").on("click", function() { var map = $("#map"), mapTop = map.offset().top, mapLeft = map.offset().left; $("#map").css({ "position": "fixed", "top": mapTop, "left": mapLeft, "width": map.outerWidth(true), "height": map.outerHeight(true) }); setTimeout(function(){map.addClass("fullscreen")},1); return false; });

.mapContainer { width: 150px; height: 200px; position: relative; margin: 0 auto; } .map { background: #00f; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; } .fullscreen { -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out; -moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out; -ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out; -o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out; transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } #makeFullscreen { margin-top: 20px; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mapContainer"> <div id="map" class="map"> <button id="makeFullscreen">Make Fullscreen</button> </div> </div>

Esto agrega una clase y las transiciones de elementos de un estado al siguiente utilizando una transición CSS. Esto es más rápido que jQuery pero aún es tartamudeo en iOS y Android.

Pero leí here que puedes forzar la transición para que se acelere utilizando la GPU especificando una transformación 3d que esencialmente no hace nada, como esto:

-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

Sin embargo, después de agregar eso a mi CSS no veo ninguna mejora visual.

La pregunta entonces ...

¿Hay alguna manera de ver si la aceleración de hardware se ha habilitado a través de herramientas de desarrollo en algún navegador? No necesito detectar esto con un script, solo quiero saber para propósitos de prueba.