jQuery: Warum document.ready verwenden, wenn externes JS am Ende der Seite?

Ich füge alle meine JS als externe Dateien hinzu, die ganz unten auf der Seite geladen werden. In diesen Dateien sind mehrere Methoden wie folgt definiert, die ich vom ready-Ereignis aus aufrufe:

var SomeNamepsace = {};

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

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

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

Wenn ich jedoch die Ready-Funktion entferne und die Methoden direkt aufrufe, funktioniert alles genauso, wird jedoch erheblich schneller ausgeführt - fast eine ganze Sekunde schneller bei einer ziemlich einfachen Datei! Gibt es einen guten Grund, das Ereignis ready zu verwenden, da das Dokument zu diesem Zeitpunkt geladen werden sollte (da das gesamte Markup vor den Skript-Tags steht)?

Gute Frage.

Es gibt einige Verwirrung um den gesamten Ratschlag "Skripte am Ende Ihrer Seite einfügen" und welche Probleme er zu lösen versucht. Bei dieser Frage werde ich nicht darüber sprechen, ob das Einfügen von Skripten am Ende der Seite die Leistung / Ladezeiten beeinflusst oder nicht. Ich werde nur darüber sprechen, ob Sie es brauchen, $(document).ready wenn Sie auch Skripte am Ende der Seite einfügen .

Ich gehe davon aus, dass Sie das DOM in den Funktionen referenzieren, die Sie sofort in Ihren Skripten aufrufen (alles so einfach wie documentoder document.getElementById). Ich gehe auch davon aus, dass Sie nur nach diesen [DOM-referenzierenden] Dateien fragen. IOW, Bibliotheksskripte oder Skripte, die Ihr 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 einfügen, Nein, brauchen Sie nicht $(document).ready.

Erläuterung : Ohne die Hilfe "onload"verwandter Implementierungen wie $(document).readyder Faustregel lautet: Jeder Code, der mit DOM-Elementen auf der Seite interagiert, sollte weiter unten auf der Seite platziert / eingefügt werden als die Elemente, auf die er verweist. Am einfachsten ist es, diesen Code vor dem Schließen zu platzieren </body>. Sehen Sie hier und hier . Es funktioniert auch um den gefürchteten Fehler "Operation abgebrochen" des IE .

Dies macht jedoch die Verwendung von keineswegs ungültig $(document).ready. Das Referenzieren eines Objekts vor dem Laden ist einer der häufigsten Fehler, die beim Starten in DOM-JavaScript gemacht wurden (es wurde zu oft beobachtet, um es zu zählen). Es ist die Lösung von jQuery für das Problem, und Sie müssen nicht darüber nachdenken, wo dieses Skript in Bezug auf die DOM-Elemente, auf die es verweist, enthalten sein wird. Dies ist ein großer Gewinn für Entwickler. Es ist nur eine Sache weniger, über die sie nachdenken müssen.

Außerdem ist es oft schwierig oder unpraktisch, alle DOM-referenzierenden Skripte an den unteren Rand der Seite zu verschieben (z. B. muss jedes Skript, das document.writeAufrufe ausgibt , stehen bleiben). In anderen Fällen verwenden Sie ein Framework, das eine Vorlage rendert oder dynamisches Javascript erstellt, in dem auf Funktionen verwiesen wird, die vor dem js eingefügt werden müssen.

Schließlich war es früher "Best Practice", den gesamten DOM-referenzierenden Code zu blockieren window.onload, wurde jedoch aus Gründen, die gut dokumentiert sind, durch $(document).readyImplementierungen in den Schatten gestellt .

All dies führt zu $(document).readyeiner weit überlegenen, praktischen und allgemeinen Lösung des Problems, DOM-Elemente zu früh zu referenzieren.