ver tools plugin para page how headers google extension developer consola comandos code chrome cabeceras google-chrome http httprequest google-chrome-devtools

google chrome - tools - Comprender el estado de "bloqueo" del registro de red Chrome



plugin http headers (4)

Tengo un siguiente registro de red en Chrome:

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


Google ofrece un desglose de estos campos en la sección Evaluación del rendimiento de la red 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 cualquier 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 la regla máxima de seis conexiones TCP de Chrome por origen.

(Si olvida, Chrome tiene un enlace "Explicación" en la información sobre herramientas de desplazamiento 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.


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 ...).


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.

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 cualquier tiempo dedicado a la negociación de poder.