Risposte:
Molto poco in sé e per sé, in entrambi i casi il DOM sarà pronto per essere operato (ero nervoso per questo fino a quando non ho letto questo da Google ). Se usi il trucco della fine della pagina, il tuo codice potrebbe essere chiamato il minimo, il minimo prima, ma non importa. Ma ancora più importante, questa scelta si riferisce a dove colleghi il tuo JavaScript nella pagina.
Se includi il tuo scripttag in heade fai affidamento su ready, il browser rileva il tuo scripttag prima di mostrare qualcosa all'utente. Nel normale corso degli eventi, il browser si arresta bruscamente e va a scaricare lo script, attiva l'interprete JavaScript e gli passa lo script, quindi attende che l'interprete elabori lo script (e quindi jQuery guarda in vari modi affinché il DOM sia pronto). (Dico "nel normale corso delle cose" perché alcuni browser supportano gli attributi asyncodefer sui scripttag.)
Se includi il tuo scripttag alla fine bodydell'elemento, il browser non fa tutto ciò fino a quando la tua pagina non è in gran parte già mostrata all'utente. Ciò migliora il tempo di caricamento percepito per la tua pagina.
Quindi, per ottenere il miglior tempo di caricamento percepito, metti il tuo script in fondo alla pagina. (Questa è anche la linea guida della gente di Yahoo .) E se hai intenzione di farlo, non è necessario usarlo ready, anche se ovviamente potresti farlo se ti piace.
C'è un prezzo per questo, però: devi essere sicuro che le cose che l'utente può vedere siano pronte per essere interagite. Spostando il tempo di download dopo che la pagina è stata ampiamente visualizzata, aumenti la possibilità che l'utente inizi a interagire con la pagina prima che lo script venga caricato. Questo è uno degli argomenti contrari per mettere il scripttag alla fine. Spesso non è un problema, ma devi guardare la tua pagina per vedere se lo è e, in tal caso, come vuoi gestirlo. (Puoi inserire un piccolo elemento inline script in headche imposta un gestore di eventi a livello di documento per far fronte a questo. In questo modo, ottieni il tempo di caricamento migliorato ma se provano a fare qualcosa troppo presto, puoi dirglielo o, meglio, mettere in coda la cosa che volevano fare e farlo quando il tuo script completo è pronto.)
La tua pagina verrà caricata più lentamente spargendo gli $(document).ready()script in tutto il DOM (invece che tutti alla fine) perché richiede che jQuery venga caricato prima in modo sincrono .
$ = jQuery. Quindi non puoi usarlo $nei tuoi script senza prima caricare jQuery. Questo approccio ti obbliga a caricare jQuery vicino all'inizio della pagina, il che interromperà il caricamento della pagina fino a quando jQuery non sarà completamente scaricato.
Non puoi nemmeno asynccaricare jQuery perché in molti casi, i tuoi $(document).ready()script proveranno ad essere eseguiti prima che jQuery sia completamente asincrono e causino un errore, perché ancora una volta, $non è ancora definito.
Detto questo, c'è un modo per ingannare il sistema. Essenzialmente impostando $uguale a una funzione che inserisce le $(document).ready()funzioni in una coda / matrice. Quindi in fondo alla pagina, carica jQuery, quindi itera nella coda ed esegui ciascuno $(document).ready()alla volta. Ciò ti consente di rimandare jQuery in fondo alla pagina ma ancora di utilizzarlo $sopra di esso nel DOM. Personalmente non ho testato quanto bene funzioni, ma la teoria è valida. L'idea esiste da un po 'ma l'ho vista implementata molto, molto raramente. Ma sembra un'ottima idea:
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax