Die Reihenfolge, in der Browser HTML laden und rendern

Die Reihenfolge, in der Browser HTML laden und rendern, wie man das Laden von HTML-Seiten beschleunigt, die Prozesse zum Laden und Parsen von HTML-Seiten usw. werden in diesem Artikel ausführlich vorgestellt.

Die Reihenfolge, in der der Browser HTML lädt und rendert

1. Die Reihenfolge des IE-Downloads erfolgt von oben nach unten, und die Reihenfolge des Renderings erfolgt ebenfalls von oben nach unten. Das Herunterladen und Rendern erfolgt gleichzeitig.

2. Beim Rendern eines bestimmten Teils der Seite wurden alle darüber liegenden Teile heruntergeladen (dies bedeutet nicht, dass alle zugehörigen Elemente heruntergeladen wurden).

3. Wenn Sie auf eine in ein semantisches Interpretations-Tag eingebettete Datei (JS-Skript, CSS-Stil) stoßen, aktiviert der Download-Prozess von IE eine separate Verbindung zum Herunterladen.

4. Nachdem das Stylesheet heruntergeladen wurde, wird es zusammen mit allen zuvor heruntergeladenen Stylesheets analysiert. Nach Abschluss der Analyse werden alle vorherigen Elemente (einschließlich zuvor gerenderter Elemente) erneut gerendert.

5. Bei einer Neudefinition in JS oder CSS überschreibt die später definierte Funktion die zuvor definierte Funktion.

JS wird geladen

1. Download und Analyse nicht parallel möglich (Download wird blockiert).

2. Wenn auf JS verweist, sendet der Browser eine js-Anfrage und wartet auf die Rückgabe der Anfrage. Da der Browser eine stabile DOM-Baumstruktur benötigt und es wahrscheinlich

-Code in JS gibt, der die DOM-Baumstruktur direkt ändert, z. B. die Verwendung von document.write oder app end Kind oder sogar direkt location.href zum Springen verwenden. Um zu verhindern, dass JS den DOM-Baum

ändert, muss der Browser den DOM-Baum neu erstellen, damit er andere Downloads und Präsentationen blockiert .

So beschleunigen Sie das Laden von HTML-Seiten
1. Das Gewicht der Seite ist der wichtigste Faktor Auswirkungen auf die Ladegeschwindigkeit.

b.
Löschen
unnötige Leerzeichen und
Kommentare. c. Verschieben Sie das Inline-Skript und CSS in externe Dateien.
d. Sie können HTML Tidy verwenden, um Gewicht für HTML zu verlieren, und Sie können auch einige Komprimierungstools verwenden, um Gewicht für
JavaScript
zu verlieren.
2. Reduzieren Sie die Anzahl der Dateien:
a. Durch die Reduzierung der Anzahl der auf der Seite referenzierten Dateien kann die Anzahl der HTTP-Verbindungen verringert werden.

b. Viele JavaScript- und CSS-Dateien können zusammengeführt werden, und Caibangzi hat seine JavaScript-Funktionen und Prototype.js zusammengeführt.

3. Domainnamen-
Abfrage reduzieren
:
a. DNS-Abfragen und Domainnamen-Auflösung sind ebenfalls zeitaufwendig, also reduzieren Sie externes JavaScript, CSS, Bilder
Verweise auf andere Ressourcen: Je weniger unterschiedliche Domainnamen verwendet werden, desto besser.
4. Cache
Wiederverwendung von Daten:
A.
5. Optimieren Sie die Ladereihenfolge der Seitenelemente:

a. Laden Sie zuerst den ursprünglich auf der Seite angezeigten Inhalt und das damit verbundene JavaScript und CSS, und laden Sie dann HTML-bezogene Dinge, z was zunächst nicht angezeigt wird Relevante Bilder, Flash,
Videos
und andere sehr umfangreiche Ressourcen werden zuletzt geladen.
6. Reduzieren Sie die Anzahl von Inline-JavaScript:
a. Der Browser-Parser geht davon aus, dass Inline-JavaScript die Seitenstruktur ändert, sodass die Verwendung von Inline-JavaScript teurer ist.

b. Verwenden Sie nicht document.write(), um Inhalte auszugeben, sondern verwenden Sie moderne
W3C
DOM-Methoden, um Seiteninhalte für moderne Browser zu verarbeiten.
7. Verwenden Sie modernes CSS und legale Tags:
a. Durch die Verwendung von modernem CSS + Text können beispielsweise einige Bilder vollständig durch Text ersetzt werden.

b. Verwenden Sie legale Tags, um zu verhindern, dass der Browser beim Parsen von HTML „Fehlerkorrektur“ durchführt. Dies kann auch von HTML Tidy verwendet werden, um HTML zu verschlanken.

8. Teilen Sie Ihren Inhalt auf:

a. Verwenden Sie keine verschachtelten Tabellen, sondern nicht verschachtelte Tabellen. Teilen Sie das auf einer großen verschachtelten Tabelle basierende Layout in mehrere kleine Tabellen auf, sodass Sie nicht warten müssen, bis der gesamte Inhalt der Seite (oder der großen Tabelle) geladen ist, bevor Sie ihn anzeigen.

9. Geben Sie die Größe von Bildern und Tabellen an:

a. Wenn der Browser die Größe des Bildes oder der Tabelle sofort ermitteln kann, kann er die Seite sofort anzeigen, ohne dass einige davon neu erstellt werden müssen Layout-Arrangements.

b. Dies beschleunigt nicht nur die Anzeige der Seite, sondern verhindert auch einige unangemessene Layoutänderungen nach dem Laden der Seite.

c. Bild verwendet
Höhe
und
Breite. HTML-Seitenlade- und Analyseprozess

1. Der Benutzer gibt die URL ein (vorausgesetzt, es handelt sich um eine HTML-Seite und der Besuch erfolgt zum ersten Mal), der Browser sendet eine Anfrage an den Server und der Server gibt eine HTML-Datei zurück.

2. Der Browser beginnt mit dem Laden des HTML-Codes und stellt fest, dass sich im Tag <head> befindet.

3. Der Browser sendet erneut eine Anfrage für die CSS-Datei und der Server gibt die CSS-Datei zurück.

4. Der Browser lädt weiterhin den Code des , die CSS-Datei wurde abgerufen und die Seite kann gerendert werden.

5. Der Browser findet ein -Tag, das auf ein Bild verweist, und sendet eine Anfrage an den Server. Zu diesem Zeitpunkt wartet der Browser nicht, bis das Bild heruntergeladen wurde, sondern rendert weiterhin den nachfolgenden Code.

6. Da das Bild einen bestimmten Bereich einnimmt und die Anordnung nachfolgender Absätze beeinflusst, muss der Browser zurückgehen und diesen Teil des Codes neu rendern.

7. Der Browser findet ein