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

Antworten:

142

An und für sich sehr wenig, so oder so wird das DOM für Sie betriebsbereit sein (ich war darüber nervös, bis ich dies von Google gelesen habe ). Wenn Sie den Trick zum Ende der Seite verwenden, wird Ihr Code möglicherweise ein bisschen früher aufgerufen, aber nichts, was von Bedeutung ist. Noch wichtiger ist jedoch, dass diese Auswahl sich darauf bezieht, wo Sie Ihr JavaScript mit der Seite verknüpfen.

Wenn Sie Ihr scriptTag in das Tag aufnehmen headund sich darauf verlassen ready, trifft der Browser auf Ihr scriptTag, bevor es dem Benutzer etwas anzeigt. Unter normalen Umständen kommt der Browser zum Stillstand und lädt Ihr Skript herunter, startet den JavaScript-Interpreter und übergibt ihm das Skript. Er wartet dann, während der Interpreter das Skript verarbeitet (und dann überwacht jQuery auf verschiedene Arten damit das DOM bereit ist). (Ich sage "im normalen Verlauf", weil einige Browser die Attribute asyncoderdefer auf scriptTags unterstützen.)

Wenn Sie Ihr scriptTag am Ende des bodyElements einfügen, erledigt der Browser dies erst, wenn Ihre Seite dem Benutzer größtenteils bereits angezeigt wird. Dies verbessert die wahrgenommene Ladezeit für Ihre Seite.

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

Dafür gibt es jedoch einen Preis: Sie müssen sicher sein, dass die Dinge, die der Benutzer sehen kann, für die Interaktion bereit sind. Indem Sie die Download-Zeit verschieben, nachdem die Seite weitgehend angezeigt wurde, erhöhen Sie die Wahrscheinlichkeit, dass der Benutzer mit der Seite interagiert, bevor Ihr Skript geladen wird. Dies ist eines der Gegenargumente, um das scriptTag 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 Inline- script Element in das headeinfügen, das einen dokumentweiten Ereignishandler einrichtet, um dies zu bewältigen. Auf diese Weise erhalten Sie die verbesserte Ladezeit, aber wenn Wenn sie versuchen, etwas zu früh zu tun, können Sie ihnen das entweder sagen oder besser das, was sie tun wollten, in die Warteschlange stellen und es tun, wenn Ihr vollständiges Skript fertig ist.)

TJ Crowder
quelle
17
+1. Eine andere Möglichkeit, mit der Interaktion umzugehen, bevor das js geladen wird, besteht darin, die Seite zunächst ohne Javascript arbeiten zu lassen. Stellen Sie sicher, dass alle Links usw. funktionieren, obwohl sie natürlich ein erneutes Laden der Seite auslösen. Dann entführen Sie die Links und andere Sachen mit js und fügen Sie Ihren Ajax oder andere Schnickschnack hinzu :)
Adrian Schmidt
1
Wie würden Sie mit dem Anstehen einer Aktion umgehen? Gibt es ein Entwurfsmuster oder eine "gemeinsame Lösung", die ich in Bezug darauf untersuchen kann?
HC_
@HC_: Was meinst du mit "Anstehen einer Aktion"?
TJ Crowder
@TJCrowder Aus dem letzten Satz Ihrer Antwort: "Oder, besser, stellen Sie das, was sie tun wollten, in die Warteschlange und tun Sie es, wenn Ihr vollständiges Skript fertig ist." Ich habe mich nur gefragt, ob es "optimale" Wege gibt, dies zu tun, da ich sicher bin, dass ich "einen" Weg finden könnte, dies zu tun, aber ich bin sicher, dass es ... verpönt wäre, wenn jemand anderes es jemals tun würde schaute auf den Code, um den es geht.
HC_
2
@HC_: Ich hatte nie das Bedürfnis, dies zu tun, und kenne keinen bestimmten Standard dafür. Und fünf Jahre später scheint es mir besser zu sein, stattdessen einfach "Entschuldigung, Laden, eine Sekunde ..." zu wählen. (Obwohl , wenn die Dinge sind , dass langsam zu laden, Sie ein größeres Problem haben.) Wenn ich etwas sehe , denke ich klickbare ist, und klicken Sie darauf, und es passiert nichts, der Himmel weiß nur , was ich nächstes klicken. Wenn Sie sie in die Warteschlange stellen und dann wiedergeben, wenn Sie bereit sind, könnte dies ... weniger als ideal sein.
TJ Crowder
3

Ihre Seite wird langsamer geladen, indem $(document).ready()Skripte im gesamten DOM verteilt werden (anstatt am Ende alle), da jQuery zuerst synchron geladen werden muss.

$ = jQuery. Sie können $Ihre Skripte also nicht 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 asyncjQuery auch nicht laden, da in vielen Fällen Ihre $(document).ready()Skripte versuchen, ausgeführt zu werden, bevor jQuery vollständig asynchron geladen ist, und einen Fehler verursachen, da dieser noch $nicht definiert ist.

Davon abgesehen gibt es eine Möglichkeit, das System zu täuschen. Im Wesentlichen $gleich einer Funktion, die $(document).ready()Funktionen in eine Warteschlange / ein Array schiebt . Laden Sie dann am Ende der Seite jQuery, durchlaufen Sie die Warteschlange und führen Sie sie jeweils einzeln aus $(document).ready(). Auf diese Weise können Sie jQuery auf den unteren Rand der Seite verschieben, aber weiterhin $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

Jake Wilson
quelle