jQuery: Warum verwenden Sie document.ready wenn externe JS am Ende der Seite?

Question

Ich schließe alle meine JS als externe Dateien ein, die ganz unten auf der Seite geladen werden. Innerhalb dieser Dateien, ich habe wie so mehrere Methoden definiert, die ich aus dem Bereitschafts Ereignisse nennen:

var SomeNamepsace = {}; 

SomeNamepsace.firstMethod = function() { 
    // do something 
}; 

SomeNamepsace.secondMethod = function() { 
    // do something else 
}; 

$(document).ready(function() { 
    SomeNamepsace.firstMethod(); 
    SomeNamepsace.secondMethod(); 
}); 

Allerdings, wenn ich die Ready-Funktion entfernen und den Methoden straight-up nennen, alles funktioniert genauso, aber läuft wesentlich schneller - fast eine ganze Sekunde schneller auf einer ziemlich einfachen Datei! Da das Dokument zu diesem Zeitpunkt geladen werden sollte (da das gesamte Markup vor den Skript-Tags steht), gibt es einen guten Grund, das ready-Ereignis weiterhin zu verwenden?

Answer 1

Große Frage.

Es gibt einige Verwirrung um den ganzen "put scripts an der Unterseite Ihrer Seite" Beratung und welches Problem (s) versucht es zu lösen. Für diese Frage werde ich nicht darüber sprechen, ob sich die Verwendung von Skripts am Ende der Seite auf die Leistung/Ladezeiten auswirkt oder nicht. Ich werde nur darüber reden, ob Sie $(document).readybenötigen, wenn Sie auch Skripte am Ende der Seite setzen.

Ich nehme an, Sie beziehen sich auf das DOM in den Funktionen, die Sie sofort in Ihren Skripten aufrufen (alles so einfach wie document oder document.getElementById). Ich gehe auch davon aus, dass Sie nur nach diesen [DOM-referenzierenden] Dateien fragen. IOW, Bibliotheksskripts oder Skripts, die der DOM-Referenzierungscode benötigt (wie jQuery), müssen früher auf der Seite platziert werden.

Um Ihre Frage zu beantworten: Wenn Sie Ihre DOM-Referenzierungsskripte am Ende der Seite, Nein, Sie brauchen nicht $(document).ready.

Erklärung: ohne die Hilfe von "onload" -related Implementierungen wie $(document).ready die Faustregel: jeder Code, der es als die Elemente platziert/enthalten weiter unten auf der Seite sollte mit DOM-Elemente innerhalb der Seite interagiert Verweise. Am einfachsten ist es, diesen Code vor dem abschließenden </body> zu platzieren. Siehe here und here. Es funktioniert auch um IE gefürchtet "Operation aborted" error.

Damit gesagt, ist dies keineswegs ungültig für die Verwendung von $(document).ready. Auf ein Objekt zu verweisen, bevor es geladen wurde, ist [einer der] häufigsten Fehler, die beim Start in DOM JavaScript gemacht wurden (es wurde zu oft gezählt). Es ist die Lösung von jQuery für das Problem, und Sie müssen nicht darüber nachdenken, wo dieses Skript relativ zu den DOM-Elementen enthalten sein wird, auf die es verweist. Dies ist ein großer Gewinn für Entwickler. Es ist nur eine Sache weniger, an die sie denken müssen.

Außerdem ist es oft schwierig oder unpraktisch, alle DOM-referenzierenden Skripts an das Ende der Seite zu verschieben (z. B. muss jedes Skript, das document.write-Aufrufe ausgibt, unverändert bleiben). In anderen Fällen verwenden Sie ein Framework, das eine Vorlage rendert oder Teile von dynamischem Javascript erstellt, innerhalb derer Verweise Funktionen enthalten, die vor die js enthalten.

Schließlich verwendet es „best practice“ jammen alle DOM-Referenzierung Code in window.onload zu sein, aber es hat von $(document).ready Implementierungen für well document reasons verfinstert worden.

All dies summiert sich zu $(document).ready als eine weit überlegene, praktische und allgemeine Lösung für das Problem der Referenzierung DOM-Elemente zu früh.