Heim > Artikel > Web-Frontend > Detaillierte Einführung in den Lade- und Analyseprozess von HTML-Seiten
Detaillierte Einführung in den Lade- und Analyseprozess von HTML-Seiten
- 高洛峰Original
- 2017-02-09 17:31:041759Durchsuche
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. Interessierte Freunde sollten sich das Laden von Browsern nicht entgehen lassen und Die Reihenfolge beim Rendern von HTML
1 Die Reihenfolge des IE-Downloads erfolgt von oben nach unten, und die Reihenfolge des Renderns erfolgt ebenfalls von oben nach unten.
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 semantisch interpretierbare Tag-eingebettete Datei (JS-Skript, CSS-Stil) stoßen, aktiviert der IE-Downloadvorgang 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 verwiesen wird, 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 in JS wahrscheinlich
Code gibt, der die DOM-Baumstruktur direkt ändert, z. B. durch die Verwendung von document.write oder appendChild oder sogar direkt durch die Verwendung von location.href. Jump, um zu verhindern, dass JS den DOM-Baum ändert
, muss der Browser den DOM-Baum neu erstellen, damit er andere Downloads und Renderings blockiert
So beschleunigen Sie HTML-Seitenladegeschwindigkeit
1. Seitengewichtsverlust:
a. Das Gewicht der Seite ist der wichtigste Faktor, der die Ladegeschwindigkeit beeinflusst.
b. Löschen Sie 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 reduzieren.
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. Domainnamenabfragen reduzieren:
a. DNS-Abfragen und Domainnamenauflösung sind ebenfalls zeitaufwändig, daher ist es notwendig, die Verweise auf externes JavaScript, CSS, Bilder und anderes zu reduzieren Je mehr unterschiedliche Domänennamen verwendet werden, desto weniger ist besser.
4. Wiederverwendete Daten zwischenspeichern:
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 Sie beispielsweise einige Bilder vollständig durch Text ersetzen.
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. Das 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 es handelt sich um den ersten Besuch) und der Browser sendet eine Anfrage an den Server. Der Server gibt die HTML-Datei zurück.
2. Der Browser beginnt mit dem Laden des HTML-Codes und stellt fest, dass sich im
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
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