Was passiert während der Lücke zwischen zwei Ressourcen in der Zeitleiste von Chrome Dev Tools?

Question

Kann mir jemand in den Chrome-Entwicklungstools auf der Registerkarte "Netzwerk" im Fenster "Zeitleiste" erklären, was ich im Folgenden erfasse? Was bedeutet die Lücke konkret?

Während dieser schrecklich langsam Last Seite die Ressourcen auf einige Informationen angezeigt werden, wie sie bis ~ 7 Sekunden geladen werden oder so. Dem folgt eine große Lücke. Und dann in der Nähe von ~ 13 Sekunden gibt es Informationen über das Laden der Ressourcen wieder.

Ich habe die vollständige Liste der Ressourcen abgeschnitten, aber die einzige Ressourcenleiste, die die Lücke überbrückt, ist die erste Ressource für die primäre Seite. Er identifiziert sie, was als „Content Download“ (der blaue Balken) in den Spalt passiert:

Die gesamten Ressourcen auf der Seite erscheinen um 2,5 MB groß zu sein. In diesem Beispiel finden die Ereignisse DOMContentLoaded und Load gleichzeitig in der Nähe der ~ 13 Sekunden-Marke statt.

Answer 1

Chrome lädt externe Ressourcen wie Bilder oder Skripte, bevor der HTML-Download der Seite abgeschlossen ist.

Zum Beispiel, hier habe ich ein Bild oben auf der Seite, und dann weiter unten in der Mitte des HTML ein Skript-Tag.

Das bedeutet auch, dass die Load Ereignis schnell nach DOMContentLoaded folgt, weil Chrome hat bereits die zusätzlichen Mittel abgerufen.

In Ihrem Fall gibt es einen JavaScript-Code, der auf eines dieser Ereignisse wartet und dann zusätzliche Anforderungen auslöst.

Der Grund für die Ladezeit von 13s ist, dass nach der Wartezeit von ~ 4s weitere 9s benötigt werden, um das gesamte Dokument herunterzuladen.

Dies kann daran liegen, dass die Internetverbindung des Browsers schlecht ist oder weil der Server lange braucht, um die Antwort zu generieren, oder weil der Server nicht über genügend Bandbreite verfügt.