Risposte:
Tutti gli script devono essere caricati per ultimi
In quasi tutti i casi, è meglio posizionare tutti i riferimenti agli script alla fine della pagina, poco prima </body>.
Se non sei in grado di farlo a causa di problemi di templatura e quant'altro, decora i tag degli script con l' deferattributo in modo che il browser sappia scaricare gli script dopo aver scaricato l'HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>Custodie per bordi
Ci sono alcuni casi limite, tuttavia, in cui potresti riscontrare sfarfallio della pagina o altri artefatti durante il caricamento della pagina che di solito possono essere risolti semplicemente posizionando i riferimenti degli script jQuery nel <head>tag senza l' deferattributo. Questi casi includono l'interfaccia utente di jQuery e altri componenti aggiuntivi come jCarousel o Treeview che modificano il DOM come parte della loro funzionalità.
Ulteriori avvertenze
Ci sono alcune librerie che devono essere caricate prima del DOM o CSS, come i polyfill. Modernizr è una di queste librerie che deve essere inserita nel tag head .
<head>. Se il markup dipende dal plug-in jQuery che ordina i contenuti per te, non ha senso inserire il riferimento del plug-in nella parte inferiore della pagina, poiché otterrai un markup funky nella tua pagina web fino a quando i plug-in non vengono caricati. Le regole devono essere seguite fino a quando non funzionano più, a quel punto le regole dovrebbero essere infrante.
Il problema causato dagli script è che bloccano i download paralleli. La specifica HTTP / 1.1 suggerisce che i browser non scaricano più di due componenti in parallelo per nome host. Se offri le tue immagini da più nomi host, puoi ottenere più di due download in parallelo. Durante il download di uno script, tuttavia, il browser non avvierà altri download, anche su nomi host diversi. In alcune situazioni non è facile spostare gli script in basso. Se, ad esempio, lo script utilizza document.write per inserire parte del contenuto della pagina, non può essere spostato in basso nella pagina. Potrebbero esserci anche problemi di scoping. In molti casi, ci sono modi per aggirare queste situazioni.
Un suggerimento alternativo che spesso emerge è l'uso di script differiti. L'attributo DEFER indica che lo script non contiene document.write ed è un indizio per i browser che possono continuare a eseguire il rendering. Sfortunatamente, Firefox non supporta l'attributo DEFER. In Internet Explorer, lo script può essere rinviato, ma non quanto desiderato. Se uno script può essere rinviato, può anche essere spostato nella parte inferiore della pagina. Ciò renderà le tue pagine web più veloci.
EDIT: Firefox supporta l'attributo DEFER dalla versione 3.6.
fonti:
Caricare jQuery solo nella testa, ovviamente tramite CDN.
Perché? In alcuni scenari è possibile includere un modello parziale (ad es. Frammento di modulo di accesso ajax) con codice dipendente da jQuery incorporato; se jQuery viene caricato in fondo alla pagina, viene visualizzato l'errore "$ non definito", bello.
Esistono modi per ovviare a questo naturalmente (come non incorporare alcun JS e aggiungere un bundle js con caricamento in basso), ma perché perdere la libertà di js caricati pigramente, di poter posizionare il codice dipendente da jQuery ovunque tu voglia ? Al motore Javascript non importa dove risiede il codice nel DOM fintanto che le dipendenze (come il caricamento di jQuery) sono soddisfatte.
Per i tuoi file js comuni / condivisi, sì, inseriscili prima </body>, ma per le eccezioni, dove ha davvero senso la manutenzione delle applicazioni per attaccare uno snippet dipendente da jQuery o un riferimento di file proprio lì a quel punto nell'html, fallo.
Non ci sono colpi di performance caricando jquery in testa; quale browser del pianeta non ha già il file jNery CDN nella cache?
Molto rumore per nulla, metti jQuery in testa e lascia regnare la tua libertà.
2%, diciamo, metà se ne andrà prima che la pagina venga caricata per la prima volta. In questo modo stai perdendo 1%i visitatori, ma potenzialmente risparmiando un sacco di tempo e problemi di sviluppo. Vedi se questo ha senso con il tuo modello di business ...
Nimbuz fornisce un'ottima spiegazione del problema in questione, ma penso che la risposta finale dipenda dalla tua pagina: cosa c'è di più importante che l'utente abbia prima: script o immagini?
Ci sono alcune pagine che non hanno senso senza le immagini, ma hanno solo script minori, non essenziali. In tal caso ha senso mettere gli script in fondo, in modo che l'utente possa vedere le immagini prima e iniziare a dare un senso alla pagina. Altre pagine si basano sullo script per funzionare. In tal caso è meglio avere una pagina di lavoro senza immagini rispetto a una pagina di non lavoro con immagini, quindi ha senso mettere gli script in alto.
Un'altra cosa da considerare è che gli script sono generalmente più piccoli delle immagini. Naturalmente, questa è una generalizzazione e devi vedere se si applica alla tua pagina. Se lo fa allora, per me, è un argomento per metterli al primo posto come regola empirica (cioè, a meno che non ci sia una buona ragione per fare diversamente), perché non ritarderanno le immagini tanto quanto le immagini ritarderebbero gli script. Infine, è molto più semplice avere uno script in alto, perché non devi preoccuparti se sono ancora caricati quando devi usarli.
In sintesi, tendo a mettere gli script in alto per impostazione predefinita e considero solo se vale la pena spostarli in fondo al termine della pagina. È un'ottimizzazione - e non voglio farlo prematuramente.
La maggior parte del codice jquery viene eseguita sul documento pronto, che non avviene comunque fino alla fine della pagina. Inoltre, il rendering della pagina può essere ritardato dall'analisi / esecuzione di javascript, quindi è consigliabile mettere tutto javascript in fondo alla pagina.
La pratica standard è mettere tutti i tuoi script in fondo alla pagina, ma uso ASP.NET MVC con un numero di plugin jQuery e trovo che tutto funzioni meglio se inserisco i miei script jQuery nella <head>sezione del master pagina.
Nel mio caso, ci sono artefatti che si verificano quando la pagina viene caricata, se gli script si trovano nella parte inferiore della pagina. Sto usando il plug-in jQuery TreeView e se gli script non vengono caricati all'inizio, l'albero verrà visualizzato senza le classi CSS necessarie imposte dal plug-in. Quindi ottieni questo casino dall'aspetto divertente quando la pagina viene caricata per la prima volta, seguita dal rendering corretto di TreeView. Molto male. Mettere i plugin jQuery nella <head>sezione della pagina principale elimina questo problema.
@Html.Action, che scrive dinamicamente un risultato sull'output, poiché il mio parziale dà $ is undefinedsignificato, invece devo usare .load ('@ Url.Action') per caricare il parziale. Ma questo dà una spinta a causa della richiesta extra. Sulla base del tuo contributo, sposterò jquery sopra RenderBody () nella mia pagina principale
Sebbene quasi tutti i siti Web collochino ancora Jquery e altri javascript nell'intestazione: D, controlla anche stackoverflow.com.
Ti suggerisco anche di indossare prima dell'etichetta del corpo. Puoi controllare il tempo di caricamento dopo averlo posizionato in entrambi i luoghi. Il tag script mette in pausa la pagina Web per caricarla ulteriormente.
e dopo aver inserito javascript a piè di pagina, potresti ottenere un aspetto insolito della tua pagina web fino a quando non carica javascript, quindi posiziona css nella sezione dell'intestazione.
Poco prima </body>è il posto migliore in base alle Yahoo Developer Network 's Best Practices per velocizzare il tuo sito Web questo link , ha senso.
La cosa migliore da fare è testare da soli.
Per me jQuery è un po 'speciale. Forse un'eccezione alla norma. Ci sono così tanti altri script che si basano su di esso, quindi è abbastanza importante che si carichi presto, quindi gli altri script che verranno dopo funzioneranno come previsto. Come ha sottolineato qualcun altro, anche questa pagina carica jQuery nella sezione head.