Il codice Jquery dovrebbe andare nell’intestazione o nel piè di pagina?

Dov’è il posto migliore dove mettere il codice Jquery (o separare il file Jquery)? Le pagine si caricano più velocemente se lo metto nel footer?

Tutti gli script devono essere caricati per ultimi

In quasi tutti i casi, è meglio posizionare tutti i riferimenti di script alla fine della pagina, subito prima di .

Se non si è in grado di farlo a causa di problemi relativi ai modelli e qualcos’altro, decorare i tag script con l’attributo defer modo che il browser sappia scaricare i propri script dopo che l’HTML è stato scaricato:

  

Casi limite

Esistono tuttavia alcuni casi limite, in cui è ansible che si verifichi uno sfarfallio della pagina o altri artefatti durante il caricamento della pagina, che di solito possono essere risolti semplicemente inserendo i riferimenti di script jQuery nel tag senza l’attributo defer . 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 del CSS, come i polyfill. Modernizr è una di queste librerie che deve essere inserita nell’etichetta principale .

Metti gli script in fondo

Il problema causato dagli script è che bloccano i download paralleli. La specifica HTTP / 1.1 suggerisce che i browser scarichino non più di due componenti in parallelo per nome host. Se pubblichi le tue immagini da più nomi host, puoi ottenere più di due download in parallelo. Durante lo scaricamento di uno script, tuttavia, il browser non avvierà altri download, anche su nomi host diversi. In alcune situazioni non è facile spostare gli script in fondo. Se, ad esempio, lo script utilizza document.write per inserire parte del contenuto della pagina, non può essere spostato più in basso nella pagina. Potrebbero esserci anche problemi di scoping. In molti casi, ci sono modi per risolvere questi problemi.

Un suggerimento alternativo che emerge spesso è quello di utilizzare 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 tanto quanto desiderato. Se uno script può essere differito, 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:

Carica solo jQuery in testa, via CDN, ovviamente.

Perché? In alcuni scenari è ansible includere un modello parziale (ad es. Snippet di modulo di accesso ajax) con codice jQuery dipendente incorporato; se jQuery viene caricato alla fine della pagina, si ottiene un errore “$ non definito”, bello.

Ci sono modi per ovviare a questo, naturalmente (come non incorporare JS e accodare a un pacchetto js load-at-bottom), ma perché perdere la libertà di js caricati pigramente, di essere in grado di posizionare il codice dipendente da jQuery ovunque per favore ? Il motore di Javascript non interessa dove il codice risiede nel DOM fintanto che le dipendenze (come jQuery che viene caricato) sono soddisfatte.

Per i tuoi file js condivisi / condivisi, sì, mettili prima di , ma per le eccezioni, in cui è proprio logico che l’applicazione mantieni uno snippet o un riferimento al file jQuery proprio lì a quel punto nel codice html , fare così.

Non ci sono colpi di performance che caricano jquery in testa; quale browser del pianeta non ha già il file jQuery CDN nella cache?

Molto rumore per nulla, metti jQuery in testa e lascia che la tua libertà js regni.

Nimbuz fornisce un’ottima spiegazione del problema, ma penso che la risposta finale dipenda dalla tua pagina: cosa è più importante per l’utente avere prima – script o immagini?

Ci sono alcune pagine che non hanno senso senza le immagini, ma hanno solo uno script minore e non essenziale. In tal caso ha senso inserire 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 su script per funzionare. In tal caso è meglio avere una pagina di lavoro senza immagini che una pagina non funzionante con immagini, quindi ha senso mettere gli script in cima.

Un’altra cosa da considerare è che gli script sono in genere più piccoli delle immagini. Naturalmente, questa è una generalizzazione e devi vedere se si applica alla tua pagina. Se ciò accade, per me è un argomento per metterli prima di tutto come regola empirica (cioè a meno che non ci sia una buona ragione per fare altrimenti), perché non ritarderanno le immagini quanto le immagini ritarderebbero gli script. Infine, è molto più facile avere script in alto, perché non devi preoccuparti se sono ancora caricati quando devi usarli.

In sintesi, tendo a mettere gli script in cima per impostazione predefinita e solo a considerare se vale la pena spostarli verso il basso dopo che la pagina è stata completata. È un’ottimizzazione – e non voglio farlo prematuramente.

La maggior parte del codice jQuery viene eseguito su documenti pronti, il che non accade comunque fino alla fine della pagina. Inoltre, il rendering della pagina può essere ritardato dall’analisi / esecuzione di javascript, quindi è consigliabile mettere tutto il javascript nella parte inferiore della pagina.

La pratica standard consiste nel mettere tutti gli script in fondo alla pagina, ma io uso ASP.NET MVC con un numero di plugin jQuery e trovo che tutto funzioni meglio se inserisco i miei script jQuery nella sezione della pagina principale.

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 sono stati caricati all’inizio, l’albero eseguirà il rendering senza le necessarie classi CSS imposte dal plugin. Quindi ottieni questo pasticcio dall’aspetto divertente quando la pagina viene caricata per prima, seguita dal corretto rendering del TreeView. Molto brutto. Mettere i plugin jQuery nella sezione della pagina master elimina questo problema.

Sebbene quasi tutti i siti Web posizionino ancora Jquery e altri javascript nell’intestazione: D, controlla anche stackoverflow.com.

Ti suggerisco anche di mettere prima del tag fine del corpo. Puoi controllare il tempo di caricamento dopo averlo posizionato in entrambi i posti. Il tag script metterà in pausa la tua pagina web per caricarla ulteriormente.

e dopo aver inserito javascript sul piè di pagina, potresti avere un aspetto insolito della tua pagina web finché non carica javascript, quindi inserisci css nella sezione dell’intestazione.

Poco prima è il posto migliore secondo questo link , ha senso.

La cosa migliore da fare è testare da solo.

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 così gli altri script che verranno dopo funzioneranno come previsto. Come qualcun altro ha indicato anche questa pagina carica jQuery nella sezione head.