it-swarm.com.de

Wo muss ich den CSS- und Javascript-Code in eine HTML-Webseite einfügen?

Wo sollte ich beim Entwerfen einer Webseite den folgenden Code einfügen?

<link rel=stylesheet type="text/css" href="css/layout.css">

Soll ich es in den <head> legen oder sollte ich es in den <body> setzen? Bitte klären Sie die folgenden Fragen:

  1. Welchen Unterschied macht es, wenn ich es in <head> oder irgendwo anders in den HTML-Code stecke?
  2. Was ist, wenn ich zwei CSS- (oder Javascript-) Dateien habe? Welche Datei wird vom Webbrowser zur Anzeige der Webseite verwendet, da ich nur eine Datei vor einer anderen Datei einfügen kann?
55
Sumit Gupta

Meines Erachtens ist es am besten, die CSS-Datei in der Kopfzeile zu platzieren

<head>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

und die Javascript-Datei vor dem schließenden </body>-Tag

  <script type="text/javascript" src="script.js"></script>
</body>

Auch wenn Sie, wie gesagt, zwei CSS-Dateien haben. Der Browser würde beide verwenden. Wenn es irgendwelche Selektoren gab, dh. .content {}, die in beiden CSS-Dateien gleich waren, überschrieb der Browser die ähnlichen Eigenschaften der ersten mit den Eigenschaften der zweiten. Wenn das Sinn macht.

69
brenjt

Stylesheets ganz nach oben stellenLinks zur Diskussion

Bei der Erforschung der Leistung bei Yahoo !, entdeckten wir, dass das Verschieben von Stylesheets in das Dokument HEAD das Laden von Seiten anscheinend beschleunigt. Dies liegt daran, dass das Einfügen von Stylesheets in HEAD das progressive Rendern der Seite ermöglicht.

Frontend-Ingenieure, die Wert auf Leistung legen, möchten, dass eine Seite schrittweise geladen wird. Das heißt, wir möchten, dass der Browser den Inhalt so schnell wie möglich anzeigt. Dies ist besonders wichtig für Seiten mit viel Inhalt und für Benutzer mit langsameren Internetverbindungen. Die Wichtigkeit, den Benutzern visuelles Feedback zu geben, z. B. Fortschrittsindikatoren, wurde gut recherchiert und dokumentiert. In unserem Fall ist die HTML-Seite der Fortschrittsindikator! Wenn der Browser die Seite nach und nach lädt, dienen die Kopfzeile, die Navigationsleiste, das Logo oben usw. als visuelle Rückmeldung für den Benutzer, der auf die Seite wartet. Dies verbessert die allgemeine Benutzererfahrung.

Das Problem beim Platzieren von Stylesheets am unteren Rand des Dokuments besteht darin, dass das progressive Rendering in vielen Browsern, einschließlich Internet Explorer, verboten ist. Diese Browser blockieren das Rendering, um zu vermeiden, dass Elemente der Seite neu gezeichnet werden müssen, wenn sich ihre Stile ändern. Der Benutzer bleibt beim Anzeigen einer leeren weißen Seite hängen.

Die HTML-Spezifikation legt eindeutig fest, dass Stylesheets in HEAD der Seite enthalten sein sollen: "[LINK] wird im Gegensatz zu A möglicherweise nur im Abschnitt HEAD eines Dokuments angezeigt, obwohl es eine beliebige Zahl sein kann von Zeiten. " Keine der Alternativen, der leere weiße Bildschirm oder der Blitz von nicht gestylten Inhalten, ist das Risiko wert. Die optimale Lösung ist, der HTML-Spezifikation zu folgen und Ihre Stylesheets in das Dokument HEAD zu laden.

Skripte nach unten stellen

Das Problem, das durch Skripte verursacht wird, besteht darin, dass sie parallele Downloads blockieren. Die HTTP/1.1-Spezifikation legt nahe, dass Browser nicht mehr als zwei Komponenten pro Hostname parallel herunterladen. Wenn Sie Ihre Bilder von mehreren Hostnamen aus bereitstellen, können Sie mehr als zwei Downloads gleichzeitig abrufen. Während ein Skript heruntergeladen wird, startet der Browser jedoch keine weiteren Downloads, auch nicht für andere Hostnamen.

In manchen Situationen ist es nicht einfach, Skripts nach unten zu verschieben. Wenn das Skript beispielsweise document.write verwendet, um einen Teil des Seiteninhalts einzufügen, kann es nicht weiter nach unten verschoben werden. Möglicherweise gibt es auch Probleme mit dem Umfang. In vielen Fällen gibt es Möglichkeiten, diese Situationen zu umgehen.

