Onde o código JavaScript deve ser colocado em um documento HTML: no elemento <head>
ou <body>
? No início ou no final de cada um? Existe alguma diferença de performance ou qualquer outra relacionada a isso?
4 Respostas
Depende do que o script faz, e do quanto ele faz falta. Todo JavaScript inserido numa página (seja onde for) executa de modo síncrono por padrão*. Isso significa que quando a tag <script>
é encontrada o browser não renderiza mais nada enquanto esse script não for carregado e executado.
Colocar um <script>
no head
garante que ele seja executado antes de qualquer elemento ser colocado no body
. Isso significa que ele garantidamente estará presente quando a página for "montada", ou seja, qualquer código que precise estar presente na hora de processar o body
com certeza já estará pronto para agir. A desvantagem é que o usuário só vai ver uma página em branco até que o script termine de executar.
Colocar um <script>
no final do body
, por outro lado, permite que o conteúdo antes dele já apareça para o usuário sem ter de esperar sua execução. Isso passa a impressão de um site mais rápido, o usuário não precisa esperar cada mínimo detalhe estar pronto antes de ler o conteúdo da página. A desvantagem é que - se o seu script modifica significativamente o conteúdo e/ou sua apresentação e funcionalidade - o usuário verá uma página "estranha" e "mal formatada" antes que o script a "corrija". Da mesma forma, se um script muda o comportamento de um link ou botão, por exemplo, clicar nos mesmos antes do script executar causará um comportamento incorreto.
Cabe então a você determinar, caso a caso, onde é o melhor lugar para se colocar o script. Se fizer pouca diferença, a recomendação mais comum é o final do body
, pela questão da performance principalmente. Se somente estiver interessado em browsers modernos, entretanto, colocá-lo no head
com o atributo defer
pode ser ainda melhor.
* Nota: também é possível tornar o script assíncrono, caso isso seja possível (i.e. não existam dependências complexas entre os diferentes scripts e/ou entre o script e os elementos da página), através dos atributos async
e defer
do HTML5. Mais detalhes nessa resposta. Ambos fazem a carga paralelamente à renderização, a diferença é que o async
para a renderização (em um ponto arbitrário) no momento em que a carga for concluída para executá-lo, enquanto o defer
somente o executa ao final da renderização, mesmo que a carga seja concluída antes. Tal como no caso síncrono, o uso mais indicado depende do seu propósito.
-
1Gostei da sua resposta, você explicou bem e rápido como e quando os scripts são executados em cada um dos elementos.– ZigndCommented 26/12/2013 às 18:49
-
5Boa resposta! Pode valer a pena acrescentar que o Google não gosta de sites lentos. I.e. quanto menos script no head melhor.– SergioCommented 29/12/2013 às 20:51
Sim, faz toda a diferença!
Regra básica
A regra básica é: scripts mais importantes devem vir primeiro no documento para executarem antes, e scripts menos prioritários podem vir depois para fazer com que o conteúdo mais importante carregue primeiro.
Recomendação do Yahoo!
Colocar os scripts ao final do arquivo se popularizou com o famoso documento do Yahoo! de melhores práticas para se otimizar um Web Site.
Em específico, essa seção. O problema é que a maior parte dos desenvolvedores não entenderam que isso é recomendável em alguns casos, muita gente começou a colocar os scripts para carregarem mais tarde indiscriminadamente.
Exemplo de quando *não* se deve colocar o script ao final
Script de uma requisição ajax importante.
Script de remoção do placeholder. *
Exemplos de quando colocar o script ao final
Script de ferramentas analytics (exemplo mais comum aliás).
Um script que aplica um estilo para legendas title (deixando mais bonito que o nativo do browser).
* Muitos sites possuem um texto explicativo na barra de busca (chamado de placeholder). Antigamente (pois agora isso é nativo do HTML5) esse texto era removido quando o usuário clicasse no campo. Isso era feito por um script. Já aconteceu comigo, mais de uma vez, de praticamente todo o site carregado e, ao clicar no campo, o texto não sumir e eu ter que manualmente apagar o texto (algo bem chato). Isso acontece em sites que deixam esse script ao final do documento, provalvemente o carregamento de algum elemento pesado (como um banner) estava na frente desse script. Se esse script estivesse mais acima no documento ele carregaria mais cedo, e provavelmente funcionaria quando eu clicasse.
-
1+1 Pelo link sobre boas praticas, mas achei que o @mgibsonbr explicou melhor o processo de execução dos scripts– ZigndCommented 26/12/2013 às 18:51
Todas as respostas antigas desta pergunta estão certas, porém existe solução melhor que não foi mostrada em nenhuma delas onde você não precisa se preocupar com isto.
É claro que esta solução não é compatível com navegadores muito antigos e ela funciona apenas quando se carrega arquivos externos. Quando o script é inline, não muda nada. Porém ninguém deve colocar scripts grandes dentro do documento. Os pequenos não devem fazer diferença perceptível no tempo de renderização não importa onde seja colocado.
É claro que onde colocar é uma decisão do desenvolvedor e varia de acordo com a necessidade específica da página.
Colocando no fim do body
os elementos principais da página e que devem ser os mais relevantes já podem ser renderizados antes do termino de verificação e interpretação das partes em JS que costumam ser importante só após o fim da carga da página.
Se o código JS for colocado no começo ou no meio, a renderização da página fica obstruída até que todo o script seja analisado.
Obviamente isto não funciona tão bem assim em todos os casos. Pode ser que a renderização correta e completa só seja possível quando o script começa ser executado, ou seja, parte da renderização é definida no script.
Existem várias técnicas para controlar melhor essa carga e em poucos casos esta recomendação deve ser seguida.
Então nada impede e, em geral, colocar na tag <head>
é vantajoso, desde que carregue assincronamente ou com retardamento.
Obviamente há situações em que o script precisa ser carregado antes porque ele controlará e manipulará a carga e renderização da página, possivelmente indicando progresso.
Técnica moderna:
<script src="script.js" defer>
ou
<script src="script.js" async>
Coloquei no GitHub para referência futura.
Documentação sobre a marcação do script
.
Veja como funciona.
JavaScript é executado pelo navegador assim que a página é carregada, então é uma boa idéia colocar os scripts (que podem ser vários, não existe limite de script por página) em um local adequado (sim, existe mais de um).
Este local pode ser entre as tags e , e ou ainda você tem a opção de escrever um arquivo somente com o script, salvá-lo com a extensão .js e então inserir o endereço deste arquivo na sua página para utilizar os scripts deste arquivo externo.
JavaScript em <body>
Blocos de script no meio da página são bastante simples de se entender, bastando para isto o exemplo abaixo:
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
Como você pode ver, o exemplo simplesmente coloca o conteúdo do parágrafo que tem id=”demo”. Inicialmente vazio.
JavaScript em <head>
Se você optou por colocar seu script entre as tags <head>
e </head>
significa que talvez você não deseja que seu script seja imediatamente executado pelo navegador, então este script deve ser uma função, que vai estar esperando para ser executada (um dos estilos mais comuns de script…).
Para mostrar melhor, exemplo:
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Neste exemplo tem um botão, que tem como ação chamar a função displayDate()
quando pressionado.
Scripts Externos
Para finalizar, se você quer escrever várias funções que vai usar sempre, de repente é uma boa idéia juntar todas elas em um arquivo externo e somente colocar o endereço deste arquivo como referência na página, como é comum se fazer com css.
A única regra para isto é que seu arquivo deve ter a extensão .js e não pode conter as tags <script></script>
Exemplo:
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>
Não precisa ser uma ou outra, podemos usar scripts em body, head e ainda ter um arquivo de scripts anexado, funcionando tudo junto!