2011-11-23 20 views
35

Se è perfettamente accettabile inserire JavaScript subito prima dello </body> quale è una buona ragione per mantenerlo nello <head>?Perché inserire JavaScript in testa

In base alla domanda JavaScript in <head> or just before </body>? molte risposte indicano che la pagina verrà caricata più rapidamente se la si inserisce prima del tag </body>.

Tuttavia non vedo alcun argomento valido sul motivo per cui dovrebbe essere conservato nello <head>. Mi sto chiedendo perché non sono uno sviluppatore JavaScript molto forte e da tutto ciò che ho letto e visto, lo standard è di mantenere la maggior parte dei codici JavaScript e riferimenti esterni nel <head>.

risposta

29

Qualsiasi cosa nella testa deve essere completata prima che il corpo sia caricato, quindi è generalmente una cattiva idea mettere javascript lì. Se hai bisogno di qualcosa mentre il corpo sta caricando, o vuoi accelerare qualche ajax, allora sarebbe appropriato metterlo in testa.

6

Il motivo è che lo Head viene caricato prima del corpo. Qualsiasi codice javascript dinamico che viene eseguito nel corpo in fase di caricamento verrà eseguito correttamente.

Se si dispone di javascript che precede il tag </body>, tutte le chiamate effettuate da javascript alle funzioni della pagina durante il caricamento causeranno errori.

Quindi sì mettendo javascript prima che il tag </body> si carichi più velocemente. Ma solo se il tuo javascript verrà eseguito dopo il caricamento della pagina tramite clic, ad esempio.

+0

È tutto fuorché "best practice" per inserire JS nel tag ''. C'è una manciata di scenari di utilizzo dove potrebbe essere appropriato, ma in generale la "best practice" è prima di ''. –

+1

@Chris ha modificato quella parte della mia risposta. Tutto quello che intendevo era che ci sono diversi scenari di utilizzo di quando mettere in '' e quando mettere in '' E quello che intendevo dire alla fine non era quello di non metterlo in testa piuttosto che "le migliori pratiche" "che è stata una scivolata da parte mia. – Chris

2

Se è necessario che il javascript esegua qualcosa nella pagina e non si desidera che l'utente visualizzi il contenuto fino a quando non viene completato, è necessario includerlo nella testa. Dipende davvero da ogni singolo caso.

maggior parte del tempo, mettendo in fondo davvero è meglio per ottimizzare la pagina di download, come l'utente si arriva a vedere tutto il contenuto della pagina prima che la JS ancora inizia a scaricare.

-4

Questa è una domanda come "windows" o "mac", penso, Se si inserisce tutta la sorgente JS nella sezione principale del sito Web, si esce dal W3C. L'altro caso è che qualsiasi cosa nella testa deve essere caricata prima dell'elemento del corpo. E prima che il DOM sia stato caricato correttamente. I framework JavaScript come jQuery hanno funzioni come $ (document) .ready() per controllare che il DOM completo sia caricato. Così puoi fare tutto il tuo JS nel tag principale. la mia preferenza è di caricare tutti i JS alla fine del corpo, ma questa decisione va a ogni sviluppatore a proprie :)

+2

Questo ... non ha alcun senso. In particolare le battute "i tuoi sono fermi al W3C". Le specifiche non dicono che è necessario inserire tutti gli script nel '', e questa domanda non è una questione di opinione - ci sono ottime ragioni tecniche per farlo o non farlo, non solo per questioni di gusto personale e preferenza –

1

L'unica motivo per mettere JS nella testa è per gli script che modificano come il browser in realtà rende la pagina. Ad esempio, Modernizr.js è caricato in testa in modo che possa fare cose come aggiungere il supporto per gli elementi HTML5 e manipolare le classi sul tag <html> prima che la pagina inizi a eseguire il rendering.

Altrimenti, il tuo JS dovrebbe entrare nella parte inferiore della pagina.

-1

Tradizionalmente pagine non utilizzati per convalidare (sia esso XHTML Strict validazione, o la conformità WAI-AAA, non ricordo esattamente quello che non è riuscito, ma qualcosa non è riuscito quando gli script erano nel corpo). Questo di solito va di pari passo con la raccomandazione di mettere tutti gli script in file esterni e di collegarli ad essi con un tag script src = "".

Logic: Forse è stato raccomandato dal W3C come un modo di preservare il corpo per il markup più semantica. Penso anche, storicamente, che questa logica fosse importante nei giorni in cui Internet era generalmente molto più lento - alcuni browser erano configurati per rifiutare script e stili e immagini basati sulle impostazioni di diagnostica della connettività internet & e avere uno script in testa è un modo di dire ai browser "è OK rifiutare questo script se i problemi di connettività lo giustificano", dove gli script nel corpo sono considerati semanticamente più parte integrante del contenuto. Questa è una tale sfumatura, tuttavia, e basata su raccomandazioni W3C probabilmente datate, quindi sarei costretto a trovare un browser che funzioni attualmente in questo modo in questi giorni.

Al giorno d'oggi è solo per influire sul comportamento della pagina durante il rendering.

Attenzione: Questo non dovrebbe applicarsi agli script che non influenzano contenuti above the fold - meglio rinviare il loro carico mettendoli subito prima del tag body di chiusura in modo che gli utenti possono vedere il sopra -il contenuto rapido più veloce (senza dover attendere il caricamento degli script di blocco del rendering). Questa è una raccomandazione chiave di velocità della pagina di Google e Yahoo

0

Il tag head viene caricato prima del Body, quindi è necessario inserire Javascript necessario per caricare correttamente il sito Web, ma se non è necessario la maggior parte delle persone ritiene che sia meglio mettilo alla fine del tag del tuo corpo.

1

In passato, l'unica ragione per mettere JS in testa era per gli script che modificano il modo in cui il browser esegue effettivamente il rendering della pagina (come indicato da Chris Pratt). Oggi, che non è più il caso, però:

  • Se ti importa ancora molto su supporto e le prestazioni in IE < 10, rimane l'approccio migliore per rendere il vostro script tag gli ultimi tag del vostro corpo HTML. In questo modo, sei sicuro che il resto del DOM è stato caricato e non bloccherai né eseguirai il rendering.

  • Se non vi interessa più troppo di IE < 10, si potrebbe desiderare di mettere i vostri script nella testa del documento e utilizzare defer per assicurare che corrono solo dopo DOM è stato caricato (<script type="text/javascript" src="path/to/script1.js" defer></script>). La bellezza di questo approccio è che defer non blocca il caricamento del resto del DOM. Se vuoi comunque che il tuo codice funzioni in IE < 10, non dimenticare di avvolgere il tuo codice in un window.onload anche se!