Heim > Web-Frontend > CSS-Tutorial > Warum CSS oben und JS unten platzieren?

Warum CSS oben und JS unten platzieren?

藏色散人
Freigeben: 2022-12-30 11:12:42
Original
3771 Leute haben es durchsucht

Die Gründe, warum CSS oben und JS unten platziert wird: 1. Beim Laden von HTML zum Generieren eines DOM-Baums kann der DOM-Baum gleichzeitig gerendert werden, wodurch Flackern, weißer Bildschirm oder Layoutverwirrung verhindert werden können. 2. JavaScript wird unmittelbar nach dem Laden ausgeführt und blockiert das nachfolgende Laden der Ressource.

Warum CSS oben und JS unten platzieren?

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer.

Empfohlen: css-Video-Tutorial

Der Unterschied zwischen href und src

Im Allgemeinen wird href zum Laden von CSS verwendet und im Kopf platziert; src wird zum Laden von Skripten verwendet und unter dem Text platziert.

href

ist die Abkürzung für Hypertext-Referenz, was Hypertext-Referenz bedeutet und zum Herstellen einer Verknüpfung zwischen dem aktuellen Element und dem Dokument verwendet wird. Zu den häufig verwendeten gehören Link und a.

Wenn CSS die href-Referenz verwendet, erkennt der Browser das Dokument und fragt nach CSS, lädt es parallel herunter und stoppt den Ladevorgang des aktuellen Dokuments nicht.

src

ist die Abkürzung für Quelle, die eine Ressource und ein wesentlicher Bestandteil der Seite ist. Der Inhalt, auf den src verweist, wird an der Position des aktuellen Tags im Dokument eingebettet. Zu den häufig verwendeten gehören img, script und iframe.

Wenn das Skript die SRC-Referenz verwendet und der Browser das Element analysiert, stoppt er das Rendern des Dokuments, bis die Ressource geladen ist. Dies ist auch der Grund, warum das Skript unten statt im Kopf platziert wird.

Die Gründe für das Einfügen von CSS in den Kopf und das Skript unten

1. Fügen Sie CSS in den Kopf ein

Beim Laden von HTML zum Generieren eines DOM-Baums kann der DOM-Baum gleichzeitig gerendert werden.

Dadurch können Flackern, weißer Bildschirm oder verwirrendes Layout verhindert werden.

2. Fügen Sie Javascript hinten ein

Javascript kann die Struktur des DOM-Baums ändern, daher ist ein stabiler DOM-Baum erforderlich.

Javascript wird sofort nach dem Laden ausgeführt und blockiert das nachfolgende Laden der Ressource. (Eigenschaften des Ladens und Ausführens von Javascript)

Erweitern Sie das Wissen:

1. Lassen Sie uns zunächst einige häufige Probleme verstehen:

1. Bei der Optimierung der Seite müssen Sie CSS in die Head- und JS-Dateien einfügen Warum kann dadurch eine Seitenoptimierung erreicht werden?

2. Warum schreiben Sie die Funktion in das Ereignis $(document).ready()?

3.javascript blockiert das Parsen von Dom.

Wenn das

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage