Unauffälliges JavaScript: <script> oben oder unten im HTML-Code?

90

Ich habe kürzlich die Best Practices für das Yahoo-Manifest zur Beschleunigung Ihrer Website gelesen . Sie empfehlen, die JavaScript-Aufnahme am Ende des HTML-Codes zu platzieren, wenn wir können.

Aber wo genau und wann?

Sollen wir es vor </html>oder nach dem Schließen setzen ? Und vor allem, wann sollten wir es noch in den <head>Abschnitt aufnehmen?

— e-satis
quelle

1

Mögliches Duplikat von Wo ist der beste Ort, um <script> -Tags in HTML-Markups einzufügen?

— Madaras Geist

87

Es gibt zwei Möglichkeiten für wirklich unauffällige Skripte:

Einfügen einer externen Skriptdatei über ein Skript-Tag in den Kopfbereich
Einfügen einer externen Skriptdatei über ein Skript-Tag am unteren Rand des Körpers (vorher </body></html>)

Die zweite kann schneller sein, da die ursprüngliche Yahoo-Untersuchung gezeigt hat, dass einige Browser versuchen, Skriptdateien zu laden, wenn sie auf das Skript-Tag klicken, und daher den Rest der Seite erst laden, wenn sie fertig sind. Wenn Ihr Skript jedoch einen "Bereit" -Teil enthält, der ausgeführt werden muss, sobald das DOM bereit ist, müssen Sie ihn möglicherweise im Kopf haben. Ein weiteres Problem ist das Layout. Wenn Ihr Skript das Seitenlayout ändern soll, soll es so früh wie möglich geladen werden, damit sich Ihre Seite nicht lange vor Ihren Benutzern neu zeichnet.

Wenn sich die externe Skriptseite in einer anderen Domäne befindet (z. B. externe Widgets), kann es sinnvoll sein, sie unten zu platzieren, um zu vermeiden, dass das Laden der Seite verzögert wird.

Und für Leistungsprobleme sollten Sie Ihre eigenen Benchmarks erstellen. Was zu einem Zeitpunkt nach Abschluss einer Studie möglicherweise zutrifft, kann sich mit Ihrem lokalen Setup oder Änderungen in den Browsern ändern.

— domgblackwell
quelle

13

In Bezug auf das Skript mit einem "bereit" Teil. Wenn Sie dieses Skript am unteren Rand des Körpers platzieren, ist das DOM garantiert manipulierbar. Wenn Sie es in den Kopf setzen, müssen Sie es so einwickeln, dass es auf das DOMReady-Ereignis (oder ein ähnliches Ereignis) wartet

— Juan Mendes,

4

@Juan Ja, aber wenn Sie das Skript unten platzieren, verzögern Sie das DOMReady-Ereignis um die Zeit, die der Browser benötigt, um das Dokument zu analysieren und die Kopfelemente zu verarbeiten (200-500 ms), bevor er das Skript anfordert . Hauptsächlich beim Laden der ersten Seite (vorausgesetzt, sie kann von dort zwischengespeichert werden). Während, wenn Sie es in den Kopf setzen. Es ist wahrscheinlich viel schneller fertig. Wenn also unter Berücksichtigung von HTML5 das Skript das Layout ändern muss, wenn das DOM bereit ist, ist es jetzt besser, ein "asynchrones" oder "verzögertes" Skript im Kopf zu haben.

— Hexalys

31

Es ist noch nie so geschnitten und trocken - Yahoo empfiehlt, die Skripte direkt vor dem schließenden </body>Tag zu platzieren, wodurch die Illusion entsteht, dass die Seite in einem leeren Cache schneller geladen wird (da die Skripte den Download des restlichen Dokuments nicht blockieren). Wenn Sie jedoch Code haben, den Sie beim Laden der Seite ausführen möchten, wird er erst ausgeführt, nachdem die gesamte Seite geladen wurde. Wenn Sie die Skripte in das <head>Tag einfügen, werden sie zuvor ausgeführt. In einem vorbereiteten Cache scheint die Seite also tatsächlich schneller zu laden.

Das Privileg, Skripte am Ende der Seite einzufügen, ist nicht immer verfügbar. Wenn Sie Inline-Skripte in Ihre Ansichten aufnehmen müssen, die von einer Bibliothek oder einem anderen zuvor geladenen JavaScript-Code abhängen, müssen Sie diese Abhängigkeiten in das <head>Tag laden .

Alles in allem sind die Empfehlungen von Yahoo interessant, aber nicht immer anwendbar und sollten von Fall zu Fall geprüft werden.

— Eran Galperin
quelle

1

Wenn Sie unauffälliges Javscript haben, haben Sie keine Inline-Snippets, die speziell erwähnte unauffällige Frage.

— Juan Mendes

1

Inline- <script>Tags bedeuten kein aufdringliches Javascript.

— Eran Galperin

@ Eric Galperin: Was ist eine gute Verwendung von Inline-Skript-Tags, die nicht aufdringlich sind?

— Juan Mendes

4

@Juan obstrusive Javascript bedeutet, dass die Benutzeroberfläche ohne sie beschädigt ist oder dass sie in das Markup eingebettet ist. <script>Tags sind vom Markup getrennt und können mit Code verwendet werden, der die Benutzeroberfläche verbessert, jedoch nicht erforderlich ist. Inline- <script>Tags sind also nicht von Natur aus aufdringlich .

— Eran Galperin

4

