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

Tutorial zur Installation der entpackten Version von mysql5.7 auf CentOS 7

1. Entpacken Sie das komprimierte MySQL-Paket in ...

Zwei Methoden zum Strecken des Hintergrundbilds einer Webseite

Es gibt zwei Lösungen: Eine Möglichkeit ist CSS, b...

Beheben Sie das Problem, dass die MySQL-Datenbank unerwartet abstürzt, wodurch die Tabellendatendatei beschädigt wird und nicht gestartet werden kann

Problem: Die MySQL-Datenbank ist unerwartet abges...

Problem beim Ändern der Tabellengröße mithilfe relativer Breiten

<tr> <th width="12%">AAAAA&l...

Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern

Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...

So installieren und konfigurieren Sie den Supervisor-Daemon unter CentOS7

Neuling, nimm es selbst auf 1. Supervisor install...

Tutorial zur Installation von MySQL8 unter Linux CentOS7

1. Installation der RPM-Version Überprüfen Sie, o...

Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen

Plötzlich musste ich einen privaten Dienst für di...

Implementierung der MySQL GRANT-Benutzerautorisierung

Bei der Autorisierung geht es darum, einem Benutz...

So implementieren Sie geplante MySQL-Aufgaben zur Datensicherung unter Linux

Vorwort Backup ist die Grundlage der Notfallwiede...

JS realisiert die Kartenausgabe-Animation

In diesem Artikelbeispiel wird der spezifische JS...

So verwenden Sie Navicat zum Exportieren und Importieren einer MySQL-Datenbank

MySql ist eine Datenquelle, die wir häufig verwen...

Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage

Im Allgemeinen muss, nachdem sich auf der linken ...

Wesentliche bedingte Abfrageanweisungen für MySQL-Datenbanken

Inhaltsverzeichnis 1. Grundlegende Grammatik 2. F...

Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen

Methode 1: Ändern Sie die Konfigurationsdatei (Si...