In den meisten Büchern / Artikeln zu Javascript und Webentwicklung heißt es, dass Sie CSS in das Head-Tag und Javascript am Ende der Seite einfügen müssen.
Aber wenn ich die HTML-Quelle berühmter Websites wie dieser einen Stackoverflow öffne, stelle ich fest, dass sie einige JS-Dateien in das Head-Tag einfügen.
Was sind die Vor- und Nachteile beider Ansätze und wann welche anzuwenden?
Es wurde eine weitere Frage für dasselbe Problem gefunden: Wo soll ich die auf meiner Seite verwendeten JavaScript-Dateien deklarieren? In <head> </ head> oder in der Nähe von </ body>?
javascript
Amr Elgarhy
quelle
quelle
Antworten:
Aus den Best Practices von Yahoo zur Beschleunigung Ihrer Website :
Daher ist es im Allgemeinen vorzuziehen, sie unten zu platzieren. Allerdings ist es nicht immer möglich, und es oft nicht machen , dass viel Unterschied sowieso.
quelle
Wie andere bereits gesagt haben, verzögert das Einfügen von Javascript in den Kopf das Rendern der Seite bis nach dem Laden der Skripte, was bedeutet, dass das Laden der Seite möglicherweise länger dauert - insbesondere, wenn Sie große Skriptdateien herunterladen.
Wenn Sie Ihre Skript-Tags an das Ende der Seite verschieben, stellen Sie sicher, dass der Browser Bilder und Stylesheets vor den Skript-Tags herunterlädt und die Seite wahrscheinlich gerendert wird, bevor die Skripte ausgeführt werden. Dies bedeutet auch, dass, wenn Sie von einigen Funktionen Ihrer Skripte abhängig sind, diese erst ein wenig verfügbar sind, nachdem die Seite für den Benutzer sichtbar ist.
Wenn Sie Stile oder Elemente hinzufügen (usw., die Textfelder mit einem umfangreicheren Editor wechseln), wird dies für den Benutzer als Flackern sichtbar.
Wenn Sie Elementen Klickereignisse hinzufügen, können diese erst kurz nach dem Anzeigen der Elemente selbst angeklickt werden.
Manchmal müssen Sie bei diesen Problemen Ihre Skripte in den Kopf setzen, manchmal geht es Ihnen gut, wenn Sie sie unten einfügen.
IMHO (völlig gegen YSlow und viele kluge Leute) sollten Sie Ihre Skripte im Head-Tag behalten und sich nur darauf verlassen, dass sie die meiste Zeit zwischengespeichert werden.
quelle
Im Allgemeinen sollten Sie Skriptreferenzen am Ende Ihrer Seite platzieren. Skripte müssen nicht nur heruntergeladen, sondern auch ausgewertet und ausgeführt werden, bevor der Block freigegeben wird und die Seite mit dem Rendern fortfährt. Dinge wie Modernizr sollten oben platziert werden, da es einige Feature-Erkennungen sowie HTML5-Shims ausführt, die Sie wahrscheinlich wollen werden.
Ein weiterer Grund, warum Sie versuchen möchten, Skripte am Ende der Seite zu platzieren, sind Single Points of Failure oder SPOFs. Hier läuft ein Skriptaufruf ab oder blockiert aus einem anderen Grund die Seitenausführung. Dies kann bei Werbebibliotheken von Drittanbietern usw. häufig vorkommen.
Ja, Sie müssen vielleicht etwas genauer darüber nachdenken, wie Sie Ihre Anwendung erstellen, aber ich fand, dass sie für mich sehr schnell sehr natürlich wird. Ich habe in den letzten 4 Jahren Hunderte von Web-Apps mit dem Skript unten erstellt und kann den Unterschied erkennen. Ich kann 500 ms sein, es kann 5000 ms sein, aber es ist alles wichtig.
quelle
Es hängt wirklich von Ihrer Website ab. Wenn Sie auf die JavaScript-Funktionen im Hauptteil zugreifen und diese aufrufen, muss im Header darauf verwiesen werden, damit sie geladen werden. Andernfalls ist es ratsam, das JavaScript am Ende des Textes zu platzieren, wenn Sie das JavaScript nur aufrufen, wenn das gesamte Dokument geladen ist. Wenn Sie die JS-Datei am Ende einfügen, laden Sie die gesamte Seite und rufen dann die JS-Datei ab. Auf diese Weise kann der Benutzer die Seite schnell sehen und bis er mit der Seite vertraut ist, wurde die JS-Datei bereits heruntergeladen.
quelle
Javascript im Kopf wird vor dem Laden der Seite ausgewertet, was bedeutet, dass das Laden der Seite länger dauert. Es ist etwas schwieriger, Ereignisse zum Laufen zu bringen, wenn das gesamte Javascript am Ende ist, aber jQuery löst dieses Problem so ziemlich für Sie.
quelle