Warum sollte CSS im Head-Tag platziert werden?

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
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

Artikel empfehlen

Beispiel für handschriftliches Vue2.0-Daten-Hijacking

Inhaltsverzeichnis 1: Webpack erstellen 2. Datend...

HTML ungeordnete Liste Aufzählungspunkte mit Bildern CSS schreiben

Erstellen Sie eine HTML-Seite mit einer ungeordnet...

Detaillierte Einführung in die Chrome-Entwicklertools - Zeitleiste

1. Übersicht Benutzer erwarten, dass die Webanwen...

MySQL- und SQLYog-Installationstutorial mit Bildern und Text

1. MySQL 1.1 MySQL-Installation mysql-5.5.27-winx...

Grundlegende Befehle für MySQL-Datenbankoperationen

1. Erstellen Sie eine Datenbank: Daten erstellen ...

Beispielcode für die automatische Aktualisierung von Webseiten und den automatischen Sprung

Automatische Aktualisierung der Webseite: Fügen Si...

Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen

Inhaltsverzeichnis Vorwort 1. Kurze Analyse der z...

Detaillierte Erläuterung der drei Möglichkeiten zum Konfigurieren virtueller Nginx-Hosts (basierend auf IP)

Nginx unterstützt drei Möglichkeiten zum Konfigur...

Detaillierte Erklärung zur Verwendung von React.cloneElement

Inhaltsverzeichnis Die Rolle von cloneElement Anw...

Detaillierte Erklärung, wie Sie die Fallstricke beim Ersetzen von logischem SQL in MySQL vermeiden können

Der Unterschied zwischen „Ersetzen durch“ und „Ei...

Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern

1. Berechnete Eigenschaften und Listener 1.1 Bere...

Detailliertes Tutorial zur Installation und Verwendung von MySQL 8.0.15 unter Windows

In diesem Artikel finden Sie das ausführliche Ins...

VirtualBox CentOS7.7.1908 Python3.8 Build Scrapy-Entwicklungsumgebung [grafisches Tutorial]

Inhaltsverzeichnis Umfeld Installieren Sie CentOS...

Detailliertes Tutorial zur Installation von Docker und Nvidia-Docker unter Ubuntu 16.04

Inhaltsverzeichnis Docker-Installation Nvidia-Doc...

Detaillierte Erläuterung der Befehle zum Status und zur Leistung des Linux-Servers

Serverstatusanalyse CPU-Details des Linux-Servers...