2009-10-28 4 views
62

Stavo usando il plugin "Yslow" per Mozilla Firefox, e mi ha detto che avrei dovuto inserire JavaScript in basso. L'ho già sentito prima, ma non ci ho mai pensato troppo. C'è davvero un vantaggio nel mettere JavaScript nella parte inferiore di una pagina web rispetto alla parte superiore?JavaScript nella parte inferiore/superiore della pagina Web?

+2

Si potrebbe andare diritto alla fonte su questo ... http: //developer.yahoo.com/performance/rules.html è la spiegazione di Yahoo di questa pratica. –

+0

Che dire se il Javascript è in un file separato? Preferisco in questo modo, semplicemente perché è più facile eseguire il debug/leggere. Questo caricamento è più veloce/lento? –

+1

Queste regole di esecuzione di yahoo sono ancora aggiornate? Devo immaginare che qualcuno abbia pubblicato un set di regole altrettanto completo (o forse Yahoo ha pubblicato un aggiornamento) che tenga conto dei cambiamenti avvenuti negli ultimi quattro anni. – kralco626

risposta

47

Permetterà alla pagina web di caricarsi visibilmente prima di eseguire JavaScript, il che ha senso per cose come Google Analytics, che non devono necessariamente accadere prima che la pagina venga caricata.

Si potrebbe anche voler esaminare cose come jQuery, prototipo, ecc e allegare al gestore "pronto", che esegue il codice JavaScript dopo che il DOM è stato completamente caricato, che è un luogo appropriato per molto codice JavaScript.

+0

Significa che il codice JavaScript che di solito si trova all'interno dei tag può trovarsi ovunque nella pagina dopo il tag ? – user

+1

Sì, il tag

2

Sì, la pagina si caricherà il contenuto e renderlo prima del carico e javascript esecuzione, e la pagina sarà, di conseguenza, caricare più velocemente.

42

Supponendo che non si stia eseguendo su un CDN o che non serva il JS da un sottodominio o server separato, verrà caricato in modo sincrono e forzerà il contenuto HTML ad attendere fino a quando non avrà scaricato i file. Posizionando il JS nella parte inferiore della pagina prima del tag di chiusura </body>, stai consentendo l'analisi dell'HTML prima di caricare il javascript. Questo dà l'effetto di tempi di caricamento della pagina più rapidi.

4

Se si dispone di contenuto HTML statico e un sacco di javascript, può fare la differenza nel percepito tempo di caricamento della pagina in quanto il codice HTML verrà caricato prima dando all'utente qualcosa da guardare. Se non si dispone di molto javascript, o il contenuto della pagina esistente si basa sul javascript per essere utile, questo non è così utile praticamente parlando.

4

Voglio portare l'aggiornamento a questo argomento, asincrona Google ha recentemente introdotto snipped http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1 che può essere aggiunto per il vostro sito di portare ad esempio supporto statistiche google. Dovrebbe essere posizionato nella parte inferiore della sezione <head> per prestazioni ottimali. Il punto è che questo aumenta il rischio che il beacon di tracciamento venga inviato prima che l'utente lasci la pagina.

Inoltre dovrebbe trovarsi lì, se si desidera verificare il tuo sito in strumenti per i webmaster di Google che utilizzano Google Analytics.

Oltre a questo, stesse regole si applica ancora fondamentalmente - javascript in basso per il caricamento "veloce" della pagina. Ho usato le virgolette perché non ho contato la pagina completamente caricata fino a quando javascript non termina ;-)

0

Consente a tutti gli elementi DOM di caricarsi completamente prima di caricare il Javascript che li indirizza. Questo standard è anche parte di Visual Studio.

0

Posizionamento script in fondo l'elemento migliora la velocità di visualizzazione, in quanto la compilazione di script rallenta il display.