jQuery: Perché usare document.ready se JS esterno in fondo alla pagina?

Includo tutti i miei JS come file esterni che vengono caricati in fondo alla pagina. All'interno di questi file, ho diversi metodi definiti in questo modo, che chiamo dall'evento ready:

var SomeNamepsace = {};

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

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

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

Tuttavia, quando rimuovo la funzione ready e chiamo i metodi direttamente, tutto funziona allo stesso modo, ma viene eseguito molto più velocemente, quasi un secondo intero più veloce su un file piuttosto semplice! Poiché il documento dovrebbe essere caricato a questo punto (poiché tutto il markup viene prima dei tag dello script), c'è qualche buona ragione per utilizzare ancora l'evento ready?

Ottima domanda.

C'è un po 'di confusione intorno al consiglio "metti gli script in fondo alla pagina" e ai problemi che tenta di risolvere. Per questa domanda non parlerò del fatto che l'inserimento di script in fondo alla pagina influisca o meno sulle prestazioni / sui tempi di caricamento. Parlerò solo se hai bisogno $(document).ready se metti anche gli script in fondo alla pagina .

Presumo che tu stia facendo riferimento al DOM in quelle funzioni che stai invocando immediatamente nei tuoi script (qualsiasi cosa semplice come documento document.getElementById). Presumo anche che tu stia chiedendo solo di questi file [riferimento DOM]. IOW, gli script di libreria o gli script richiesti dal codice di riferimento DOM (come jQuery) devono essere posizionati in precedenza nella pagina.

Per rispondere alla tua domanda : se includi i tuoi script di riferimento DOM in fondo alla pagina, No, non è necessario $(document).ready.

Spiegazione : senza l'ausilio di "onload"implementazioni correlate come $(document).readyla regola pratica è: qualsiasi codice che interagisce con gli elementi DOM all'interno della pagina dovrebbe essere posizionato / incluso più in basso nella pagina rispetto agli elementi a cui fa riferimento. La cosa più semplice da fare è inserire quel codice prima della chiusura </body>. Vedi qui e qui . Funziona anche attorno al temuto errore "Operazione interrotta" di IE .

Detto questo, ciò non inficia affatto l'uso di $(document).ready. Fare riferimento a un oggetto prima che sia stato caricato è [uno degli] errori più comuni commessi quando si inizia in DOM JavaScript (visto troppe volte per poterlo contare). È la soluzione di jQuery al problema e non richiede di pensare a dove verrà incluso questo script rispetto agli elementi DOM a cui fa riferimento. Questa è una grande vittoria per gli sviluppatori. È solo una cosa in meno a cui devono pensare.

Inoltre, è spesso difficile o poco pratico spostare tutti gli script di riferimento DOM in fondo alla pagina (ad esempio, qualsiasi script che emette document.writechiamate deve rimanere fermo). Altre volte, stai usando un framework che rende alcuni template o crea pezzi di javascript dinamico, all'interno dei quali fa riferimento a funzioni che devono essere incluse prima del js.

Infine, era una "best practice" inserire tutto il codice di riferimento DOM window.onload, tuttavia è stato eclissato dalle $(document).readyimplementazioni per ragioni ben documentate .

Tutto ciò rappresenta $(document).readyuna soluzione di gran lunga superiore, pratica e generale al problema di fare riferimento troppo presto agli elementi DOM.