È sbagliato posizionare il tag <script> dopo il tag </body>?

219

Quanto è sbagliato posizionare il tag script dopo il tag di chiusura del corpo ( </body>). ?

<html>
  ....
  <body>
     ....
  </body>
  <script type="text/javascript" src="theJs.js"></script>
</html>

javascript html

— danc
fonte

1

C'è supporto per esso nei browser moderni.

— Xdrone,

Possibile duplicato di Dove devo inserire i tag <script> nel markup HTML?

— mapto

191

Non verrà convalidato al di fuori dei tag <body>o <head>. Inoltre, non farà molta differenza - a meno che tu non stia facendo manipolazioni DOM che potrebbero interrompere IE prima che l'elemento body sia completamente caricato - per metterlo appena prima della chiusura </body>.

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="theJs.js"></script>
  </body>
</html>

— Andy E
fonte

13

@epalla: se metti lo script alla fine del tag body non ci sono altri contenuti da caricare quando arriva lì, quindi ci dovrebbe essere poca differenza tra posizionarlo all'esterno o appena all'interno. Avrai quindi l'ulteriore vantaggio della tua pagina ancora in fase di validazione, che era il punto che stavo cercando di evidenziare nella mia risposta.

— Andy E,

1

Sì, ero d'accordo con te poiché la tua risposta è buona. Volevo solo aggiungere che c'è un motivo per mettere JS in fondo alla pagina invece che nella testa come abbiamo fatto per molto tempo.

— Matt Brunmeier,

3

@PHPst: beh, il codice non valido può essere soggetto ad effetti collaterali in alcuni browser. Ad ogni modo, non vedo come il suo rientro sia una larghezza di tabulazione inferiore rispetto al codice sopra che lo faccia sembrare più pulito.

— Andy E

1

@PHPst: mi aspetterei che i browser lo affrontino se vuoi davvero scrivere il tuo codice in quel modo. Consiglio comunque di scrivere il tuo codice per convalidare, comunque.

— Andy E

1

@technosaurus: c'è sempre <script src="..." defer>, che funziona in tutti i principali browser (anche se con un bug potenzialmente dannoso in IE9 e inferiori).

— Andy E

88

Sì. Solo i commenti e il tag di fine per l'elemento html sono consentiti dopo il tag di fine per il corpo.

I browser possono eseguire il ripristino degli errori, ma non dovresti mai dipendere da questo.

— Quentin
fonte

12

Questa è una risposta migliore Ci sono troppi nuovi browser là fuori con dispositivi mobili che entrano in gioco per rischiare di sbagliare quando tutto ciò che devi fare è tagliare e incollare un singolo tag di chiusura.

— Erik Reppen,

33

Come ha detto Andy, il documento non sarà valido, ma la sceneggiatura verrà comunque interpretata. Vedi lo snippet di WebKit per esempio:

void HTMLParser::processCloseTag(Token* t)
{
    // Support for really broken html.
    // we never close the body tag, since some stupid web pages close it before 
    // the actual end of the doc.
    // let's rely on the end() call to close things.
    if (t->tagName == htmlTag || t->tagName == bodyTag 
                              || t->tagName == commentAtom)
        return;
    ...

— Vitalii Fedorenko
fonte

11

"Supporto per HTML veramente rotto." - Penso che dica tutto.

— Diogo Kollross,

8

Internet Explorer non lo consente più (dalla versione 10, credo) e ignorerà tali script. FF e Chrome li tollerano ancora, ma ci sono possibilità che un giorno lascino cadere questo come non standard.

— Bronx
fonte

1

Eppure Google lo fa nel loro esempio di come eseguire l'accesso G +, con "ultimo aggiornamento 10 aprile 2014". L'ho preso dalla versione per Java sul server ( developers.google.com/+/quickstart/java ) ma presumibilmente è lo stesso HTML + js per tutti.

— Tom,

2

Inserire "script elemento" in modo procedurale dopo che "corpo dell'elemento" è "errore di analisi" mediante il processo consigliato da W3C . In "Struttura ad albero" crea un errore ed esegui "tokenize again" per elaborare quel contenuto. Quindi è come un ulteriore passaggio. Solo allora può essere eseguito "Script Execution" - vedere il processo di schema .

Qualsiasi altro "errore di analisi". Passare la "modalità di inserimento" su "nel corpo" e rielaborare il token.

Tecnicamente dal browser è un processo interno, come lo segnano e lo ottimizzano.

Spero di aver aiutato qualcuno.

— BG Bruno
fonte

0

Sì. Ma se aggiungi il codice al di fuori di esso molto probabilmente non sarà la fine del mondo poiché la maggior parte dei browser lo risolverà, ma è comunque una cattiva pratica entrare.

— Taylor Satula
fonte

0

Google in realtà lo consiglia in merito a "Ottimizzazione CSS". Raccomandano di allineare gli stili above-fold critici e di rinviare il resto (file css).

Esempio:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

Vedi: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— Donald Porter
fonte

8

Non dovresti mettere cose al di fuori bodydell'elemento. Quell'articolo di Google non consiglia a nessuno di fare una cosa del genere.

— ChaseMoskal,

2

Temo che la pagina di Google dice in realtà proprio questo.

— 10

6

Sembra che in una sola volta, la pagina ha raccomandare una cosa del genere, ma non più. (Ora c'è un certo caricamento dinamico con javascript.) La versione tedesca non è aggiornata e contiene ancora il vecchio esempio di codice.

— bodo,

1

"element noscript" deve essere di RFC anche all'interno di "element html" e "element body"

— BG Bruno

0

I browser moderni prenderanno i tag di script nel corpo in questo modo:

<body>
    <script src="scripts/main.js"></script>
</body>

Fondamentalmente, significa che lo script verrà caricato una volta terminata la pagina, il che può essere utile in alcuni casi (vale a dire manipolazione DOM). Tuttavia, ti consiglio vivamente di prendere lo stesso script e inserirlo nel tag head con "differisci", in quanto darà lo stesso effetto.

<head>
    <script src="scripts/main.js" defer></script>
</head>

— Carità dell'annuncio
fonte

Ciò che sarebbe utile sarebbe se i scripttag avessero un eventattributo che potrebbe essere definito per determinare quando analizzare lo script. Quindi devi event="load" event="DOMContentLoaded"eseguire lo script dopo aver creato il DOM o nell'evento event="beforeunload"finestra beforeunload. Esempio, <script src="scripts/main.js" event="DOMContentLoaded"></script>.

— 1,21 gigawatt