Comprender el estado de "bloqueo" del registro de red de Chrome

172

Tengo un siguiente registro de red en Chrome:

registro de red

No entiendo nada: ¿cuál es la diferencia entre las barras grises rellenas y las barras grises transparentes?

google-chrome http httprequest google-chrome-devtools setec
fuente
2
Lo veo mucho en las últimas dos semanas. Tengo 125 elementos cargándose cuando hago una actualización por turnos en Chrome. De vez en cuando, 3-4 de esos archivos se quedarán atascados en el estado "Atascado". Todos los archivos son archivos .png. La única solución es cerrar la pestaña, volver a abrir otra tabla y volver a abrir las herramientas de desarrollo. He estado trabajando en esta base de código durante más de un año sin este problema y no ha habido ningún cambio que creo que pueda causar tal comportamiento en los archivos png.
Greg Grater

Respuestas:

202

Google da un desglose de estos campos en la evaluación del rendimiento de la red sección de su documentación de DevTools.

Extracto del tiempo de la red de recursos :

Atascado / Bloqueo

Tiempo que la solicitud pasó esperando antes de que pudiera enviarse. Este tiempo incluye todo el tiempo dedicado a la negociación de poder. Además, este tiempo incluirá cuando el navegador esté esperando que una conexión ya establecida esté disponible para su reutilización, obedeciendo las seis conexiones TCP máximas de Chrome por regla de origen.

(Si olvida, Chrome tiene un enlace "Explicación" en la información sobre herramientas al pasar el mouse y debajo del panel "Tiempo").

Básicamente, la razón principal por la que verá esto es porque Chrome solo descargará 6 archivos por servidor a la vez y otras solicitudes se detendrán hasta que esté disponible una ranura de conexión.

Esto no es necesariamente algo que deba corregirse, pero una forma de evitar el estado estancado sería distribuir los archivos a través de múltiples nombres de dominio y / o servidores, teniendo en cuenta CORS si corresponde a sus necesidades, sin embargo, HTTP2 es probablemente una mejor opción avanzando. La agrupación de recursos (como la concatenación JS y CSS) también puede ayudar a reducir la cantidad de conexiones estancadas.

Alexander O'Mara
fuente
1
¿También está establecido el límite de 6 archivos para archivos locales? Me encuentro con el estado estancado de vez en cuando al cargar una página desdefile:///C:/...
Ilya Kogan
@IlyaKogan No parece haber un límite de 6 archivos al cargar desde el sistema de archivos, pero sí parece haber una fase "detenida". Supongo que esto representa el tiempo que le toma a Chrome abrir el archivo en el sistema de archivos, y la fase de "Descarga de contenido" representa el tiempo que tardó en cargar el contenido en la memoria.
Alexander O'Mara
44
FYI: En Chrome 42, el tiempo de espera en la cola no se cuenta como sección Bloqueada / Bloqueada como lo indican los documentos, pero se incluye en el total. Para obtener tiempo en la cola, reste todas las secciones del total. Esperemos que actualicen sus documentos (o arreglen el error).
delrox
20
Pero, ¿cuál es la diferencia entre las barras blancas y grises?
Kat
No se recomienda fragmentar el dominio para lograr una mayor concurrencia. Use HTTP2 en su lugar. Ver: youtube.com/watch?v=yURLTwZ3ehk
Homer6
13

DevTools: [red] explica las barras vacías antes de la solicitud

Investigé más y he identificado que no hay una diferencia significativa entre nuestros rangos Stalled y Queuing. Ambos se calculan a partir del delta de otras marcas de tiempo, en lugar de proporcionarse de netstack o renderizador.

Actualmente, si estamos esperando que un socket esté disponible:

  • lo llamaremos estancado si se produce alguna negociación de poder
  • lo llamaremos en cola si no se requiere trabajo proxy / ssl.
Naga Kiran
fuente
6

https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing

Esto viene del sitio oficial de Chome-devtools y ayuda. Aquí cito:

  • En cola Si una solicitud está en cola, indica que:
    • El motor de renderizado pospuso la solicitud porque se considera de menor prioridad que los recursos críticos (como scripts / estilos). Esto sucede a menudo con imágenes.
    • La solicitud se puso en espera para esperar un socket TCP no disponible que está a punto de liberarse.
    • La solicitud se puso en espera porque el navegador solo permite seis conexiones TCP por origen en HTTP 1. Tiempo dedicado a hacer entradas de caché de disco (generalmente muy rápido).
  • Tiempo bloqueado / bloqueado La solicitud pasó esperando antes de que pudiera enviarse. Puede estar esperando cualquiera de los motivos descritos para hacer cola. Además, este tiempo incluye todo el tiempo dedicado a la negociación de poder.
brevemente
fuente
1

Mi caso es que la página está enviando múltiples solicitudes con diferentes parámetros cuando estaba abierta. Así que la mayoría están "estancados". Las siguientes solicitudes enviadas inmediatamente se "estancan". Evitar solicitudes innecesarias sería mejor (ser perezoso ...).

Kevin .NET
fuente
1

Como muchas personas llegan aquí para depurar su sitio web lento, me gustaría informarle sobre mi caso, que ninguna de las explicaciones de Google ayudó a resolver. Mis enormes tiempos de inactividad (a veces 1 minuto) fueron causados ​​por Apache que se ejecuta en Windows con muy pocos hilos de trabajo para manejar las conexiones, por lo tanto, estaban en cola.

Esto puede aplicarse a usted si su registro de Apache tiene la siguiente nota:

Server ran out of threads to serve requests. Consider raising the ThreadsPerChild setting

Este problema se resuelve en Apache httpd.conf. Descomentar: Incluir conf / extra / httpd-mpm.conf

Y edite httpd-mpm.conf 

<IfModule mpm_winnt_module>
   ThreadLimit              2000
   ThreadsPerChild          2000
   MaxConnectionsPerChild   0
</IfModule>

Tenga en cuenta que es posible que no necesite 2000 subprocesos o que necesite más. 2000 estuvo bien para mi caso.

Renno K
fuente