Was ist das Laden einer Webseite?
Das Laden einer Webseite ist mehr oder weniger das Herunterladen einer Datei. Was Sie vom Server bekommen, ist in den meisten Fällen nur eine über HTTP übertragene HTML-Datei. Zuerst stellen Sie eine HTTP-Anfrage an die URL der Site, z GET http://superuser.com.
Wie William Jackson sagte, verwendet HTTP das Content-LengthHeader-Feld, um die Größe dieser Datei im Voraus anzuzeigen. Dies kann der Browser auswerten, um zu erraten, wie weit er durch das Herunterladen der gesamten Website erzielt wurde.
Dadurch werden jedoch nicht alle Ressourcen abgedeckt, die eine HTML-Datei durch Referenzierung laden kann. Diese könnten umfassen:
- Externe Bilder
- Externe Stylesheets
- Externe Skripte
- Frames
- AJAX lädt
Wie kann der Browser wissen, wie viel er laden muss?
Es ist nun die Aufgabe des Browsers, diese Verweise zu finden und auch anzufordern. Daher fragt der Browser für jede externe Referenz entweder seinen Cache ab oder sendet eine neue HTTP-Anforderung. Für Super User sind dies die folgenden Dateien, die in Inhaltsverteilungsnetzwerken gehostet werden, um eine schnellere Leistung zu erzielen:
GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js- die jQuery-HauptdateiGET http://cdn.sstatic.net/js/stub.js- einige JS-FunktionenGET http://cdn.sstatic.net/superuser/all.css- das Stylesheet- ...
Sie können dies mit Firebug oder Chrome Debugger sehen, wenn Sie die Timeline-Überwachung aktivieren. Dies ist die Zeitleiste des Ladens von Super User, die so gefiltert ist, dass nur Anforderungen angezeigt werden. Klicken um zu vergrößern:
Wie wir sehen können, würde das Laden der Haupt-Super User-Site die längste Zeit in Anspruch nehmen, aber von dieser Seite aus sind andere Seitenladungen (z. B. HTTP-Anforderungen oder Cache-Anforderungen) beteiligt. Alle stellen auch ihre Daten offen Content-Length, daher kann der Browser eine gute Schätzung der Ladezeit dieser Dateien treffen.
Und da dies alles innerhalb kürzester Zeit geschieht, werden Sie die kleinen Unregelmäßigkeiten in der Fortschrittsleiste nicht bemerken. Manchmal wird der Fortschrittsbalken bei zwei Dritteln hängen - dies kann der Fall sein, wenn der Browser eine externe Ressource nicht so schnell lädt wie die anderen.
Wie implementieren Browser das?
Google Chrome
Ich habe mir die Quellen von Google Chrome (auch bekannt als Chromium) angesehen und diese Klasse namens ProgressTracker.cpp gefunden . Eigentlich wurde es von Apple geschrieben und stammt höchstwahrscheinlich von der WebKit- Rendering-Engine. Es enthält die folgenden Felder:
ProgressTracker::ProgressTracker() : m_totalPageAndResourceBytesToLoad(0), m_totalBytesReceived(0) Wie gesagt, wird also die Gesamtzahl der Ressourcen-Bytes identifiziert und der Fortschritt entsprechend geändert. Es gibt einen interessanten Kommentar, der zeigt, wie die tatsächliche Bedeutung der zuerst geladenen Seite erhöht wird:
// Bei Dokumenten, die das Layoutsystem von WebCore verwenden, behandeln Sie das erste Layout als Zwischenpunkt.
Wenn also die erste Seite geladen wird (und die externen Ressourcen noch geladen werden müssen), beträgt der Fortschritt 50%.
Firefox (Fission-Add-On)
Nun gibt es auch eine etwas einfachere Metrik. Ich habe mir Fission angesehen, die Fortschrittsbalken-Erweiterung für Firefox. Wenn ich es nicht falsch lese, tut es etwas, woran man leicht denken könnte.
Jede Website besteht aus einer Reihe von DOM-Elementen . Durch Analysieren der ersten HTML-Site kann die Gesamtzahl der zu ladenden DOM-Elemente geschätzt werden.
Erhöhen Sie für jedes geladene DOM-Element den Zähler und zeigen Sie einfach einen Fortschrittsbalken an.