CSS-Stylesheets befinden sich im „Kopf“-Bereich des Dokuments. Denn wenn das CSS unten platziert wird, kann die Seite nach und nach gerendert werden, aber nachdem das CSS heruntergeladen und analysiert wurde, müssen der gerenderte Text und die Bilder entsprechend dem neuen Stil neu gezeichnet werden, was ein schlechter Benutzer ist Erfahrung.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS-Stylesheets befinden sich im Kopf oben im HTML-Dokument.
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“. wird angezeigt, wenn eine neue Verbindung geöffnet wird. Dann erscheint zuerst der Text und zuletzt Bilder und Stile. Dies ist sehr ernst, denn wenn die Internetgeschwindigkeit 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.
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 vonIn welchem Bereich des Dokuments befindet sich das CSS-Stylesheet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
