Detaillierte Einführung in den Prozess zum Laden und Parsen von HTML-Seiten_HTML/Xhtml_Webseitenproduktion

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

1. Die Reihenfolge beim Herunterladen und Rendern erfolgt von oben nach unten werden gleichzeitig durchgeführt.

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 oder Divs. 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 -Tag befindet, das auf eine externe CSS-Datei verweist.

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 im Code, 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 <script>-Tag, das eine Zeile Javascript-Code enthält, und führt es schnell aus. <br /><br />8. Das Javascript-Skript führt diese Anweisung aus, die den Browser anweist, ein bestimmtes <style> (style.display="none") im Code auszublenden. Ups, plötzlich fehlt so ein Element und der Browser muss diesen Teil des Codes neu rendern. <br /><br />9. Als wir endlich auf die Ankunft von warteten, brach der Browser in Tränen aus... <br /><br />10. Warten Sie, es ist noch nicht vorbei, der Benutzer hat auf die Schaltfläche „Skin Change“ geklickt In der Schnittstelle ermöglicht Javascript dem Browser, den CSS-Pfad des <link>-Tags zu ändern. <br /><br />11. Der Browser ruft alle Anwesenden auf <div><span><ul><li>, „Packen Sie alle Ihre Koffer, wir müssen von vorne anfangen…“, der Browser fordert den Server auf, ein neues zu erstellen CSS-Datei und rendern Sie die Seite neu.</script>