JavaScript am unteren / oberen Rand der Webseite?

73

Ich habe gerade das Plugin "Yslow" für Mozilla Firefox verwendet und es hat mir gesagt, dass ich JavaScript ganz unten platzieren soll. Ich habe das schon einmal gehört, aber nicht wirklich viel darüber nachgedacht. Gibt es wirklich einen Vorteil darin, JavaScript am unteren Rand einer Webseite im Vergleich zum oberen Rand zu platzieren?

javascript webpage

— Nutzer
quelle

Was ist, wenn sich das Javascript in einer separaten Datei befindet? Ich bevorzuge diesen Weg, einfach weil es einfacher zu debuggen / zu lesen ist. Wird das Laden schneller / langsamer?

— Mark Kadlec

2

Sie können in diesem Fall direkt zur Quelle gehen ... developer.yahoo.com/performance/rules.html ist die Yahoo-Erklärung für diese Vorgehensweise.

— Nick Larsen

1

Sind diese Yahoo-Leistungsregeln noch aktuell? Ich muss mir vorstellen, dass jemand ein ähnlich vollständiges Regelwerk veröffentlicht hat (oder Yahoo möglicherweise ein Update veröffentlicht hat), das Änderungen berücksichtigt, die in den letzten vier Jahren aufgetreten sind.

— kralco626

1

@kralco Ich fand diesen Artikel interessant. Berücksichtigt die Natur des heutigen Web.

— Rafa

54

Dadurch kann die Webseite vor dem Ausführen von JavaScript sichtbar geladen werden. Dies ist beispielsweise für Google Analytics sinnvoll, die vor dem Laden der Seite nicht ausgeführt werden müssen.

Möglicherweise möchten Sie auch Dinge wie jQuery, Prototyp usw. untersuchen und an den "ready" -Handler anhängen, der JavaScript-Code ausführt, nachdem das DOM vollständig geladen wurde. Dies ist ein geeigneter Ort für viel JavaScript-Code.

— wojo
quelle

Bedeutet dies, dass sich JavaScript, das sich normalerweise in den <head> </ head> -Tags befindet, an einer beliebigen Stelle auf der Seite nach dem <body> -Tag befinden kann?

— Benutzer

1

Ja, das <script> -Tag kann sich an einer beliebigen Stelle befinden und wird ausgeführt, wenn es angetroffen wird. Daher besteht eine gute Chance, dass alles, was zuvor vorhanden war, für den Benutzer bereits sichtbar ist (dies ist jedoch nicht garantiert).

— Vava

1

Sie müssen das Skript nicht einmal in die HTML-Tags einfügen, Sie können es unten nach außen einfügen und es würde immer noch funktionieren ... obwohl es vielleicht ein bisschen lustig aussieht.

— Nick Larsen

1

Bevor ich mich hauptsächlich mit jQuery ereignisgesteuert beschäftigte, habe ich überall Skript-Tags verteilt, wie vava und NickLarsen erwähnt haben. Sie können sich fast überall in Ihrem HTML befinden, auch nach dem HTML-Tag.

— Wojo

13

@ NickLarsen, dies wird nicht validiert. Schlechte Praxis.

— Corey Ballou

46

Angenommen, Sie laufen nicht auf einem CDN oder stellen Ihr JS nicht von einer separaten Subdomäne oder einem separaten Server aus bereit, wird es synchron geladen und zwingt Ihren HTML-Inhalt, zu warten, bis die Dateien heruntergeladen wurden. Indem Sie das JS am Ende Ihrer Seite vor dem schließenden </body>Tag platzieren, können Sie den HTML-Code vor dem Laden des Javascript analysieren. Dies führt zu schnelleren Ladezeiten.

— Corey Ballou
quelle

5

Wenn Sie statischen HTML-Inhalt und viel Javascript haben, kann dies einen Unterschied in der wahrgenommenen Ladezeit der Seite bewirken, da das HTML zuerst geladen wird und dem Benutzer etwas zum Anschauen gibt. Wenn Sie nicht viel Javascript haben oder der vorhandene Seiteninhalt darauf angewiesen ist, dass Javascript nützlich ist, ist dies praktisch nicht so nützlich.

— Brian Moeskau
quelle

4

Ja, die Seite lädt den Inhalt und rendert ihn, bevor Javascript geladen und ausgeführt wird. Dadurch wird die Seite schneller geladen.

— CodeJoust
quelle

4

Ich möchte ein Update zu diesem Thema bringen. Google hat kürzlich einen asynchronen Snipp http://support.google.com/analytics/bin/answer.py?hl=de&answer=1008080&rd=1 eingeführt, der für Ihre Website hinzugefügt werden kann, um z Unterstützung für Google-Statistiken. Es sollte <head>für eine optimale Leistung am unteren Rand des Abschnitts platziert werden . Der Punkt ist, dass dies die Wahrscheinlichkeit erhöht, dass ein Tracking Beacon gesendet wird, bevor der Benutzer die Seite verlässt.

Dort sollte es sich auch befinden, wenn Sie Ihre Website in Google Webmaster-Tools mithilfe Ihrer Google Analytics überprüfen möchten.

Davon abgesehen gelten grundsätzlich immer noch dieselben Regeln - Javascript unten für das "schnelle" Laden der Seite. Ich habe Anführungszeichen verwendet, weil ich die Seite nicht vollständig geladen zähle, bis Javascript fertig ist ;-)

— Mauno Vähä
quelle

0

Damit können alle DOM-Elemente vollständig geladen werden, bevor das Javascript geladen wird, das sie adressiert. Dieser Standard ist auch Teil von Visual Studio.

— Umar AlFarooq
quelle

0

Das Platzieren von Skripten am unteren Rand des Elements verbessert die Anzeigegeschwindigkeit, da die Skriptkompilierung die Anzeige verlangsamt.

— Aakriti Kishore
quelle

0

OBEN

Wenn Sie Ihr JavaScript oben auf der Seite platzieren, lädt der Browser Ihre JS-Dateien vor dem Markup, den Bildern und dem Text. Und da Browser JavaScript synchron laden, wird nichts anderes geladen, während das JavaScript geladen wird. Es wird also einen Zeitraum von einigen Sekunden geben, in dem der Benutzer eine leere Seite sieht, während das JavaScript geladen wird.

UNTERSEITE

Wenn Sie dagegen Ihr JavaScript am Ende der Seite platzieren, wird dem Benutzer zuerst das Laden der Seite angezeigt, und danach wird das JavaScript im Hintergrund geladen. Wenn zum Beispiel das Laden von CSS und HTML 5 Sekunden und das Laden von JavaScript weitere 5 Sekunden dauert, erhalten Sie durch das Platzieren unseres JavaScript oben auf der Seite eine "wahrgenommene" Ladezeit von 10 Sekunden Auf der Unterseite wird eine "wahrgenommene" Ladezeit von 5 Sekunden angezeigt.

Entnommen aus Demian Labs .

— ivanleoncz
quelle

0

Ja, das Einfügen des Javaskripts am Ende der Seite beschleunigt das Laden der Seite erheblich. Da der Browser die Dinge synchron ausführt, wirkt sich dies auf das Laden der Seite aus, wenn sie oben auf der Seite platziert wird. Wenn es am Ende der Seite platziert wird, hat die Seite das gesamte Markup bis dahin geladen, wenn der Browser mit dem Laden des Javascript beginnt, um dem Benutzer eine bessere Erfahrung zu bieten.

— raj240
quelle