it-swarm.com.de

$ (document) .ready (function () {}); vs script am Ende der Seite

was ist der Unterschied/Vorteil/Nachteil des Schreibens eines Skripts am Ende der Seite und des Schreibens des Skripts in

$(document).ready(function(){});
92
Sourav

In beiden Fällen ist das DOM an und für sich sehr wenig für Sie einsatzbereit (ich war nervös, bis ich gelesen habe dies von Google ). Wenn Sie den Trick zum Seitenende verwenden, wird Ihr Code möglicherweise um einiges früher aufgerufen, aber es spielt keine Rolle. Noch wichtiger ist jedoch, dass diese Auswahl sich darauf bezieht, wo Sie Ihr JavaScript in die Seite verlinken.

Wenn Sie Ihr script -Tag in das head einfügen und sich auf ready verlassen, erkennt der Browser Ihr script -Tag, bevor er dem Benutzer etwas anzeigt. Unter normalen Umständen kommt der Browser zum Stillstand und lädt Ihr Skript herunter, startet den JavaScript-Interpreter, übergibt das Skript und wartet, während der Interpreter das Skript verarbeitet (und jQuery überwacht dann auf verschiedene Weise) bereit sein). (Ich sage "im normalen Ablauf", weil einige Browser die Attribute async oder defer für script-Tags unterstützen.)

Wenn Sie Ihr script -Tag am Ende des body -Elements einfügen, führt der Browser dies erst dann aus, wenn Ihre Seite dem Benutzer größtenteils bereits angezeigt wird. Dies verbessert die wahrgenommene Ladezeit für Ihre Seite.

Um die wahrgenommene Ladezeit zu erhalten, platzieren Sie Ihr Skript am Ende der Seite. (Dies ist auch die Richtlinie der Yahoo-Leute .) Und wenn Sie das tun wollen, brauchen Sie ready nicht zu verwenden, obwohl Sie das natürlich könnten, wenn Sie möchten .

Dafür gibt es allerdings einen Preis: Sie müssen sicherstellen, dass die Dinge, die der Benutzer sehen kann, für die Interaktion bereit sind. Indem Sie die Download-Zeit nach dem Anzeigen der Seite verschieben, erhöhen Sie die Wahrscheinlichkeit, dass der Benutzer mit der Seite interagiert, bevor Ihr Skript geladen wird. Dies ist eines der Gegenargumente, um das Tag script am Ende zu setzen. Häufig ist dies kein Problem, aber Sie müssen auf Ihrer Seite nachsehen, ob dies der Fall ist und wenn ja, wie Sie damit umgehen möchten. (Sie können ein kleines inlinescript -Element in das head einfügen, das einen dokumentweiten Ereignishandler einrichtet, um dies zu bewältigen. Auf diese Weise erhalten Sie die verbesserte Ladezeit, aber if sie versuchen, etwas zu früh zu tun. Sie können ihnen dies entweder mitteilen oder, besser, das, was sie tun wollten, in die Warteschlange stellen es, wenn dein komplettes Skript fertig ist.)

142
T.J. Crowder

Ihre Seite wird langsamer geladen, indem Sie $(document).ready() Skripte im gesamten DOM verteilen (anstatt alle am Ende), da es erforderlich ist, dass jQuery synchron zuerst geladen wird.

$ = jQuery. Sie können also nicht $ In Ihren Skripten verwenden, ohne zuvor jQuery geladen zu haben. Dieser Ansatz zwingt Sie, jQuery am Anfang der Seite zu laden, wodurch das Laden der Seite angehalten wird, bis jQuery vollständig heruntergeladen ist.

Sie können jQuery auch nicht async laden, da in vielen Fällen Ihr $(document).ready() Skript (e) versucht, jQuery auszuführen, bevor es vollständig asynchron geladen ist, und einen Fehler verursacht, da wiederum $ ist noch nicht definiert.

Davon abgesehen gibt es eine Möglichkeit, das System zum Narren zu halten. Im Wesentlichen wird $ Gleich einer Funktion gesetzt, die $(document).ready() -Funktionen in eine Warteschlange/ein Array schiebt. Laden Sie dann am unteren Rand der Seite jQuery, durchlaufen Sie die Warteschlange und führen Sie die einzelnen $(document).ready() nacheinander aus. Auf diese Weise können Sie jQuery bis zum Ende der Seite verschieben, aber dennoch $ Darüber im DOM verwenden. Ich persönlich habe nicht getestet, wie gut das funktioniert, aber die Theorie ist solide. Die Idee gibt es schon eine Weile, aber ich habe sie sehr, sehr selten umgesetzt gesehen. Aber es scheint eine großartige Idee zu sein:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

3
Jake Wilson