No puedo encontrar una buena leyenda sobre cómo leer la línea de tiempo de rendimiento de Chrome Devtools.

Sé que los diferentes colores se refieren al tipo de trabajo que se está realizando (scripting, rendering, etc).

Pero lo que no entiendo es, ¿qué significan los diferentes tonos de esos colores en la línea de tiempo?

enter image description here

Solía ​​pensar que representaban la cantidad de tiempo que se pasaba analizando / ejecutando un activo frente a la cantidad de tiempo que pasa transfiriéndolo a través de la red, pero eso no parece ser cierto, porque el activo largo en la foto de arriba tiene esta información de tiempo:

Duration    552.30 ms (509.58 ms network transfer + 42.72 ms resource loading)

La parte amarilla oscura del activo es más grande que la amarilla clara, pero no 10 veces más grande.

¿Representa cuánto del activo se ejecuta? Eso no tiene sentido porque el mismo sombreado de color ocurre en el documento HTML en sí ...

0
Joshua Soileau 22 feb. 2021 a las 23:54

1 respuesta

La mejor respuesta

Me di cuenta de esto.

Esos matices corresponden a si el tiempo es causado por los archivos "self" o los archivos "children":

enter image description here

Puede que esté machacando esta explicación, pero "Yo" se refiere a la cantidad de tiempo que tarda ese archivo específico en cargarse / ejecutarse, "niños" hace referencia a cualquier archivo adicional que inicie el padre y el tiempo que pasan cargando.

Por lo tanto, tiene sentido, en mi captura de pantalla original del tweet, el archivo "proyecto-proyecto" es el archivo en nuestro código base que async carga otros módulos JS, por lo que tiene sentido que tenga una gran sección de color amarillo oscuro, ya que es el que inicia las solicitudes de todos esos archivos.

0
Joshua Soileau 24 feb. 2021 a las 16:23