2010-03-16 14 views
72

La maggior parte dei libri e degli articoli di sviluppo di javascript e web dice che è necessario inserire CSS nel tag head e javascript nella parte inferiore della pagina.Che cosa è pro e contro: mettendo javascript in testa e mettendo poco prima della chiusura del corpo

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

Che pro e contro di entrambi gli approcci e quando utilizzare quale?

Trovati un'altra domanda per lo stesso problema: Where should I declare JavaScript files used in my page? In <head></head> or near </body>?

+0

http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom-correct – froadie

+0

Vedere anche: http://stackoverflow.com/questions/1013112/where-should-i- declare-javascript-files-usato-nella-mia-pagina-in-testa-testa-o-vicino e http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom-correct – CMS

risposta

51

Da Yahoo Best Practices for Speeding Up Your Web Site:

Il problema causato da script è che bloccano download paralleli. La specifica HTTP/1.1 suggerisce che i browser non scarichino più di due componenti in parallelo per nome host. Se le immagini vengono pubblicate da più nomi di host , è possibile ottenere più di due download di in parallelo. Mentre lo script viene scaricato, tuttavia, il browser non avvierà altri download , anche in diversi nomi di host .

In alcune situazioni, non è facile spostare gli script in fondo allo . Se, per esempio , lo script utilizza document.write per inserire parte del contenuto della pagina , non può essere spostato in basso nella pagina, . Potrebbero inoltre esserci problemi di ambito . In molti casi, ci sono soluzioni per risolvere questi casi .

Un suggerimento alternativo che spesso compare consiste nell'utilizzare gli script posticipati. 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 rinviato a , ma non fino a desiderato. Se uno script può essere differito, può anche essere spostato nella parte inferiore di della pagina. Ciò renderà le tue pagine Web più veloci.

Pertanto, in generale, è preferibile posizionarli in fondo. Tuttavia, non è sempre possibile, e spesso non fa lo del.

+0

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 manterrei tutti i miei Javascript nella sezione del file. –

+0

@DougHauf Non sono sicuro se sono accurato su questo ma hai aggiunto un listener DOMContentLoaded? Te lo chiedo perché se hai il tuo copione in fondo e lo rendi benissimo alla tela; è perché la tela era già stata caricata sullo schermo prima di tentare di scriverlo. Ora se metti lo script nell'intestazione non si disegnerebbe sulla tela perché la tela non è ancora lì.Quindi se aggiungi l'ascoltatore sparerà il tuo codice canvas DOPO che il canvas è stato caricato. –

4

Qualsiasi javascript nella testa verrà valutata prima che la pagina viene caricata, cioè la pagina si sente come ci vuole più tempo per caricare. È leggermente più difficile far funzionare correttamente gli eventi se tutto il javascript è alla fine, ma jQuery risolve praticamente questo problema per te.

+2

Puoi citare come jQuery risolve questo problema per interesse? –

+0

jQuery ha un'API per i gestori di binding agli eventi – Draemon

5

Dipende davvero dal tuo sito web. Se si accede e si invocano le funzioni JavaScript all'interno del corpo, è necessario fare riferimento nell'intestazione in modo che venga caricato.Altrimenti, se chiamerai il codice JavaScript solo quando l'intero documento è caricato, è consigliabile inserire il codice JavaScript alla fine del corpo. Inserendo il file .JS alla fine si carica l'intera pagina e poi si recupera il file .JS. In questo modo l'utente sarà in grado di vedere rapidamente la pagina e quando avrà familiarizzato con la pagina il file .JS è già stato scaricato.

27

Come altre persone hanno detto, quando si inserisce javascript in testa, ritarda il rendering della pagina fino a quando gli script non sono stati caricati, il che significa che la pagina potrebbe richiedere più tempo per caricarsi, specialmente se si scaricano file di script di grandi dimensioni.

Se spostate i tag di script alla fine della pagina, vi assicurerete che il browser scarichi immagini e fogli di stile prima che i tag di script e la pagina possano essere visualizzati prima del lancio degli script. Ciò significa anche che se si dipende da alcune funzionalità degli script, questo non sarà disponibile fino a poco dopo che la pagina sarà visibile all'utente.

Se si aggiungono stili o elementi (ecc. Si cambia campo di testo con una 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 poco dopo la visualizzazione degli elementi stessi.

A volte questi problemi richiedono di mettere i copioni nella testa, altre volte starai bene attaccandoli in fondo.

IMHO (completamente contro YSlow e il sacco di persone intelligenti) si dovrebbe mantenere i copioni nel tag principale, e solo fare affidamento su di loro per essere memorizzati nella cache la maggior parte del tempo.

8

In generale è necessario inserire i riferimenti di script nella parte inferiore della pagina. Gli script non devono solo essere scaricati, devono anche essere valutati ed eseguiti prima che il blocco venga rilasciato e la pagina procede con il processo di rendering. Cose come Modernizr dovrebbero essere posizionate nella parte superiore perché eseguono alcune funzioni di rilevamento e shim HTML5 che probabilmente vorrai.

Un'altra ragione per cui si desidera provare a inserire script nella parte inferiore della pagina è Punti singoli di errore o SPOF. Qui è dove una chiamata di script è scaduta o per qualche altra ragione impedisce l'esecuzione della pagina. Questo può accadere molto con le librerie pubblicitarie di terze parti, ecc.

Sì, forse dovresti pensare un po 'di più a come progettare la tua applicazione, ma ho trovato che per me è diventato molto naturale molto rapidamente. Ho creato centinaia di app web negli ultimi 4 anni con la sceneggiatura in basso e posso dire la differenza. Potrei essere 500ms potrebbe essere 5000ms ma tutto conta.

Problemi correlati