Quali sono i pro ei contro: mettere javascript in testa e metterlo appena prima della chiusura del corpo


87

La maggior parte dei libri / articoli di javascript e sviluppo web dice che devi inserire CSS nel tag head e javascript nella parte inferiore della pagina.

Ma quando apro il sorgente html di siti Web famosi come questo stackoverflow, trovo che inseriscano alcuni file js nel tag head.

Quali sono i vantaggi e gli svantaggi di entrambi gli approcci e quando utilizzarli?

Trovata un'altra domanda per lo stesso problema: dove devo dichiarare i file JavaScript utilizzati nella mia pagina? In <head> </head> o vicino </body>?



Risposte:


63

Dalle migliori pratiche di Yahoo per velocizzare il tuo sito Web :

Il problema causato dagli script è che bloccano i download paralleli. La specifica HTTP / 1.1 suggerisce che i browser non scarichino 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 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, esistono modi per risolvere queste situazioni.

Un suggerimento alternativo che si presenta 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 il rendering. Sfortunatamente, Firefox non supporta l'attributo DEFER. In Internet Explorer, lo script può essere differito, ma non quanto desiderato. Se uno script può essere rinviato, può anche essere spostato in fondo alla pagina. Ciò renderà le tue pagine web caricate più velocemente.

Pertanto, in generale, è preferibile metterli in fondo. Tuttavia, non è sempre possibile, e spesso non fa che molto di una differenza comunque.


Ho un esempio che sposta un quadrato su una tela e non funzionerà se inserisco il javascript nella parte principale dell'HTML. Deve essere nella parte inferiore del corpo dopo che la tela è stata dichiarata. C'è una ragione per questo o come potrei mantenere tutto il mio Javascript nella sezione <head> del file.
Doug Hauf

@DougHauf Non sono sicuro di essere accurato su questo, ma hai aggiunto un ascoltatore DOMContentLoaded? Chiedo perché se hai il tuo script in fondo e il rendering sulla tela va bene; è perché la tela era già stata caricata sullo schermo prima di tentare di scrivere su di essa. Ora, se metti lo script nell'intestazione, non verrà disegnato sulla tela perché la tela non è ancora lì. Quindi se aggiungi l'ascoltatore, il codice della tela verrà attivato DOPO il caricamento della tela.
Matthew D Auld

1
Non so quanti anni abbia il documento che stai citando, ma sembra che l'attributo defer sia supportato in Firefox da un po 'di tempo .
user2428118

Grazie, questo mi aiuta molto
tonydeleon

31

Come altre persone hanno detto, quando metti javascript in testa ritarda il rendering della pagina fino a dopo il caricamento degli script, il che significa che il caricamento della pagina potrebbe richiedere più tempo, specialmente se stai scaricando file di script di grandi dimensioni.

Se sposti i tag di script alla fine della pagina, ti assicurerai che il browser scarichi immagini e fogli di stile prima dei tag di script e la pagina apparirà probabilmente per essere visualizzata prima che gli script inizino a essere eseguiti. Ciò significa anche che se dipendi da alcune funzionalità dei tuoi script, questo non sarà disponibile fino a quando la pagina non sarà visibile all'utente.

Se stai aggiungendo stili o elementi (ecc. Cambiando i campi di testo con qualche forma di editor più ricco) questo sarà visibile all'utente come sfarfallio.

Se si aggiungono eventi di clic agli elementi, questi non saranno selezionabili fino a quando gli elementi stessi non saranno visibili.

A volte questi problemi ti richiedono di mettere i tuoi copioni in testa, altre volte starai bene incollandoli in fondo.

IMHO (completamente contro YSlow e molte persone intelligenti) dovresti mantenere i tuoi script nel tag head e fare affidamento su di essi per essere memorizzati nella cache la maggior parte del tempo.


9

In generale, dovresti posizionare i riferimenti agli script in fondo alla pagina. Gli script non devono solo essere scaricati, ma devono anche essere valutati ed eseguiti prima che il blocco venga rilasciato e la pagina proceda con il processo di rendering. Cose come Modernizr dovrebbero essere posizionate in alto perché esegue alcuni rilevamenti di funzionalità e shim HTML5 che probabilmente vorrai.

Un altro motivo per cui vuoi provare a posizionare gli script in fondo alla pagina è Single Point of Failure o SPOF. È qui che una chiamata di script scade o per qualche altro motivo blocca l'esecuzione della pagina. Questo può accadere molto con le librerie pubblicitarie di terze parti, ecc.

Sì, potresti dover pensare un po 'più a fondo a come progetti la tua applicazione, ma ho scoperto che è diventato molto naturale molto rapidamente per me. Ho creato centinaia di app Web negli ultimi 4 anni con lo script in fondo e posso dire la differenza. Potrei essere 500 ms, potrebbe essere 5000 ms, ma è tutto importante.


5

Dipende davvero dal tuo sito web. Se stai accedendo e invocando le funzioni JavaScript all'interno del corpo, è necessario fare riferimento ad esso nell'intestazione in modo che venga caricato. Altrimenti, se stai per chiamare JavaScript solo quando l'intero documento è stato caricato, è consigliabile inserire JavaScript alla fine del corpo. Mettendo il file .JS alla fine si carica l'intera pagina e quindi si recupera il file .JS. In questo modo l'utente sarà in grado di vedere velocemente la pagina e quando avrà familiarizzato con la pagina il file .JS è già stato scaricato.


4

Qualsiasi javascript nella testina verrà valutato prima che la pagina venga caricata, il che significa che la pagina sembra richiedere più tempo per caricarsi. È leggermente più difficile far funzionare correttamente gli eventi se tutto il javascript è alla fine, ma jQuery praticamente risolve questo problema per te.


2
Potresti menzionare come jQuery risolve questo problema per interesse?
Matthew Lock

jQuery ha un'API per associare i gestori agli eventi
Draemon
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.