performance - quitar - don''t open developer tools. en español

Perfiles de inspector web con "Frames": encontrar la causa de los problemas de rendimiento cuando no aparece nada en la línea de tiempo

Question

Acabo de ver la sesión de E / S de Google Jank Busters: creación de aplicaciones web perfectas donde los oradores explicaron cómo usar la nueva vista "Marcos" en la línea de tiempo del inspector web de Chrome.

Aquí hay un ejemplo de grabación que obtuve al desplazarme por una página que estoy desarrollando:

Como puede ver, hay grandes retrasos en algunos de los cuadros, pero sin ninguna causa aparente en la línea de tiempo (hay grandes espacios entre los eventos amarillos "Timer Fired"). ¿Cómo puedo solucionar los problemas de rendimiento para aumentar la velocidad de cuadros de manera consistente?

Answer 1

Te recomiendo que uses http://pagespeed.googlelabs.com

Básicamente, le mostrará un detalle completo de lo que sucedió cuando la página se estaba cargando para que sepa dónde trabajar ... (y también creo que podría perder cierta información en algunos casos)

Además, debe hacer un perfil de memoria de la página para ver cuánto tardan algunos objetos en cargarse en la memoria.

Answer 2

Tu ejemplo en realidad no se ve tan mal. Su código se ejecuta rápidamente, y el navegador solo se procesará a 60 fps, por lo que pasará un poco de tiempo (hasta 16 ms) esperando el siguiente ciclo de renderizado.

Aquí hay una instantánea particularmente preocupante de la vista Frames del panel Línea de tiempo de Chrome Dev Tools.

De acuerdo con la documentación :

• Las áreas grises indican actividad que no fue instrumentada por DevTools, y el equipo de Chrome trabaja para mantener esta área lo más pequeña posible
• Las áreas claras indican el tiempo de inactividad entre los ciclos de actualización de la pantalla, lo que generalmente no es un problema, especialmente si el área llega a la línea de 60 fps, ya que solo Chrome está esperando para entregar un fotograma en la vsync del monitor

Las regiones amarillo y verde diminutas en la parte inferior de las barras indican que el manejo del evento, la pintura y la composición funcionaron bastante rápido, lo suficientemente rápido como para caer bajo la línea horizontal que indica el umbral de 30 fps, y probablemente más rápido que el umbral de 60 fps. el tiempo (línea no mostrada)

Para obtener más información, abra las opciones de herramientas de desarrollo y verifique:

Con esto habilitado, verá regiones grises en la barra ''RECORDS'':

Cada región gris muestra un período durante el cual el subproceso del representador estaba ocupado. Si ve muchas lagunas, entonces el navegador probablemente esté vinculado a la GPU.

Nat Duca, un ingeniero en Chrome, proporciona más información en esta publicación :

La delimitación de la GPU generalmente proviene de dos cosas:

1. tener -webkit-filter, conserva las propiedades 3D en los elementos. Esos comen en el GPU como ... um, algo hambriento.
2. tener demasiadas capas grandes

¿Capas? "Mostrar bordes de capas compuestas" para verlos. El lugar donde la mayoría de la gente se mete en problemas no es el conteo de capas realmente, sino el área de las capas.

Regla de oro: la mayoría de las computadoras están diseñadas para que puedan tocar cada píxel en su pantalla principal unas 4 veces. Como ejemplo muy simple, una MacBook Air de 2 años está aprovisionada para el tamaño de su pantalla LCD. Cuando conecta un monitor de 30 "que tiene más de una capa, comienza a conectarse a la GPU.

¿Por qué importa esto? [Handwaving,] una capa toca un píxel una vez cuando dibujamos la pantalla. Si una capa es del tamaño de su ventana, por ejemplo, tiene un ancho = 100% alto = 100% div con -webkit-transform: translateZ (0), entonces está tocando cada píxel de la pantalla una vez. Por lo tanto, cuente el área de sus capas y si excede 4 veces el área de su monitor, es posible que no pueda ir al espacio [porque está unida a la GPU].

Una buena prueba para la acotación de la GPU es reducir el tamaño de la ventana en 1/2 en cada dimensión. Si las cosas siguen siendo lentas, entonces algo más está sucediendo ... si las cosas se ponen más rápidas, probablemente estés golpeando la GPU.

En mi caso (que se muestra en la imagen superior) todavía estoy tratando de averiguar qué está causando las barras grises. El código no ha cambiado, y el rendimiento solía ser excelente. Puede ser que una versión más reciente de Chrome (hoy estoy ejecutando 31.0.1650.57 m) no tenga tan buen rendimiento con este código por algún motivo. Una vez más, las áreas grises indican que el hilo de renderizado estaba ocupado con el código no instrumentado, por lo que es difícil saber qué estaba pasando.