Wo soll die CSS-Datei abgelegt werden?

Die CSS-Datei sollte im Kopf oben im HTML platziert werden. Grund: Der Browser analysiert das HTML-Dokument von oben nach unten. Wenn das CSS unten platziert wird, kann die Seite nach und nach gerendert werden. Nachdem das CSS jedoch heruntergeladen und analysiert wurde, müssen der gerenderte Text und die Bilder erneut gerendert werden entsprechend dem neuen Stil neu gezeichnet, was eine schlechte Benutzererfahrung darstellt.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die CSS-Datei sollte im Kopf oben im HTML platziert werden.

warum?

<link rel="stylesheet" href="home.css">

Das href-Attribut (HyperText-Referenz) im Link-Tag stellt eine Hypertext-Referenz dar. Wenn CSS eine href-Referenz verwendet, erkennt der Browser das Dokument als CSS und lädt es parallel herunter, ohne das aktuelle Dokument anzuhalten Beim Laden von HTML zum Generieren eines DOM-Baums kann der DOM-Baum gleichzeitig gerendert werden, wodurch Flackern, weiße Bildschirme oder verwirrende Layouts verhindert werden können.

Im Idealfall hoffen wir, dass der Browser das heruntergeladene CSS nach und nach rendert und dem Benutzer die Seite nach und nach anzeigt. Um jedoch ein erneutes Rendern von Seitenelementen zu vermeiden, wenn sich Stile ändern, blockiert der Browser das schrittweise Rendern von Inhalten. Der Browser wartet, bis alle Stile geladen sind, bevor er die Seite auf einmal rendert.

Wenn die CSS-Datei unten platziert wird, verhindert der Browser, dass der Inhalt nach und nach angezeigt wird. Während der Browser auf den Download der letzten CSS-Datei wartet, erscheint ein „weißer Bildschirm“. Wenn eine neue Verbindung geöffnet wird, werden zuerst die Bilder und zuletzt die Stile angezeigt. Dies ist sehr ernst, denn wenn die Netzwerkgeschwindigkeit sehr langsam ist, ist die CSS-Downloadzeit relativ lang, was dem Benutzer natürlich lange Zeit einen „weißen Bildschirm“ beschert und die Benutzererfahrung sehr schlecht ist.

CSS-Dateien werden oben platziert, teilweise weil die Platzierungsreihenfolge die Priorität des Downloads bestimmt, und, was noch wichtiger ist, der Rendering-Mechanismus des Browsers.

css hat keinen Einfluss auf die Generierung des DOM-Baums während des Ladevorgangs, aber auf die Generierung des Render-Baums, was sich wiederum auf das Layout auswirkt. Daher muss im Allgemeinen das Link-Tag des Stils platziert werden so weit wie möglich im Kopf, da beim Parsen der DOM-Baum von oben nach unten erfolgt und die CSS-Stile asynchron geladen werden. In diesem Fall können das Parsen des Körperknotens unter dem DOM-Baum und das Laden der CSS-Stile so parallel wie möglich erfolgen , was die Generierung des Render-Baums beschleunigt.

Platzieren Sie das CSS unten und die Seite kann nach und nach gerendert werden. Nachdem das CSS heruntergeladen und analysiert wurde, müssen der bereits gerenderte Text und die Bilder jedoch entsprechend dem neuen Stil neu gezeichnet werden.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWo soll die CSS-Datei abgelegt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!