Detaillierte Erläuterung des Lade- und Analysevorgangs von HTML-Seiten-HTML-Tutorial-php.cn

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.

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 IE-Downloadvorgang eine separate Verbindung zum Herunterladen.

4. Nachdem das Stylesheet heruntergeladen wurde, wird es zusammen mit allen zuvor heruntergeladenen Stylesheets analysiert. Nach Abschluss des Parsings werden alle vorherigen Elemente (einschließlich derjenigen, die zuvor gerendert wurden) 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 sehr wahrscheinlich

Codes in JS gibt, die die DOM-Baumstruktur direkt ändern, z. B. die Verwendung von document.write oder appendChild oder sogar die direkte 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

Anleitung Beschleunigen Sie die Ladegeschwindigkeit der HTML-Seite
1. Der Gewichtsverlust der Seite ist der wichtigste Faktor, der die Ladegeschwindigkeit beeinflusst.

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 HTML zu verschlanken, und Sie können auch einige Komprimierungstools verwenden, um
JavaScript
zu verschlanken.
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-
-Abfragen reduzieren
:
a. DNS-Abfragen und Domainnamen-Auflösung sind ebenfalls zeitaufwändig, daher ist es notwendig, Verweise auf externes JavaScript zu reduzieren, CSS, Bilder und 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. gefällt, 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. Sie können HTML Tidy auch verwenden, 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 -Tag ein 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 -Teils des HTML, 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