"Mettere Javascript in fondo" vanifica lo scopo di document.ready?

26

So che si consiglia di mettere Javascript in fondo alla pagina, ma se sto usando jQuery questo non vanifica il suo scopo di essere eseguito mentre il DOM sta caricando?

Se ho un menu a discesa, ad esempio, i menu a discesa non verranno visualizzati fino a quando non sarà caricato tutto il resto della pagina. Cerco anche di sviluppare pensando al miglioramento progressivo, quindi potrei avere elementi nascosti con jQuery anziché CSS (in modo che gli utenti non JS possano vederli).

C'è un mezzo felice, forse?

javascript performance jquery

— DisgruntledGoat
fonte

Sto avendo il problema inverso. Ho uno script che crea e posiziona una barra laterale, ma sfortunatamente la pagina viene renderizzata prima dell'esecuzione del mio script, risultando in uno scemo sgradevole mentre gli elementi della pagina vengono ridisegnati nelle nuove posizioni. È possibile bloccare il rendering fino a quando il mio script non è terminato, o altrimenti le mie dimensioni e posizione vengono eseguite prima del primo rendering?

3

Questa domanda non appartiene più a StackOverflow?

— Marco Demaio,

30

Document. già attende il caricamento del DOM prima di eseguire JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

L'idea di metterlo in fondo, significa che se il tuo JS sta avendo problemi o la persona ha una connessione lenta, il resto della pagina si carica ancora per primo e non si "blocca".

JS funziona ancora quando tutto è stato caricato, sia all'inizio che alla fine.

— Callan
fonte

6

Mettere javascript in basso significa che l'altro contenuto della pagina (in particolare il testo) viene caricato prima di javascript, quindi gli utenti non attendono il caricamento di JS se hanno connessioni lente.

Ciò non influisce già su document.come viene chiamato quando il browser ha terminato la preparazione del DOM per una pagina. Ad ogni modo, tutto deve ancora essere caricato per primo.

— Macha
fonte

3

Uno script non ha un reale utilizzo fino al termine del caricamento dell'HTML: uno script non può modificare il DOM fino a quando non è stato caricato l'HTML. document.readyattende il caricamento del DOM. Quindi, non ha senso trattenere cose importanti come i fogli di stile.

Inserisci gli script nella parte inferiore della pagina (prima del </body>tag) per ordinare all'utente di trasmettere HTML e CSS il più velocemente possibile. Il browser sarà in grado di rendere la pagina molto più veloce e quindi gli script possono essere caricati, piuttosto che lasciare una pagina vuota per l'utente da guardare mentre attendono il download degli script.

Mentre il browser sta progressivamente eseguendo il rendering della pagina, se colpisce un tag script (cioè un file Javascript esterno) tutto si ferma . Gli script hanno il diritto di passaggio: durante il download di uno script, il browser non avvia altri download. vale a dire immagini e fogli di stile e qualsiasi altro download parallelo saranno bloccati, anche su nomi host diversi.

Lo svantaggio di mettere gli script in fondo alla pagina è che, poiché la pagina verrà visualizzata prima che gli script siano inizializzati, in particolare i clicker rapidi saranno in grado di interagire con il tuo sito prima che Javascript sia pronto.

Nota: è vero il contrario per i fogli di stile: i fogli di stile nella parte inferiore della pagina bloccano il rendering progressivo fino a quando tutti i fogli di stile sono stati scaricati e spostandoli nel documento HEADelimina il problema.

Esiste un trucco per caricare javascript senza far attendere l'utente, puoi creare un <script/>elemento usando il createElement()metodo DOM e aggiungerlo alla pagina appena prima del </body>tag di chiusura :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Il browser non inizia a scaricare lo script js fino a quando il nuovo <script/>elemento non viene effettivamente aggiunto alla pagina. Una volta completato il download, il browser interpreta il codice Javascript contenuto all'interno.

— Tom
fonte

1

Non del tutto vero. Lo script può modificare il DOM prima che tutto l'HTML sia caricato ... In effetti è per questo che gli script stanno bloccando perché possono alterare la pagina. Detto questo, in molti casi gli sviluppatori non devono aggiungere il loro script di "comportamento" fino a quando non viene caricato il DOM.

— scunliffe,

1

Sì. Se metti gli script in fondo, doc.ready( DOMContentLoadedevento) non è più necessario: lo script verrà eseguito dopo che tutti i DOM precedenti sono stati comunque caricati.

Poiché gli script alla fine migliorano le prestazioni (l'analisi HTML e il caricamento di CSS e immagini non sono bloccati dagli script), consiglio di mettere gli script in fondo invece di usarli doc.ready.

— Kornel
fonte