Im Netzwerkbereich in den Entwicklertools deines Browsers findest du heraus, welche Ressourcen und wann sie geladen werden. Jede Zeile im Steuerfeld „Netzwerk“ entspricht einem bestimmte URL, die von Ihrer Webanwendung geladen wurde.
<ph type="x-smartling-placeholder">
Wissen, was geladen wird
Um die richtigen Caching-Strategien für Ihre Webanwendung zu entwickeln, So wissen Sie genau, was Sie laden. Beim Aufbau eines zuverlässigen Webs kann das Netzwerk allen Arten von dunklen Mächten ausgesetzt sein. Erforderliche Schritte die Schwachstellen des Netzwerks besser zu verstehen, wenn Sie sie in Ihrem
Sie denken vielleicht, dass Sie bereits eine gute Vorstellung davon haben, geladen wird. Wenn ihr nur wenig statischen HTML-Code verwendet, JavaScript-, CSS- und Bilddateien. Aber sobald Sie anfangen, Drittanbieter-Ressourcen, die in Content Delivery Networks gehostet werden, dynamischen API-Anfragen und servergenerierten Antworten zu erkennen, düster.
Eine Caching-Strategie, die für einige kleine CSS-Dateien sinnvoll ist, reicht wahrscheinlich für Hunderte von großen Bildern sinnvoll ist.
Ladestand anzeigen
Ein weiterer Teil des gesamten Ladebilds ist, wann alles geladen wird.
Einige Anfragen an das Netzwerk, z. B. Navigationsanfrage für Ihren anfänglichen HTML-Code, werden unbedingt ausgeführt, sobald ein Nutzer eine bestimmte URL Dieser HTML-Code könnte hartcodierte Verweise auf wichtige CSS- oder JavaScript-Elemente enthalten. -Dateien, die ebenfalls geladen werden müssen, damit Ihre interaktive Seite angezeigt werden kann. Diese Alle Anfragen befinden sich in Ihrem kritischen Ladepfad. Sie müssen aggressiv vorgehen, damit sie zuverlässig schnell sind.
Andere Ressourcen wie API-Anfragen oder Lazy-Loading-Assets erst einige Zeit, nachdem alle anfänglichen Ladevorgänge abgeschlossen sind. Wenn Anfragen erfolgen nur nach einer bestimmten Abfolge von Nutzerinteraktionen, kann es passieren, dass ein ganz anderer Satz von Ressourcen angefordert wird, bei mehreren Besuchen derselben Seite. Eine weniger aggressive Caching-Strategie oft geeignet für Inhalte, die deiner Meinung nach des kritischen Ladepfads.
Die Spalten Name und Typ geben Aufschluss darüber,
Die Spalten Name und Typ liefern ein aussagekräftiges Bild davon, was gerade passiert geladen. Die Antwort auf Was wird geladen? im Beispiel oben insgesamt vier URLs, die jeweils einen eigenen Inhaltstyp darstellen.
Der Name steht für die URL, die Ihr Browser angefordert hat. Sie sehen jedoch nur
den letzten Teil des angegebenen URL-Pfads. Wenn beispielsweise
https://example.com/main.css ist geladen, am Ende sehen Sie nur main.css
die unter „Name“ aufgeführt sind.
Die letzten Zeichen des URL-Pfads nach dem
Punkt (z.B. "css") ist die URL-Erweiterung.
Die Erweiterung der URL gibt in der Regel an,
welche Art von Ressource angefordert wird,
und bezieht sich direkt auf die Informationen, die in der Spalte Typ angezeigt werden. Beispiel:
v2.html ist ein Dokument und main.css ein Stylesheet.
Die Spalte „Wasserfall“ hilft dabei,
Sehen Sie sich die Spalte Wasserfall an. Beginnen Sie oben und arbeiten Sie sich weiter nach unten vor. Die Die Länge jedes Balkens steht für die Gesamtzeit, die für das Laden für jede Ressource. Woran erkennen Sie den Unterschied zwischen einer Anfrage, die als des kritischen Ladepfads und einer Anfrage, die dynamisch ausgelöst wird, nach dem anfänglichen Laden der Seite dauert?
Die erste Anfrage in der Vermittlungsabfolge bezieht sich immer auf das HTML-Dokument.
z. B. v2.html. Alle nachfolgenden Anfragen werden wie
Wasserfall!) aus dieser ersten Navigationsanfrage an, basierend auf den Bildern, Skripts,
und formatiert das HTML-Dokument, auf das verwiesen wird.
Die Vermittlungsabfolge zeigt, dass die Anfragen, sobald v2.html
für die Assets, auf die es verweist (auch als untergeordnete Ressourcen bezeichnet). Die
kann ein Browser mehrere Unterressourcen gleichzeitig anfordern.
dargestellt durch die überlappenden Balken in der Spalte „Wasserfall“ für main.css und
logo.svg. Schließlich können Sie auf dem Screenshot sehen, dass main.js mit der
und der Ladevorgang ist abgeschlossen, nachdem die anderen drei URLs abgeschlossen sind.
.