Ein alternativer Vorschlag, der häufig aufkommt, ist die Verwendung von verzögerten Skripts. Das DEFER-Attribut gibt an, dass das Skript document.write nicht enthält und ein Hinweis darauf ist, dass Browser mit dem Rendern fortfahren können. Leider unterstützt Firefox das DEFER-Attribut nicht. In Internet Explorer wird das Skript möglicherweise verschoben, jedoch nicht so oft wie gewünscht. Wenn ein Skript zurückgestellt werden kann, kann es auch an den unteren Rand der Seite verschoben werden. Dadurch werden Ihre Webseiten schneller geladen.

17
Joe
  1. Sie sollten die Stylesheet-Links und das JavaScript <script> in den <head> einfügen, da dies von den Formaten vorgegeben wird. Einige setzen jedoch Javascript <script>s am unteren Rand des Körpers, so dass der Seiteninhalt geladen wird, ohne auf <script> zu warten. Dies ist jedoch ein Kompromiss, da die Skriptausführung verzögert wird, bis andere Ressourcen geladen sind.
  2. CSS hat in der Reihenfolge, in der sie verlinkt werden, Vorrang (in umgekehrter Reihenfolge): zuerst durch zweite überschrieben, durch dritte überschrieben usw.
8
shelhamer

Sie sollten CSS in <head> einfügen, da dies in der Spezifikation angegeben ist.

Wenn Sie mehr als eine CSS-Datei haben, werden sie in der Reihenfolge geladen, in der Sie sie in den Code schreiben. Wenn die zweite CSS-Datei einen Stil enthält, wird der Stil in der ersten CSS-Datei überschrieben. Das wird mit Absicht passieren. Also Cascading Style Sheets.

Die meisten Browser rendern CSS-Dateien zwar effektiv aus dem Kopf, Ihr Code ist jedoch nicht semantisch korrekt.

Sie können JavaScript-Dateilinks an beliebiger Stelle im Dokument verwenden. Es gibt verschiedene Gründe, einige davon in <head> und an anderer Stelle auf der Seite zu verwenden. (Beispielsweise wird Google-Analysecode an die Unterseite gesetzt.)

5

Meiner Meinung nach ist 1) Platzieren Sie die CSS-Datei im Headerteil zwischen dem head-Tag Grund ist, dass auf der ersten Seite die Ansicht für die CSS angezeigt wird 2) und alle JS-Dateien sollten vor dem Body-Tag platziert werden. Grund ist, nachdem alle Komponenten angezeigt werden können 

4
Saloni shah

Sie sollten es in den <Kopf> legen. Normalerweise setze ich Stilreferenzen über JS und ordne meine JS von oben nach unten an, wenn einige davon von anderen abhängig sind, aber ich glaube, dass alle Referenzen geladen werden, bevor die Seite gerendert wird.

2
Glenn Ferrie

CSS-Includes sollten in die Variable head gehen, bevor ein js-Skript eingefügt wird . Javascript kann überall verwendet werden, aber die Funktion der Datei könnte den Speicherort bestimmen. Wenn es Seiteninhalt aufbaut, setzen Sie es auf den Kopf. Wenn es für Ereignisse oder Tracking verwendet wird, können Sie es vor den </body> setzen.

2
zeal

In Bezug auf <link /> und <style /> haben Sie keine Wahl, sie sind muss in der <head />-Sektion (siehe one und two ).

In Bezug auf <script /> es can sowohl in <head /> als auch in <body /> (siehe three ) erscheinen, ist es am besten, sie in <head /> zu setzen, da sie nicht wirklich "Inhalt" sind (wo "Inhalt" ist was der Benutzer auf dem Bildschirm sieht), sind sie eher etwas, was den "Inhalt" "bearbeitet".

W3Cs HTML4-Spezifikation FTW!

1
Albireo

AS per meine Studie in css Platz immer innen. Wie: -

 <head>
  <link href="css/grid.css" rel="stylesheet" />
 </head>

und für das Skript ist es abhängig: -

  1. Wenn im Skriptdokument. Schreibe Geschenk dann wird es in der Kopfmarke sein.
  2. Wenn das Script das Attribut DEFER enthält, wird der Download von BECAUSE parallel durchgeführt 
0
Neha Sinha

Und wenn Sie mehr als eine .css- oder .js-Datei aufrufen müssen, fügen Sie sie einfach nacheinander hinzu, oder:

<head>

<link href="css/grid.css" rel="stylesheet" />

<link href="css/style.css" rel="stylesheet" />

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>

</head>
0
Adam