É errado colocar a tag <script> após a tag </body>?

219

Quão errado é colocar a tag de script após a tag de fechamento do corpo (</body> ). ?

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

javascript html

— DanC
fonte

1

Existe suporte para ele em navegadores modernos.

— Xdrone

Possível duplicata de Onde devo colocar as tags <script> na marcação HTML?

— Mapn

191

Não será validado fora das tags <body>ou <head>. Também não fará muita diferença - a menos que você esteja fazendo manipulações DOM que possam interromper o IE antes que o elemento body seja totalmente carregado - para colocá-lo imediatamente antes do fechamento </body>.

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

— Andy E
fonte

13

@epalla: se você colocar o script no final da tag body, não haverá outro conteúdo para carregar no momento em que chegar, então deve haver pouca diferença entre colocá-lo fora ou dentro. Você ainda tem o benefício adicional de sua página validar, que foi o ponto que eu estava tentando destacar na minha resposta.

— Andy E

1

Sim, eu estava de acordo com você, já que sua resposta é boa. Eu só queria acrescentar que há uma razão para colocar o JS na parte inferior da página, em vez de na cabeça, como fizemos por um longo tempo.

— Matt Brunmeier

3

@PHPst: bem, código inválido pode estar sujeito a efeitos colaterais em alguns navegadores. De qualquer maneira, não vejo como seu recuo sendo uma largura de tabulação menor que o código acima faz com que pareça mais limpo.

— Andy E

1

@PHPst: Eu esperaria que os navegadores lidassem com isso, se você realmente quiser escrever seu código dessa maneira. Eu ainda recomendo escrever seu código para validar, no entanto.

— Andy E

1

@ technosaurus: sempre existe <script src="..." defer>, o que funciona em todos os principais navegadores (embora com um bug potencialmente violador no IE9 e inferior).

— Andy E

88

Sim. Somente comentários e a tag final do elemento html são permitidos após a tag final do corpo.

Os navegadores podem executar a recuperação de erros, mas você nunca deve depender disso.

— Quentin
fonte

12

Esta é uma resposta melhor. Existem muitos navegadores novos por aí, com os dispositivos móveis entrando em jogo para arriscar fazer algo errado quando tudo o que você precisa é cortar e colar uma única tag de fechamento.

— Erik Reppen 29/03/2012

33

Como Andy disse que o documento não será válido, mas, mesmo assim, o script ainda será interpretado. Veja o trecho do WebKit, por exemplo:

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

"Suporte para html realmente quebrado." Acho que já diz tudo.

— Diogo Kollross

8

O IE não permite mais isso (desde a versão 10, acredito) e ignorará esses scripts. O FF e o Chrome ainda os toleram, mas há chances de que algum dia eles descartem isso como fora do padrão.

— Bronx
fonte

1

No entanto, o Google faz isso no exemplo de como fazer login no G +, com "última atualização em 10 de abril de 2014". Comprei a versão para Java no servidor ( developers.google.com/+/quickstart/java ), mas presumivelmente é o mesmo HTML + js para todos.

— Tom

2

Inserir processualmente "script de elemento" após "corpo do elemento" é "erro de análise" pelo processo recomendado pelo W3C . Em "Construção em árvore", crie um erro e execute "tokenize again" para processar esse conteúdo. Portanto, é como uma etapa adicional. Somente então pode ser executada a "Execução de Script" - consulte o processo do esquema .

Qualquer outra coisa "erro de análise". Mude o "modo de inserção" para "no corpo" e reprocesse o token.

Tecnicamente, por navegador, é um processo interno, como eles marcam e otimizam.

Espero ter ajudado alguém.

— BG Bruno
fonte

0

Sim. Mas se você adicionar o código fora dele, provavelmente não será o fim do mundo, já que a maioria dos navegadores o corrigirá, mas ainda é uma má prática entrar.

— Taylor Satula
fonte

0

O Google realmente recomenda isso em relação à 'Otimização de CSS'. Eles recomendam alinhar estilos críticos acima da dobra e adiar o restante (arquivo css).

Exemplo:

<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>

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

— Donald Porter
fonte

8

Você não deve colocar coisas fora do bodyelemento. Esse artigo do Google não aconselha ninguém a fazer isso.

— ChaseMoskal

2

Receio que a página do Google diga exatamente isso.

— 10us 28/09/2015

6

Parece que ao mesmo tempo, que a página se recomendar tal coisa, mas não mais. (Agora há um carregamento dinâmico com javascript.) A versão em alemão não está atualizada e ainda contém o exemplo de código antigo.

— bodo

1

"elemento não script" tem que ser pelo RFC dentro "elemento html" e "elemento corpo" também

— BG de Bruno

0

Navegadores modernos terão tags de script no corpo da seguinte forma:

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

Basicamente, isso significa que o script será carregado assim que a página terminar, o que pode ser útil em certos casos (ou seja, manipulação do DOM). No entanto, eu recomendo que você pegue o mesmo script e coloque-o na tag head com "adiar", pois isso dará o mesmo efeito.

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

— Caridade do anúncio
fonte

O que seria útil é se as scripttags tivessem um eventatributo que pudesse ser definido para determinar quando analisar o script. Então, você precisa event="load" event="DOMContentLoaded"executar o script após a criação do DOM ou event="beforeunload"no beforeunloadevento da janela . Exemplo <script src="scripts/main.js" event="DOMContentLoaded"></script>,.

— 1,21 gigawatts