1. Mein Name ist Eran, nicht Eric. 2. Wenn Sie Daten aus einer serverseitigen Sprache an Javascript übergeben möchten, können Sie in einer Schleife, wenn beispielsweise Elemente, <script>Tags verwenden, um diese Werte in Javascript-Variablen zu codieren, um sie möglicherweise mit zu verwenden Inline-Bearbeitung oder ähnliches Verhalten.

— Eran Galperin

22

Wie andere gesagt haben, platzieren Sie es vor den HTML- Tags des schließenden Körpers .

Neulich hatten wir zahlreiche Anrufe von Kunden, die sich beschwerten, dass ihre Websites extrem langsam waren. Wir haben sie vor Ort besucht und festgestellt, dass das Laden einer einzelnen Seite 20 bis 30 Sekunden dauerte. Da wir dachten, dass die Server schlecht abschneiden, haben wir uns angemeldet - aber sowohl Web- als auch SQL-Server waren zu ~ 0% aktiv.

Nach einigen Minuten stellten wir fest, dass eine externe Site nicht verfügbar war, auf die wir für Javascript-Tracking-Tags verweisen. Dies bedeutete, dass Browser das Skript- Tag im Kopfbereich der Site trafen und darauf warteten, die Skriptdatei herunterzuladen.

Zumindest für Skripte von Drittanbietern / externen Skripten würde ich empfehlen, sie als letztes Element auf der Seite zu platzieren. Wenn sie dann nicht verfügbar wären, würde der Browser die Seite zumindest bis zu diesem Zeitpunkt laden - und der Benutzer würde es nicht bemerken.

— Lazlow
quelle

10

Coole Geschichte, Bruder :) Aber im Ernst, dies ist das überzeugendste Argument, das ich gesehen habe, um Skript-Tags am Ende der Seite zu platzieren.

— user271608

16

Zusammenfassend basierend auf den obigen Vorschlägen:

Platzieren Sie externe Skripte (Google Analytics, Marketing-Tracker von Drittanbietern usw.) vor dem </body>Tag.
Platzieren Sie Skripte, die sich auf das Seitenlayout auswirken, im Kopf.
Bei Skripten, die auf 'dom ready' basieren (z. B. jquery), sollten </body>Sie eine vorherige Platzierung in Betracht ziehen, es sei denn, Sie haben einen Randgrund, Skripte in head zu platzieren.
Wenn Inline-Skripte mit Abhängigkeiten vorhanden sind, platzieren Sie die erforderlichen Skripte in head.

— Luke W.
quelle

6

Wenn Sie an der Position Ihrer Skripte basteln möchten, ist YSlow ein großartiges Werkzeug, um Ihnen einen Vorgeschmack zu geben, wenn es die Leistung verbessern oder beeinträchtigen soll. Das Einfügen von Javascript in bestimmte Dokumentpositionen kann die Ladezeiten von Seiten erheblich verkürzen.

http://developer.yahoo.com/yslow/

— Skaffman
quelle

5

Nein, es sollte nicht nach dem sein, </html>da das ungültig wäre. Der beste Ort, um Skripte zu platzieren, ist direkt vor dem</body>

Dies liegt im Wesentlichen daran, dass die meisten Browser das Rendern der Seite beenden, während sie das von Ihnen bereitgestellte Skript bewerten. Es ist also in Ordnung, nicht blockierenden Code an einer beliebigen Stelle auf der Seite zu platzieren (ich denke hauptsächlich an Dinge, die Funktionen an das onLoadEreignis anhängen , da die Ereignisbindung so schnell ist, dass sie effektiv kostenlos ist). Ein großer Killer ist hier am Anfang der Seite das Einfügen eines Ad-Server-Skripts, mit dem verhindert werden kann, dass Seiten geladen werden, bevor die Anzeigen vollständig heruntergeladen wurden

— Laurie Young
quelle

Sie wissen, wenn Sie sich wirklich mit Geschwindigkeit beschäftigen, gibt es kein </ body> oder </ html> - die schließenden Tags für diese Elementtypen sind optional. Setzen Sie das <script> ganz am Ende und vergessen Sie die Verwendung von </ body> und </ html> insgesamt.

— Jim

9

Hoffentlich ist Jim sarkastisch - jedenfalls nicht seinen Rat befolgen. Für wohlgeformtes XHTML müssen alle Tags geschlossen werden, einschließlich der Body- und HTML-Tags. Wenn Ihr Code kein gültiges XML ist, machen Sie es falsch.

— Matt Lohkamp

6

Nein, ich bin nicht sarkastisch. Schauen Sie sich die Frage an. Es gibt HTML an, nicht XHTML. Es ist wahr, dass gültiges XHTML diese Dinge erfordert, gültiges HTML jedoch nicht. Es ist absolut nichts Falsches daran, HTML auszuwählen und die schließenden Tags für diese Elementtypen wegzulassen.

— Jim

2

Wenn Sie es unten platzieren, wird es zuletzt geladen, wodurch die Geschwindigkeit erhöht wird, mit der der Benutzer die Seite sehen kann. Es muss vor dem Finale sein, </html>sonst wird es nicht Teil des DOM.

Wenn der Code jedoch sofort benötigt wird, setzen Sie ihn in den Kopf.

Es ist am besten, Dinge wie Blog-Widgets unten zu platzieren, damit die Benutzerfreundlichkeit der Seite nicht beeinträchtigt wird, wenn sie nicht geladen werden.

— Rich Bradshaw
quelle