O que é prós e contras: colocar javascript na cabeça e colocar logo antes do corpo fechar

Question 1

A maioria dos livros / artigos de javascript e desenvolvimento web diz que você deve colocar CSS na tag head e javascript na parte inferior da página.

Mas quando eu abro a fonte html de sites famosos como este stackoverflow, descubro que eles colocam alguns arquivos js na tag head.

Quais são os prós e os contras de ambas as abordagens e quando usá-las?

Encontrei outra pergunta para o mesmo problema: Onde devo declarar os arquivos JavaScript usados em minha página? Em <head> </head> ou perto </body>?

Question 2

Das práticas recomendadas do Yahoo para acelerar seu site :

O problema causado pelos scripts é que eles bloqueiam downloads paralelos. A especificação HTTP / 1.1 sugere que os navegadores não baixem mais de dois componentes em paralelo por nome de host. Se você veicular suas imagens a partir de vários nomes de host, pode fazer com que mais de dois downloads ocorram em paralelo. Enquanto um script está sendo baixado, no entanto, o navegador não iniciará nenhum outro download, mesmo em nomes de host diferentes.

Em algumas situações, não é fácil mover os scripts para o final. Se, por exemplo, o script usa document.write para inserir parte do conteúdo da página, ele não pode ser movido para baixo na página. Também pode haver problemas de escopo. Em muitos casos, existem maneiras de contornar essas situações.

Uma sugestão alternativa que freqüentemente surge é usar scripts adiados. O atributo DEFER indica que o script não contém document.write e é uma pista para os navegadores de que eles podem continuar a renderização. Infelizmente, o Firefox não suporta o atributo DEFER. No Internet Explorer, o script pode ser adiado, mas não tanto quanto desejado. Se um script pode ser adiado, ele também pode ser movido para o final da página. Isso fará com que suas páginas da web carreguem mais rápido.

Portanto, em geral, é preferível colocá-los na parte inferior. No entanto, nem sempre é possível, e que muitas vezes não faz que muita diferença de qualquer maneira.

Question 3

Como outras pessoas disseram, quando você coloca javascript no cabeçalho, isso atrasa a renderização da página até que os scripts sejam carregados, o que significa que a página pode demorar mais para carregar - especialmente se você estiver baixando arquivos de script grandes.

Se você mover suas tags de script para o final da página, garantirá que o navegador faça download de imagens e folhas de estilo antes das tags de script e a página provavelmente aparecerá para ser renderizada antes que os scripts comecem a ser executados. Isso também significa que, se você estiver dependendo de alguma funcionalidade de seus scripts, ela não estará disponível até um pouco depois que a página estiver visível para o usuário.

Se você estiver adicionando estilos ou elementos (etc. alternando campos de texto com alguma forma de editor mais rico), isso ficará visível para o usuário como piscando.

Se você estiver adicionando eventos de clique a elementos, eles não serão clicáveis até um pouco depois de os próprios elementos estarem visíveis.

Às vezes, esses problemas requerem que você coloque seus scripts na cabeça, outras vezes você ficará bem colando-os na parte inferior.

IMHO (completamente contra YSlow e muitas pessoas espertas) você deve manter seus scripts na tag head e apenas confiar neles para serem armazenados em cache na maior parte do tempo.

Question 4

Em geral, você deve colocar referências de script na parte inferior de sua página. Os scripts não precisam apenas ser baixados, mas também avaliados e executados antes que o bloco seja liberado e a página continue com o processo de renderização. Coisas como Modernizr devem ser colocadas no topo porque ele faz algumas detecções de recursos, bem como shims HTML5 que você provavelmente vai querer.

Outro motivo pelo qual você deseja tentar colocar scripts na parte inferior da página são pontos únicos de falha ou SPOFs. É aqui que uma chamada de script atinge o tempo limite ou, por algum outro motivo, bloqueia a execução da página. Isso pode acontecer muito com bibliotecas de publicidade de terceiros, etc.

Sim, você pode ter que pensar um pouco mais sobre como arquitetar seu aplicativo, mas descobri que isso se tornou muito natural para mim muito rapidamente. Criei centenas de aplicativos da web nos últimos 4 anos com o script na parte inferior e posso dizer a diferença. Eu posso ser 500ms, pode ser 5000ms, mas tudo importa.

Question 5

Realmente depende do seu site. Se você estiver acessando e invocando as funções JavaScript dentro do corpo, ele deve ser referenciado no cabeçalho para que seja carregado. Caso contrário, se você for chamar o JavaScript apenas quando todo o documento estiver carregado, é aconselhável colocar o JavaScript no final do corpo. Ao colocar o arquivo .JS no final, você carrega a página inteira e, em seguida, busca o arquivo .JS. Desta forma, o usuário poderá ver rapidamente a página e, quando se familiarizar com a página, o arquivo .JS já foi baixado.

Question 6

Qualquer javascript no cabeçalho será avaliado antes que a página seja carregada, o que significa que a página parece demorar mais para carregar. É um pouco mais difícil fazer com que os eventos funcionem corretamente se todo o javascript estiver no final, mas o jQuery praticamente resolve esse problema para você.