Was ist Vor- und Nachteile: Javascript in den Kopf setzen und kurz vor dem Schließen des Körpers setzen

87

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

stackoverflow.com/questions/383045/…

— froadie

Siehe auch: stackoverflow.com/questions/1013112/… und stackoverflow.com/questions/383045/…

— CMS

63

Aus den Best Practices von Yahoo zur Beschleunigung Ihrer Website :

Das durch Skripte verursachte Problem besteht darin, dass sie parallele Downloads blockieren. Die HTTP / 1.1-Spezifikation schlägt vor, 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 durchführen. Während ein Skript heruntergeladen wird, startet der Browser jedoch keine anderen Downloads, auch nicht unter verschiedenen Hostnamen.

In einigen Situationen ist es nicht einfach, Skripte nach unten zu verschieben. Wenn das Skript beispielsweise document.write verwendet, um einen Teil des Seiteninhalts einzufügen, kann es nicht weiter unten auf der Seite 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 auftaucht, ist die Verwendung von verzögerten Skripten. Das DEFER-Attribut gibt an, dass das Skript nicht document.write enthält, und ist ein Hinweis auf Browser, die sie weiter rendern können. Leider unterstützt Firefox das DEFER-Attribut nicht. In Internet Explorer wird das Skript möglicherweise zurückgestellt, jedoch nicht so oft wie gewünscht. Wenn ein Skript verschoben werden kann, kann es auch an den unteren Rand der Seite verschoben werden. Dadurch werden Ihre Webseiten schneller geladen.

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.

— David Johnstone
quelle

Ich habe ein Beispiel, das ein Quadrat auf einer Leinwand verschiebt, und es funktioniert nicht, wenn ich das Javascript in den Kopfbereich des HTML-Codes einfüge. Es muss sich am unteren Ende des Körpers befinden, nachdem die Leinwand deklariert wurde. Gibt es einen Grund dafür oder wie würde ich mein gesamtes Javascript im Abschnitt <head> der Datei behalten?

— Doug Hauf

@DougHauf Sie sind sich nicht sicher, ob ich damit einverstanden bin, aber haben Sie einen DOMContentLoaded-Listener hinzugefügt? Ich frage, denn wenn Sie Ihr Skript unten haben und es auf der Leinwand gut rendern kann; Dies liegt daran, dass die Zeichenfläche bereits vor dem Versuch, darauf zu schreiben, auf den Bildschirm geladen wurde. Wenn Sie das Skript in die Kopfzeile einfügen, wird es nicht auf die Leinwand gezeichnet, da die Leinwand noch nicht vorhanden ist. Wenn Sie also den Listener hinzufügen, wird Ihr Canvas-Code ausgelöst, nachdem die Canvas geladen wurde.

— Matthew D Auld

1

Ich weiß nicht, wie alt das Dokument ist, das Sie zitieren, aber es scheint, dass das Attribut defer in Firefox seit einiger Zeit unterstützt wird .

— user2428118

Vielen Dank, das hilft mir sehr

— Tonydeleon

31

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.

— AHM
quelle

9

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.

— Chris Love
quelle

5

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.

— Azamsharp
quelle

4

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.

— Draemon
quelle

2

Können Sie erwähnen, wie jQuery dieses Problem aus Interesse löst?

— Matthew Lock

jQuery hat eine API zum Binden von

— Handlern