Warum sollte CSS im Head-Tag platziert werden?

Denken Sie darüber nach: Warum sollte css im head Tag platziert werden und nicht wie javascript am Ende body -Tags?

Reden ist billig, zeigen Sie mir den Code.

OK, schreiben wir etwas Code, um das Ergebnis zu erhalten.

Hier ist ein kleiner Trick für die chrome -Konsole:

Bildbeschreibung hier einfügen

Die Begrenzung der download Geschwindigkeit ist für unsere Tests sehr hilfreich! Dadurch können wir einige Details deutlich erkennen

Begrenzen wir die download auf 40kb/s und starten den Test:

Wenn css am Ende body -Tags eingeführt wird

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <meta http-equiv="X-UA-kompatibel" content="ie=edge">
 <title>Dokument</title>
</Kopf>
<Text>
 <h1>Hallo Welt</h1>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</body>
</html>

Überprüfen Sie die Wirkung im Browser:

Wenn die Datei bootstrap.min.css nicht geladen ist, wird auf der Webseite bereits „Hallo Welt“ angezeigt, aber der Stil ist der Standardstil, was darauf hinweist, dass die Webseite einmal gerendert wurde.

Bildbeschreibung hier einfügen

Nachdem die Datei bootstrap.min.css geladen wurde, ändert sich der Stil von „Hallo Welt“ auf der Webseite und die Schriftgröße ändert sich erheblich. Daher kann beurteilt werden, dass die Webseite reflow aufweist

Bildbeschreibung hier einfügen

Wenn das CSS im Head-Tag eingeführt wird:

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <meta http-equiv="X-UA-kompatibel" content="ie=edge">
 <title>Dokument</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</Kopf>
<Text>
 <h1>Hallo Welt</h1>
</body>
</html>

Öffnen Sie es im Browser, um den Effekt anzuzeigen:

Wenn bootstrap.min.css nicht geladen ist, wird auf der Webseite nichts angezeigt, was darauf hinweist, dass die Webseite derzeit nicht gerendert wird.

Bildbeschreibung hier einfügen

Wenn bootstarp.min.css geladen ist, erscheint „Hallo Welt“ im bootstrap -Stil auf der Webseite, was darauf hinweist, dass die Webseite gerendert ist.

Bildbeschreibung hier einfügen

Aus den beiden obigen Beispielen können wir Folgendes ersehen:

Wenn CSS am Ende des Body-Tags platziert wird, wird nach dem Erstellen von DOMTree RenderTree erstellt und das Layout berechnet und gerendert. Nach dem Laden und Analysieren von CSS wird CSSOMTree erstellt und RenderTree mit DOMTree neu erstellt, um das Layout neu zu berechnen und die Webseite zu rendern.
Wenn CSS im head Tag platziert wird, wird zuerst CSS geladen und dann CSS analysiert, um CSSOMTree zu erstellen. Gleichzeitig wird DOMTree erstellt. Nachdem CSSOMTree und DOMTree erstellt wurden, wird RenderTree erstellt, um das Layout zu berechnen und die Webseite zu rendern. Vergleicht man die beiden, wird css im head Tag platziert, was weniger ist als css das am Ende des body Tags platziert wird. Es gibt eine RenderTree -Konstruktion, eine Layoutberechnung und eine Webseiten-Rendering weniger, sodass die Leistung besser ist; und wenn CSS am Ende des Body-Tags platziert wird, wird auf der Webseite kurz „nacktes“ HTML angezeigt, was der Benutzererfahrung nicht förderlich ist.

Hier ist noch ein kleiner Trick:

Bildbeschreibung hier einfügen

Durch die oben genannten Vorgänge können Sie den gesamten Prozess der Webseitenanalyse und -darstellung anzeigen. Daher ist es auch sehr hilfreich, die Frage „Welche Vorteile bietet das Platzieren von CSS-Dateien im Kopf?“ zu beantworten.

Dies ist das Ende dieses Artikels darüber, warum CSS im Head-Tag platziert werden sollte. Weitere relevante CSS-Head-Tag-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

>>: Schritte zum Upgrade von CentOS6 auf Glibc

Lösen Sie das Gruppieren-nach-Abfrage-Problem nach dem Upgrade von Mysql auf 5.7

Warum sollte CSS im Head-Tag platziert werden?

Lösen Sie das Gruppieren-nach-Abfrage-Problem nach dem Upgrade von Mysql auf 5.7

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

Detaillierte Bereitstellung des Alibaba Cloud Servers (grafisches Tutorial)

SQL-Anweisungen in MySQL verwenden keine Indizes

js-Objekt, um einen Daten-Paging-Effekt zu erzielen

Beispiel für die Implementierung einer kaskadierenden MySQL-Replikation

Lassen Sie uns über mein Verständnis und meine Anwendung von React Context sprechen

Detaillierte Erklärung der CSS-Stylesheets und des Formatlayouts

Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen

Lösung für MySQL: Das Installationsprogramm wird im Community-Modus ausgeführt

Artikel empfehlen

So schreiben Sie asynchrone Aufgaben in modernem JavaScript

Die perfekte Lösung für das MySql-Versionsproblem sql_mode=only_full_group_by

Implementierung einer geplanten Sicherung in Mysql5.7

Schritte zum Bereitstellen eines Spring Boot-Projekts mit Docker

Detaillierte Erklärung des Unterschieds zwischen var, let und const in JavaScript

Beispiel zum Ändern von Stilen über CSS-Variablen

Das WeChat-Applet implementiert eine einfache handschriftliche Signaturkomponente

Vue3 + TypeScript-Entwicklungszusammenfassung

Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Schritte zum Upgrade des Ubuntu 16.04-Kernels

Was ist schneller: MySQL-Volltextindex, gemeinsamer Index, Like-Abfrage und JSON-Abfrage?

Detaillierte Erläuterung der Idee zur Implementierung dynamischer Spalten in AngularJS-Loop-Objekteigenschaften

So gehen Sie mit vergessenen Passwörtern in Windows Server 2008 R2 um

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

So kapseln Sie Timerkomponenten in Vue3