Qué causa que el Marco de línea de tiempo de Chrome 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é a menudo causa cantidades tan grandes de espacio vacío? He visto que los temporizadores causan problemas para extender la longitud de los marcos, pero en el ejemplo siguiente no estoy seguro de por qué un marco sería tan grande.

Me encantaría un poco de ayuda minimizar estos

Answer 1

Esto está documentado here, consulte la sección 'Acerca de claro o gris claro marcos'. Los "cuadros claros" en cuestión se describen allí como

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

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

Answer 2

He encontrado algunas relaciones interesantes y espero que le ahorrará tiempo para que alguien (pasé mucho tiempo antes de averiguar todo esto)

1. Lo más importante - devtools cromo cuestan mucho. Un significado MUCHO, incluso si no dice nada al respecto. Por ejemplo:
2. Las "capturas de pantalla" en el monitor de rendimiento aumentan el tiempo de fotogramas de 16ms a 66ms en mi caso y simplemente lo llena de espacio vacío en la línea de tiempo - without screenshots y with screenshots. (Ahora veo operaciones largas en la GPU con capturas de pantalla, pero no hay información sobre qué operación exactamente concreta)
3. Las cosas en las herramientas de "representación" como "pintura intermitente" o "medidor fps" aumentan enormemente el tiempo de las operaciones de pintura. ¡Solo asegúrese de haber desactivado todo esto antes de analizar el rendimiento!
4. Suceden cosas muy extrañas con el "otro" segmento (color gris en la línea de tiempo). Se supone que el costo de DevTools es en sí mismo, pero a veces puede estar al azar alrededor de cero con muchos cálculos o estar al 100% wile inactivo. Mi consejo: hay una nueva herramienta de "monitor de rendimiento" en las nuevas versiones de Chrome (no es simple "rendimiento"). Es mejor activarlo y controlar la línea de tiempo de "uso de CPU". Si observa un comportamiento inesperado de la curva gris, simplemente vuelva a cargar la página o todo el cromo, puede ahorrarle mucho tiempo.
5. Algunas extensiones pueden causar efectos aleatorios en la línea de tiempo. Es mejor desactivarlo también.
6. En realidad, cualquier cosa en herramientas o extensiones puede arruinar su medición. Alternar todo ello antes de iniciar Búsqueda cabo cuestiones en un mejor código, DOM, o estilos