Eine detaillierte Einführung in den Lade- und Analyseprozess von HTML-Seiten
|
Die Reihenfolge, in der der Browser HTML lädt und rendert 1. Der IE lädt von oben nach unten herunter und rendert von oben nach unten. Herunterladen und Rendern erfolgen gleichzeitig. 2. Beim Rendern eines bestimmten Teils der Seite wurden alle darüber liegenden Teile heruntergeladen (nicht alle zugehörigen Elemente wurden heruntergeladen). 3. Wenn Sie auf eine Datei mit eingebettetem semantisch interpretierendem Tag (JS-Skript, CSS-Stil) stoßen, aktiviert der Downloadvorgang des Internet Explorers 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 der zuvor gerenderten) erneut gerendert. 5. Wenn eine Neudefinition in JS oder CSS erfolgt, überschreibt die später definierte Funktion die zuvor definierte Funktion. JS wird geladen 1. Herunterladen und Parsen sind 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 JS wahrscheinlich Der Code ändert direkt die DOM-Baumstruktur, beispielsweise durch Verwendung von document.write oder appendChild oder sogar durch direktes Springen mit location.href. Um JS-Änderungen zu verhindern, muss der Browser Das Ändern des DOM-Baums erfordert einen Neuaufbau des DOM-Baums und blockiert daher andere Downloads und Renderings. So beschleunigen Sie das Laden von HTML-Seiten 1. Seite Gewichtsverlust: a. Die Größe der Seite ist der wichtigste Faktor, der die Ladegeschwindigkeit beeinflusst. b. Löschen Sie unnötige Leerzeichen und Kommentare. c. Verschieben Sie Inline-Skripte und CSS in externe Dateien. d. Sie können HTML Tidy verwenden, um die Größe von HTML zu reduzieren, und Sie können auch einige Komprimierungstools verwenden, um die Größe von JavaScript zu reduzieren. 2. Reduzieren Sie die Anzahl der Dateien: a. Durch die Reduzierung der Anzahl der auf einer Seite referenzierten Dateien kann die Anzahl der HTTP-Verbindungen reduziert werden. b. Viele JavaScript- und CSS-Dateien können zusammengeführt werden und es ist am besten, sie zusammenzuführen. Caibangzi hat seine JavaScript-Funktionen und Prototype.js in einer base.js-Datei zusammengeführt. 3. Reduzieren Sie die Anzahl der Domänennamenanfragen: a. DNS-Abfragen und Domänennamenauflösungen sind ebenfalls zeitaufwändig, daher ist es notwendig, die Verweise auf externe JavaScript-, CSS-, Bilder- und andere Ressourcen zu reduzieren. Je weniger unterschiedliche Domänennamen verwendet werden, desto besser. 4. Cache-Wiederverwendungsdaten: a. Zwischenspeichern Sie wiederholt verwendete Daten. 5. Optimieren Sie die Reihenfolge des Ladens der Seitenelemente: a. Laden Sie zuerst den Inhalt, der anfangs auf der Seite angezeigt wird, sowie das zugehörige JavaScript und CSS. Laden Sie dann die HTML-bezogenen Elemente wie Bilder, Flash, Videos und andere große Ressourcen, die anfangs nicht angezeigt werden und zuletzt geladen werden. 6. Reduzieren Sie die Menge an Inline-JavaScript: a. Der Browser-Parser geht davon aus, dass Inline-JavaScript die Seitenstruktur ändert. Daher ist die Verwendung von Inline-JavaScript aufwändiger. b. Verwenden Sie document.write() nicht als Methode zur Ausgabe von Inhalten. Verwenden Sie moderne W3C-DOM-Methoden, um Seiteninhalte für moderne Browser zu verarbeiten. 7. Verwenden Sie modernes CSS und rechtliche Tags: a. Verwenden Sie modernes CSS, um Tags und Bilder zu reduzieren. Beispielsweise können Sie durch die Verwendung von modernem CSS + Text einige Bilder vollständig durch reinen Text ersetzen. b. Verwenden Sie legale Tags, um zu verhindern, dass Browser beim Parsen von HTML eine „Fehlerkorrektur“ durchführen. HTML Tidy kann auch verwendet werden, um HTML zu verschlanken. 8. Teilen Sie Ihren Inhalt in Blöcke auf: a. Verwenden Sie keine verschachtelten Tabellen, sondern stattdessen nicht verschachtelte Tabellen oder Divs. Teilen Sie ein großes, verschachteltes, tabellenbasiertes Layout in mehrere kleine Tabellen auf, damit Sie nicht warten müssen, bis die gesamte Seite (oder große Tabelle) vollständig geladen ist, bevor Sie sie anzeigen. 9. Geben Sie die Größe des Bildes und der Tabelle an: Wenn der Browser die Größe eines Bildes oder einer Tabelle sofort bestimmen kann, kann er die Seite sofort anzeigen, ohne dass er einige Layoutarbeiten durchführen muss. b. Dadurch wird nicht nur die Anzeige der Seite beschleunigt, sondern es werden auch einige unangemessene Änderungen am Layout nach dem Laden der Seite vermieden. c. Bild verwendet Höhe und Breite. Laden und Parsen von HTML-Seiten 1. Der Benutzer gibt die URL ein (vorausgesetzt, es handelt sich um eine HTML-Seite und es ist der erste Besuch), der Browser sendet eine Anfrage an den Server und der Server gibt die HTML-Datei zurück. 2. Der Browser beginnt mit dem Laden des HTML-Codes und findet im <head>-Tag ein <link>-Tag, das auf eine externe CSS-Datei verweist. 3. Der Browser sendet eine weitere Anforderung für die CSS-Datei und der Server gibt die CSS-Datei zurück. 4. Der Browser lädt weiterhin den Code im <body>-Teil des HTML, und nachdem die CSS-Datei abgerufen wurde, kann er mit dem Rendern der Seite beginnen. 5. Der Browser findet im Code ein <img>-Tag, das auf ein Bild verweist, und sendet eine Anfrage an den Server. Zu diesem Zeitpunkt wartet der Browser nicht, bis das Bild heruntergeladen ist, sondern rendert weiterhin den folgenden Code. 6. Der Server gibt die Bilddatei zurück. Da das Bild einen bestimmten Bereich einnimmt und das Layout der folgenden Absätze beeinflusst, muss der Browser zurückgehen und diesen Teil des Codes erneut rendern. 7. Der Browser findet ein <script>-Tag, das eine Zeile Javascript-Code enthält, und führt es sofort aus. 8. Das Javascript-Skript führt diese Anweisung aus, die den Browser anweist, einen <style> im Code auszublenden (style.display="none"). Was für eine Tragödie! Plötzlich fehlt dieses Element und der Browser muss diesen Teil des Codes neu rendern. 9. Endlich ist </html> da und der Browser ist in Tränen aufgelöst ... 10. Warten Sie, es ist noch nicht vorbei. Der Benutzer klickt in der Benutzeroberfläche auf die Schaltfläche „Skin ändern“, und Javascript veranlasst den Browser, den CSS-Pfad des <link>-Tags zu ändern. 11. Der Browser ruft alle Anwesenden auf und sagt: „Alle zusammenpacken, wir müssen von vorne anfangen …“ Der Browser fordert vom Server eine neue CSS-Datei an und rendert die Seite erneut. |
<<: Über die Implementierung des JavaScript-Karussells
>>: CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche
Artikel empfehlen
MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen
In MySQL können Sie die SQL-Anweisung „rename tab...
So stellen Sie eine einzelne Datenbank oder Tabelle in MySQL wieder her und mögliche Fallstricke
Vorwort: Das am häufigsten verwendete logische My...
So lösen Sie das Problem des verstümmelten MySQL-Inserts
Problembeschreibung: Beim Einfügen chinesischer Z...
So lösen Sie das jQuery-Konfliktproblem
In der Frontend-Entwicklung ist $ eine Funktion i...
CSS-Lösung zum Zentrieren von Elementen mit variabler Breite und Höhe
1. Horizontale Mitte Öffentlicher Code: html: <...
Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst
Konfigurieren Sie ein Implementierungsbeispiel fü...
Detaillierte Erklärung der Lösung zur Migration von Antd+React-Projekten nach Vite
Antd+React+Webpack ist häufig die Standardkombina...
So verwandeln Sie ein JAR-Paket in einen Docker-Container
So verwandeln Sie ein JAR-Paket in einen Docker-C...
MySQL implementiert das automatische Hinzufügen von Zeit und das automatische Aktualisieren von Zeit
Zeitfelder werden häufig bei der Datenbanknutzung...
Detaillierte Erläuterung der Verwendung des Baidu-Stils in Eslint im React-Projekt
1. Installieren Sie das Baidu Eslint Rule-Plugin ...
Vorgehensweise, wenn die Online-MySQL-Auto-Increment-ID erschöpft ist
Inhaltsverzeichnis Tabellendefinition - automatis...
So verbinden Sie die Idee mit Docker, um eine Bereitstellung mit einem Klick zu erreichen
1. Ändern Sie die Docker-Konfigurationsdatei und ...
React + ts realisiert den sekundären Verknüpfungseffekt
In diesem Artikel wird der spezifische Code von R...
Sequenzimplementierungsmethode basierend auf MySQL
Das Team ersetzte den neuen Rahmen. Alle neuen Un...
MySQL-Beispielcode für die Addition und Subtraktion von Datum und Uhrzeit
Inhaltsverzeichnis 1.MySQL addiert oder subtrahie...