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>?
javascript
Amr Elgarhy
fonte
fonte
Respostas:
Das práticas recomendadas do Yahoo para acelerar seu site :
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.
fonte
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.
fonte
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.
fonte
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.
fonte
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ê.
fonte