Was ist vor- und Nachteile: setzen Sie Javascript in den Kopf und setzen Sie kurz vor dem Körper schließen

Die meisten der JavaScript-und Web-Entwicklung Bücher/Artikel sagt, dass Sie CSS in den Kopf-Tag und Javascript am unteren Rand der Seite setzen müssen.Was ist vor- und Nachteile: setzen Sie Javascript in den Kopf und setzen Sie kurz vor dem Körper schließen

Aber wenn ich html Quelle von berühmten Websites wie diese stackoverflow öffnen, finde ich sie einige js Dateien in den Kopf-Tag.

Was ist Vor- und Nachteile beider Ansätze und wann wann welche verwenden?

eine andere Frage für das gleiche Problem gefunden: Where should I declare JavaScript files used in my page? In <head></head> or near </body>?

Quelle

2010-03-16 Amr Elgarhy

http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom-correct – froadie

Siehe auch: http://stackoverflow.com/questions/1013112/where-shouldi- declare-javascript-files-used-in-my-page-in-head-head-or-near und http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom-correct – CMS

Von Yahoo Best Practices for Speeding Up Your Web Site:

Das Problem von Skripten verursacht ist, 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 ausliefern, können Sie mehr als zwei Downloads gleichzeitig durchführen. Während ein Skript heruntergeladen wird, wird der Browser jedoch keine anderen Downloads starten, auch nicht auf 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 Inhalts der Seite einzufügen, kann es nicht unten auf der Seite verschoben werden. Möglicherweise gibt es auch Scoping-Probleme. In vielen Fällen gibt es Möglichkeiten zur Umgehung dieser Situationen.

Ein alternativer Vorschlag, der oft auftaucht, ist die Verwendung von zurückgestellten Skripten. Das DEFER-Attribut zeigt an, dass das Skript document.write nicht enthält und ein Hinweis auf Browser ist, dass sie rendering fortsetzen können. Leider unterstützt Firefox das DEFER-Attribut nicht. In Internet Explorer kann das Skript verschoben werden, aber nicht so viel wie gewünscht. Wenn ein Skript zurückgestellt werden kann, kann es auch unter auf die Seite verschoben werden. Das wird Ihre Web Seiten schneller laden.

Daher ist es im Allgemeinen vorzuziehen, sie an den unteren stellen. Es ist jedoch nicht immer möglich, und es macht oft , dass keinen großen Unterschied macht.

Quelle

2010-03-16 00:39:23

Ich habe ein Beispiel, das ein Quadrat auf einer Leinwand bewegt und es wird nicht funktionieren, wenn ich das Javascript in den Kopfbereich des HTML setzen. Es muss am unteren Rand des Körpers sein, nachdem der Canvas deklariert wurde. Gibt es einen Grund dafür oder wie würde ich all mein Javascript in der Sektion der Datei behalten. –

@DougHauf Nicht sicher, ob ich genau bin, aber haben Sie einen DOMContentLoaded Listener hinzugefügt? Ich frage, weil, wenn Sie Ihr Skript an der Unterseite haben und es auf der Leinwand gut macht; Das liegt daran, dass die Arbeitsfläche bereits auf den Bildschirm geladen wurde, bevor Sie versuchten, darauf zu schreiben. Wenn Sie nun das Skript in die Kopfzeile einfügen, wird es nicht auf die Zeichenfläche gezeichnet, da die Zeichenfläche noch nicht vorhanden ist.Wenn Sie also den Listener hinzufügen, wird der Canvas-Code ausgelöst, nachdem die Zeichenfläche geladen wurde. –

Alle Javascript im Kopf ausgewertet werden, bevor die Seite geladen wird, das heißt, die Seite fühlt sich an wie es länger dauert, zu laden. Es ist etwas schwieriger, Ereignisse richtig zu funktionieren, wenn das ganze Javascript am Ende ist, aber jQuery löst dieses Problem für Sie.

Quelle

2010-03-16 00:34:51 Draemon

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

jQuery hat eine API zum Binden von Handlern an Ereignisse – Draemon

Es hängt wirklich von Ihrer Website ab. Wenn Sie auf die JavaScript-Funktionen im Rumpf zugreifen und diese aufrufen, muss auf sie in der Kopfzeile verwiesen werden, damit sie geladen werden.Sonst, wenn Sie das JavaScript nur aufrufen, wenn das ganze Dokument geladen ist, ist es ratsam, das JavaScript am Ende des Textes einzufügen. Indem Sie am Ende die .JS-Datei einfügen, laden Sie die ganze Seite und holen dann die .JS-Datei. Auf diese Weise wird der Benutzer in der Lage sein, die Seite schnell zu sehen, und wenn er/sie sich mit der Seite vertraut gemacht hat, wurde die .JS-Datei bereits heruntergeladen.

Quelle

2010-03-16 01:03:32 azamsharp

Wie andere Leute gesagt haben, wenn Sie Javascript in den Kopf setzen, verzögert es das Rendern der Seite, bis die Skripte geladen sind, was bedeutet, dass die Seite länger lädt - besonders 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 Skripts ausgeführt werden. Dies bedeutet auch, dass, wenn Sie von einigen Funktionen Ihrer Skripts abhängig sind, dies erst einige Zeit nach dem Anzeigen der Seite für den Benutzer verfügbar ist.

Wenn Sie Stile oder Elemente hinzufügen (usw., die Textfelder mit einem etwas komplexeren Editor wechseln), wird dies für den Benutzer als Flimmern sichtbar.

Wenn Sie click-events zu Elementen hinzufügen, können diese erst nach dem Anzeigen der Elemente selbst angeklickt werden.

Manchmal erfordern diese Probleme, dass Sie Ihre Skripte in den Kopf setzen, zu anderen Zeiten werden Sie in Ordnung sein, indem Sie sie in den Boden stecken.

IMHO (komplett gegen YSlow und viele kluge Leute) sollten Sie Ihre Skripte in der Kopf-Tag zu halten, und verlassen Sie sich nur auf sie die meiste Zeit zwischengespeichert werden.

Quelle

2010-03-16 01:05:25 AHM

Im Allgemeinen sollten Sie Skriptverweise am Ende Ihrer Seite platzieren. Skripte müssen nicht nur heruntergeladen werden, sie müssen auch ausgewertet und ausgeführt werden, bevor der Block freigegeben wird und die Seite mit dem Rendering-Prozess fortfährt. Dinge wie Modernizr sollten in der Spitze platziert werden, da es einige Feature-Erkennungen sowie HTML5-Shims, die Sie wahrscheinlich wollen, tut.

Ein weiterer Grund, warum Sie versuchen möchten, Skripte am Ende der Seite zu platzieren, sind Single Points of Failure oder SPOFs. Dies ist der Punkt, an dem ein Skriptaufruf abläuft oder aus einem anderen Grund die Seitenausführung blockiert. Dies kann eine Menge mit Werbung Bibliotheken Dritter, etc. passieren.

Ja müssen Sie vielleicht ein wenig härter darüber nachdenken, wie Sie Ihre Anwendung zu gestalten, aber ich fand es sehr schnell für mich sehr natürlich. Ich habe in den letzten 4 Jahren Hunderte von Web-Apps mit dem Skript am unteren Rand erstellt und ich kann den Unterschied erkennen. Ich mag 500ms sein, es könnte 5000ms sein, aber alles zählt.

Quelle

2012-11-05 21:49:51

Was ist vor- und Nachteile: setzen Sie Javascript in den Kopf und setzen Sie kurz vor dem Körper schließen

Antwort

Verwandte Themen