google-chrome - tab - performance chrome

¿Qué hace que Chrome Timeline Frame tenga tanto espacio en blanco vacío?

Question

A veces, cuando Inspecciono Elemento en Google Chrome, encuentro que tengo algunos marcos grandes, pero están llenos de espacios en blanco. ¿Alguien sabe qué causa a menudo grandes cantidades de espacio vacío? He visto que los temporizadores causan problemas al ampliar la longitud de los cuadros, pero en el siguiente ejemplo no estoy seguro de por qué un cuadro sería tan grande.

Me encantaría algo de ayuda minimizando estos

Answer 1

Encontré algunas relaciones interesantes y espero que le ahorre tiempo a alguien (pasé mucho tiempo antes de resolver todo esto)

1. Lo más importante - los devtools de cromo cuestan mucho. Un medio mucho, incluso si no dice nada al respecto. Por ejemplo:
2. "Capturas de pantalla" en el monitor de rendimiento aumenta el tiempo de fotogramas de 16 ms a 66 ms en mi caso y simplemente lo llena con espacio vacío en la línea de tiempo, sin capturas de pantalla y con capturas de pantalla . (Ahora veo operaciones largas en GPU con capturas de pantalla, pero no hay ninguna información sobre lo que hizo una operación en particular)
3. Las cosas en las herramientas de "renderizado" como "pintura intermitente" o "medidor de fps" aumentan considerablemente el tiempo de las operaciones de pintura. Solo asegúrate de desactivar todo esto antes de analizar el rendimiento.
4. Suceden cosas muy extrañas con "otro" segmento (color gris en la línea de tiempo). Se supone que los devtools cuestan por sí mismos, pero a veces puede ser aleatorio alrededor de cero con muchos cálculos o estar al 100% inactivo. Mi consejo: hay una nueva herramienta de "monitor de rendimiento" en las nuevas versiones de Chrome (no es un simple "rendimiento"). Es mejor activarlo y vigilar la línea de tiempo del "uso de la CPU". Si ve un comportamiento inesperado de la curva gris, simplemente vuelva a cargar la página o el código completo, puede ahorrar mucho tiempo para usted.
5. Algunas extensiones pueden causar efectos aleatorios en la línea de tiempo. Es mejor desactivarlo también.
6. En realidad, cualquier cosa en las herramientas o extensiones puede arruinar su medición. Desactívelo todo antes de comenzar a buscar problemas en su código, dominio o estilos

Answer 2

Esto se documenta here , consulte la sección ''Acerca de los marcos claros o de color gris claro''. Los "marcos claros" en cuestión se describen allí como

Tiempo de inactividad entre ciclos de actualización de pantalla.

De acuerdo con este video , la barra transparente indica que el navegador está esperando una CPU o una GPU. No hay nada que el desarrollador pueda hacer para solucionar este problema cuando se trabaja en un sitio web "estándar".