☰

Woher weiß der Browser, wie weit die Seite geladen wurde?

tag-icon • tag-icon firefox browser progress
Woher weiß der Browser, wie weit die Seite geladen wurde?

Beim Betrachten des Fortschrittsbalkens des Browsers, der beim Laden einer Webseite manchmal gegen Ende langsamer wird, habe ich mich gefragt, ob der Browser den Fortschritt basierend auf demGrößeder auf der Seite vorhandenen Elemente oder derNEIN.von Elementen oder etwas anderem?

Vielleicht weiß jemand, der die Quelle von Firefox oder einem anderen Browser überprüft hat, etwas genauer darüber Bescheid?

Antwort1

WasIsteine Website laden?

Laden einer WebseiteIstmehr oder weniger wie das Herunterladen einer Datei. Was Sie vom Server erhalten, ist – in den meisten Fällen – nur eine über HTTP übertragene HTML-Datei. Zuerst stellen Sie eine HTTP-Anfrage an die URL der Site, etwa GET http://superuser.com.

Wie William Jackson sagte, verwendet HTTP dieContent-LengthHeader-Feld, um Ihnen die Größe dieser Datei im Voraus anzuzeigen. Dies ist etwas, das der Browser auswerten kann, um zu erraten, wie weit er beim Herunterladen der gesamten Site fortgeschritten ist.

Dies deckt jedoch nicht alle Ressourcen ab, die eine HTML-Datei durch Referenzierung laden kann. Dazu können gehören:

  • Externe Bilder
  • Externe Stylesheets
  • Externe Skripte
  • Rahmen
  • AJAX lädt

Woher weiß der Browser, wie viel geladen werden muss?

Es ist nun die Aufgabe des Browsers, diese Referenzen zu finden und sie auch anzufordern. Für jede externe Referenz konsultiert der Browser also entweder seinen Cache oder sendet eine neue HTTP-Anforderung. Für Super User wären dies die folgenden Dateien, die für eine schnellere Leistung in Content-Distribution-Netzwerken gehostet werden:

  • GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js– die Haupt-jQuery-Datei
  • GET http://cdn.sstatic.net/js/stub.js– einige JS-Funktionen
  • GET http://cdn.sstatic.net/superuser/all.css– das Stylesheet
  • ...

Sie können dies tatsächlich mit Firebug oder dem Debugger von Chrome sehen, wenn Sie die Zeitleistenverfolgung aktivieren. Dies ist die Zeitleiste des Ladens von Super User, gefiltert, sodass nur Anfragen angezeigt werden. Zum Vergrößern klicken:

Bildbeschreibung hier eingeben

Wie wir sehen, würde das Laden der Haupt-Superuser-Site am längsten dauern, aber kaskadierend dazu sind auch andere Seitenladevorgänge (z. B. HTTP-Anfragen oder Cache-Anfragen) beteiligt. Alle diese legen auch ihre offen Content-Length, daher kann der Browser gut abschätzen, wie lange das Laden all dieser Dateien dauern wird.

Und da all dies innerhalb eines sehr kurzen Zeitrahmens geschieht, werden Sie die kleinen Unregelmäßigkeiten im Fortschrittsbalken nicht bemerken. Manchmal sehen Sie, dass der Fortschrittsbalken bei zwei Dritteln hängen bleibt – das kann daran liegen, dass der Browser eine externe Ressource nicht so schnell lädt wie die anderen.

Wie implementieren Browser dies?

Google Chrome

Ich habe mir die Quellen von Google Chrome (auch Chromium genannt) angesehen und diese Klasse namensProgressTracker.cpp. Tatsächlich wurde es von Apple geschrieben, also stammt es höchstwahrscheinlich aus demWebKitRendering-Engine. Es umfasst die folgenden Felder:

ProgressTracker::ProgressTracker()
    : m_totalPageAndResourceBytesToLoad(0)
    , m_totalBytesReceived(0)

Damit wird, wie gesagt, die Gesamtzahl der Ressourcenbytes ermittelt und der Fortschritt entsprechend geändert. Es gibt einen interessanten Kommentar, der zeigt, wie die tatsächliche Bedeutung der ersten geladenen Seite erhöht wird:

// Behandeln Sie bei Dokumenten, die das Layoutsystem von WebCore verwenden, das erste Layout als Mittelpunkt.

Wenn also die erste Seite geladen ist (und ihre externen Ressourcen noch geladen werden müssen), beträgt der Fortschritt 50 %.

Firefox (Fission-Add-on)

Es gibt auch eine etwas einfachere Metrik. Ich habe mir angesehenFission, die Fortschrittsbalken-Erweiterung für Firefox. Wenn ich es nicht falsch lese, macht es etwas, woran man leicht denken kann.

Jede Website besteht aus einer Reihe vonDOM-ElementeDurch Parsen der ersten HTML-Seite 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 entsprechend einen Fortschrittsbalken an.

Antwort2

Wenn ein Browser eine Datei von einem Server anfordert, hat der Server die Möglichkeit, dem Browser im Voraus mitzuteilen, wie groß die Datei ist. Der Server tut dies, indem er eineContent-Length-Header.

Es gibt noch weitere Informationen überwie ein Browser die Größe einer heruntergeladenen Datei bestimmen kann.

verwandte Informationen