web-dev-qa-db-fra.com

Compréhension de l’état "bloqué" du journal de réseau Chrome

J'ai un compte réseau suivant en chrome:

network log

Je n'y comprends rien: quelle est la différence entre des barres grises remplies et des barres grises transparentes?.

147
setec

Google fournit une ventilation de ces champs dans la section Évaluation des performances du réseau de la documentation de DevTools.

Extrait de Synchronisation du réseau de ressources :

Bloqué/bloqué

Temps d'attente de la demande avant de pouvoir l'envoyer. Ce temps inclut tout temps consacré à la négociation par procuration. De plus, ce temps inclut le moment où le navigateur attend qu'une connexion déjà établie soit disponible pour une réutilisation, en obéissant au maximum de six de Chrome TCP connexion par règle d'origine.

(Si vous oubliez, Chrome a un lien "Explication" dans l'info-bulle de survol et sous le panneau "Chronométrage".)

Cela s'explique principalement par le fait que Chrome ne télécharge que 6 fichiers par serveur à la fois et que les autres demandes sont bloquées jusqu'à ce qu'un emplacement de connexion soit disponible.

Ce n'est pas nécessairement quelque chose qui doit être corrigé, mais une façon d'éviter l'état bloqué serait de répartir les fichiers sur plusieurs noms de domaine et/ou serveurs, en conservant CORS à l’esprit si cela s’applique à vos besoins, cependant, HTTP2 est probablement une meilleure option pour l’avenir. Le regroupement des ressources (comme la concaténation JS et CSS) peut également aider à réduire le nombre de connexions bloquées.

169
Alexander O'Mara

DevTools: [réseau] explique les barres vides précédant la requête

Enquêté davantage et ont identifié qu'il n'y a pas de différence significative entre nos gammes Stalled et Queuing. Les deux sont calculés à partir du delta d'autres horodatages, plutôt que fournis par netstack ou le rendu.


Actuellement, si nous attendons qu'un socket soit disponible:

  • nous l'appellerons bloqué si une négociation par procuration a eu lieu
  • nous l'appellerons en file d'attente si aucun travail proxy/ssl n'était requis.
10
Naga Kiran

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

Cela vient du site officiel de Chome-devtools et ça aide. Ici je cite:

  • Mise en file d'attente Si une demande est mise en file d'attente, elle indique que:
    • La requête a été reportée par le moteur de rendu car elle est considérée comme ayant une priorité inférieure aux ressources critiques (telles que les scripts/styles). Cela arrive souvent avec des images.
    • La demande a été mise en attente pour attendre un socket TCP non disponible et sur le point de se libérer.
    • La demande a été mise en attente car le navigateur n'autorise que six TCP connexions par origine sur HTTP 1. Temps passé à la création d'entrées dans le cache disque (généralement très rapide).
  • Stalled/Blocking Délai d'attente de la demande avant son envoi. Il peut être en attente d'une des raisons décrites pour la mise en file d'attente. De plus, ce temps inclut tout temps consacré à la négociation de proxy.
6
briefy

Mon cas est la page envoie plusieurs demandes avec des paramètres différents quand il était ouvert. Donc, la plupart sont "bloqués". Les demandes suivantes immédiatement envoyées sont "bloquées". Éviter les demandes inutiles serait mieux (être paresseux ...).

1
Kevin .NET