Grundlegendes zum Status des Chrome-Netzwerkprotokolls "Angehalten"

172

Ich habe ein folgendes Netzwerkprotokoll in Chrome:

Netzwerkprotokoll

Ich verstehe eines nicht: Was ist der Unterschied zwischen gefüllten grauen Balken und transparenten grauen Balken?

google-chrome http httprequest google-chrome-devtools setec
quelle
2
Ich sehe das in den letzten zwei Wochen sehr oft. Ich lade 125 Elemente, wenn ich eine Schichtaktualisierung in Chrom durchführe. Hin und wieder bleiben 3-4 dieser Dateien im Zustand "Blockiert" hängen. Alle Dateien sind PNG-Dateien. Die einzige Lösung besteht darin, die Registerkarte zu schließen, eine andere Tabelle erneut zu öffnen und die Entwicklungstools erneut zu öffnen. Ich arbeite seit über einem Jahr ohne dieses Problem an dieser Codebasis und es gab keine Änderungen, von denen ich glaube, dass sie ein solches Verhalten bei PNG-Dateien verursachen würden.
Greg Grater

Antworten:

202

Google gibt eine Aufschlüsselung dieser Felder im Abschnitt " Bewertung der Netzwerkleistung " der DevTools-Dokumentation.

Auszug aus dem Resource Network Timing :

Blockiert / Blockieren

Zeit, die die Anfrage gewartet hat, bevor sie gesendet werden konnte. Diese Zeit schließt jede Zeit ein, die für Proxy-Verhandlungen aufgewendet wird. In dieser Zeit wartet der Browser außerdem darauf, dass eine bereits hergestellte Verbindung zur Wiederverwendung verfügbar wird, wobei die maximal sechs TCP-Verbindungen von Chrome pro Ursprungsregel eingehalten werden.

(Wenn Sie vergessen haben, hat Chrome im Hover-Tooltip und im Bereich "Timing" einen Link "Erläuterung".)

Der Hauptgrund dafür ist, dass Chrome jeweils nur 6 Dateien pro Server herunterlädt und andere Anforderungen blockiert werden, bis ein Verbindungssteckplatz verfügbar wird.

Dies muss nicht unbedingt behoben werden, aber eine Möglichkeit, den blockierten Status zu vermeiden, besteht darin, die Dateien auf mehrere Domänennamen und / oder Server zu verteilen und CORS zu berücksichtigen, falls dies für Ihre Anforderungen zutreffend ist. HTTP2 ist jedoch wahrscheinlich die bessere Option vorwärts gehen. Die Bündelung von Ressourcen (wie die Verkettung von JS und CSS) kann auch dazu beitragen, die Anzahl blockierter Verbindungen zu verringern.

Alexander O'Mara
quelle
1
Ist das Limit von 6 Dateien auch für lokale Dateien vorhanden? Ich stoße von Zeit zu Zeit auf den blockierten Zustand, wenn ich eine Seite vonfile:///C:/...
Ilya Kogan
@IlyaKogan Beim Laden aus dem Dateisystem scheint es keine Beschränkung auf 6 Dateien zu geben, aber es scheint eine "blockierte" Phase zu geben. Ich vermute, dass dies die Zeit darstellt, die Chrome zum Öffnen der Datei im Dateisystem benötigt, und die Phase "Herunterladen von Inhalten" die Zeit, die zum Laden des Inhalts in den Speicher benötigt wird.
Alexander O'Mara
4
Zu Ihrer Information: Auf Chrome 42 wird die Wartezeit in der Warteschlange nicht wie in den Dokumenten angegeben als Blockiert / Blockierend gezählt, sondern in der Gesamtsumme enthalten. Um Zeit in die Warteschlange zu bekommen, subtrahieren Sie alle Abschnitte von der Summe. Hoffentlich aktualisieren sie ihre Dokumente (oder beheben den Fehler).
Delrox
20
Aber was ist der Unterschied zwischen den weißen und grauen Balken?
Kat
Domain-Sharding zur Erzielung einer höheren Parallelität wird nicht empfohlen. Verwenden Sie stattdessen HTTP2. Siehe: youtube.com/watch?v=yURLTwZ3ehk
Homer6
13

DevTools: [Netzwerk] erklärt leere Balken vor der Anforderung

Weitere Untersuchungen haben ergeben, dass es keinen signifikanten Unterschied zwischen unseren Bereichen Stalled und Queuing gibt. Beide werden aus den Deltas anderer Zeitstempel berechnet und nicht vom Netstack oder Renderer bereitgestellt.

Wenn wir derzeit darauf warten, dass ein Socket verfügbar wird:

  • Wir werden es als blockiert bezeichnen, wenn eine Proxy-Verhandlung stattgefunden hat
  • Wir nennen es Warteschlange, wenn keine Proxy / SSL-Arbeit erforderlich war.
Naga Kiran
quelle
6

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

Dies kommt von der offiziellen Seite von Chome-devtools und es hilft. Hier zitiere ich:

  • Anstehen Wenn eine Anforderung in die Warteschlange gestellt wird, bedeutet dies:
    • Die Anforderung wurde von der Rendering-Engine verschoben, da sie eine niedrigere Priorität als kritische Ressourcen (wie Skripte / Stile) hat. Dies passiert häufig bei Bildern.
    • Die Anforderung wurde angehalten, um auf einen nicht verfügbaren TCP-Socket zu warten, der gerade freigegeben wird.
    • Die Anforderung wurde angehalten, da der Browser nur sechs TCP-Verbindungen pro Ursprung unter HTTP 1 zulässt. Zeitaufwand für die Erstellung von Festplatten-Cache-Einträgen (normalerweise sehr schnell).
  • Blockierte / blockierende Zeit, die die Anforderung gewartet hat, bevor sie gesendet werden konnte. Es kann auf einen der für die Warteschlange beschriebenen Gründe warten. Darüber hinaus schließt diese Zeit die für die Proxy-Aushandlung aufgewendete Zeit ein.
Briefy
quelle
1

Mein Fall ist, dass die Seite beim Öffnen mehrere Anfragen mit unterschiedlichen Parametern sendet. Die meisten werden also "ins Stocken geraten". Folgende Anfragen, die sofort gesendet werden, werden "blockiert". Es wäre besser, unnötige Anfragen zu vermeiden (faul zu sein ...).

Kevin .NET
quelle
1

Da viele Leute hier ankommen und ihre langsame Website debuggen, möchte ich Sie über meinen Fall informieren, zu dessen Lösung keine der Google-Erklärungen beigetragen hat. Meine großen Stillstandszeiten (manchmal 1 Minute) wurden dadurch verursacht, dass Apache unter Windows mit zu wenig Arbeitsthreads ausgeführt wurde, um die Verbindungen zu verarbeiten, weshalb sie in die Warteschlange gestellt wurden.

Dies kann auf Sie zutreffen, wenn Ihr Apache-Protokoll den folgenden Hinweis enthält:

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

Dieses Problem wurde in Apache httpd.conf behoben. Kommentar: Fügen Sie conf / extra / httpd-mpm.conf hinzu

Und bearbeiten Sie httpd-mpm.conf 

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

Beachten Sie, dass Sie möglicherweise nicht 2000 oder mehr Threads benötigen. 2000 war für meinen Fall in Ordnung.

Renno K.
quelle