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

So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten

Warum sollte CSS im Head-Tag platziert werden?

So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten

Gemeinsame Nutzung verschiedener Methoden zum Deaktivieren des Seitencaches

Details zur Datenanzeige der Vue3-Listenschnittstelle

Vergleichen von Dokumentspeicherorten

Diskussion über die numerische Begrenzung des OL-Elements im HTML-Dokument

So verwenden Sie Yum zum Konfigurieren der lnmp-Umgebung im CentOS7.6-System

Detaillierte Erklärung der Javascript-String-Methoden

Einführung in die Apache-Bereitstellung von https in der Kryptografie

Analyse des MySQL-Client-Installationsprozesses auf dem Mac

Implementierung eines Karussells mit nativem JavaScript

Artikel empfehlen

Beispiel für die reguläre Umschreibmethode für Nginx Rewrite (Matching)

Tutorial zur Installation von Ubuntu Server in Vmware

Spezifische Verwendung von Linux which Befehl

So legen Sie die Umgebungsvariable PATH im Linux-System fest (3 Methoden)

Linux Bash: ./xxx: Fehler „Binärdatei kann nicht ausgeführt werden“

So konvertieren Sie Zeilen in Spalten in MySQL

So verwalten Sie mehrere Projekte auf dem CentOS SVN-Server

Code zum Ausrichten von Kontrollkästchen und Radiotext im Formular

Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle

CSS Polarkoordinaten Beispielcode

MySQL count: ausführliche Erklärung und Funktionsbeispielcode

Erläuterung der Lösung zur mobilen H5-Bildgenerierung in JavaScript

Vue-Router-Beispielcode zum dynamischen Generieren von Navigationsmenüs basierend auf Backend-Berechtigungen

Lösen Sie das Problem der Selbstinkrementierung des int-Primärschlüssels von MySQL