Respostas:
Todos os scripts devem ser carregados por último
Em quase todos os casos, é melhor colocar todas as referências de script no final da página, pouco antes </body>.
Se você não conseguir fazer isso devido a problemas de modelo e outros enfeites, decore suas tags de script com o deferatributo para que o navegador saiba fazer o download dos seus scripts após o download do HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>Casos de borda
Existem alguns casos extremos, no entanto, nos quais você pode experimentar oscilações da página ou outros artefatos durante o carregamento da página, que geralmente podem ser resolvidos simplesmente colocando as referências de script do jQuery na <head>tag sem o deferatributo Esses casos incluem a interface do usuário do jQuery e outros complementos, como jCarousel ou Treeview, que modificam o DOM como parte de sua funcionalidade.
Advertências adicionais
Existem algumas bibliotecas que devem ser carregadas antes do DOM ou CSS, como polyfills. Modernizr é uma dessas bibliotecas que deve ser colocada na etiqueta principal .
<head>. Se a sua marcação depende do plug-in jQuery que classifica o conteúdo para você, não faz sentido colocar a referência do plug-in na parte inferior da página, pois você receberá uma marcação interessante em sua página da web até que os plug-ins sejam carregados. As regras devem ser seguidas até que não funcionem mais, quando as regras devem ser quebradas.
Coloque os scripts na parte inferior
O problema causado pelos scripts é que eles bloqueiam downloads paralelos. A especificação HTTP / 1.1 sugere que os navegadores baixem não mais que dois componentes em paralelo por nome de host. Se você exibir suas imagens a partir de vários nomes de host, poderá obter mais de dois downloads em paralelo. Enquanto um script está sendo baixado, no entanto, o navegador não inicia outros downloads, mesmo em nomes de host diferentes. Em algumas situações, não é fácil mover scripts para o final. Se, por exemplo, o script usar document.write para inserir parte do conteúdo da página, ele não poderá ser movido para baixo na página. Também pode haver problemas de escopo. Em muitos casos, existem maneiras de solucionar essas situações.
Uma sugestão alternativa que costuma surgir é usar scripts adiados. O atributo DEFER indica que o script não contém document.write e é uma pista para os navegadores que eles podem continuar renderizando. 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 puder ser adiado, ele também poderá ser movido para a parte inferior da página. Isso fará com que suas páginas da web sejam carregadas mais rapidamente.
EDIT: O Firefox suporta o atributo DEFER desde a versão 3.6.
Fontes:
Carregue apenas o jQuery na cabeça, via CDN, é claro.
Por quê? Em alguns cenários, você pode incluir um modelo parcial (por exemplo, trecho de formulário de login do ajax) com código dependente do jQuery incorporado; se o jQuery for carregado na parte inferior da página, você receberá um erro "$ não está definido", bom.
É claro que existem maneiras de contornar isso (como não incorporar nenhum JS e anexar a um pacote js de carregamento na parte inferior), mas por que perder a liberdade dos js carregados com lentidão, de poder colocar o código dependente do jQuery em qualquer lugar ? O mecanismo Javascript não se importa com a localização do código no DOM, desde que as dependências (como o jQuery sendo carregado) sejam satisfeitas.
Para seus arquivos js comuns / compartilhados, sim, coloque-os antes </body>, mas, com exceção das exceções, nas quais realmente faz sentido a manutenção de aplicativos aplicar um snippet dependente de jQuery ou uma referência de arquivo ali naquele ponto do html, faça-o.
Não há desempenho atingido carregando jquery na cabeça; qual navegador do planeta ainda não possui o arquivo jQuery CDN no cache?
Muito barulho por nada, coloque jQuery na cabeça e deixe sua liberdade de reinar.
2%, digamos, metade sairá antes que a página seja carregada pela primeira vez. Dessa forma, você está perdendo 1%visitantes, mas potencialmente economizando muito tempo e problemas de desenvolvimento. Veja se isso faz sentido com o seu modelo de negócio ...
O Nimbuz fornece uma explicação muito boa do problema envolvido, mas acho que a resposta final depende da sua página: o que é mais importante para o usuário ter mais cedo - scripts ou imagens?
Existem algumas páginas que não fazem sentido sem as imagens, mas possuem apenas scripts menores e não essenciais. Nesse caso, faz sentido colocar os scripts na parte inferior, para que o usuário possa ver as imagens mais cedo e começar a entender a página. Outras páginas contam com scripts para funcionar. Nesse caso, é melhor ter uma página de trabalho sem imagens do que uma página que não seja de trabalho com imagens, por isso faz sentido colocar os scripts no topo.
Outra coisa a considerar é que os scripts geralmente são menores que as imagens. Obviamente, isso é uma generalização e você precisa ver se isso se aplica à sua página. Se isso acontecer, então, para mim, é um argumento para colocá-las em primeiro lugar como regra geral (ou seja, a menos que haja uma boa razão para fazer o contrário), porque elas não atrasam as imagens tanto quanto as imagens atrasariam os scripts. Por fim, é muito mais fácil ter scripts no topo, porque você não precisa se preocupar se eles ainda estão carregados quando precisar usá-los.
Em resumo, costumo colocar os scripts no topo por padrão e apenas considero se vale a pena movê-los para o fundo após a conclusão da página. É uma otimização - e não quero fazê-lo prematuramente.
A maioria dos códigos jquery é executada em um documento pronto, o que não acontece até o final da página. Além disso, a renderização da página pode ser atrasada pela análise / execução de javascript, portanto, é uma boa prática colocar todo o javascript na parte inferior da página.
A prática padrão é colocar todos os seus scripts na parte inferior da página, mas eu uso o ASP.NET MVC com vários plug-ins jQuery e acho que tudo funciona melhor se eu colocar meus scripts jQuery na <head>seção do mestre página.
No meu caso, existem artefatos que ocorrem quando a página é carregada, se os scripts estiverem na parte inferior da página. Estou usando o plugin jQuery TreeView e, se os scripts não forem carregados no início, a árvore será renderizada sem as classes CSS necessárias impostas pelo plug-in. Assim, você fica com essa bagunça engraçada quando a página é carregada pela primeira vez, seguida pela renderização adequada do TreeView. Muito feio. Colocar os plug-ins do jQuery na <head>seção da página principal elimina esse problema.
@Html.Action, que grava dinamicamente um resultado na saída, pois meu parcial dá $ is undefinedsignificado, em vez disso, tenho que usar .load ('@ Url.Action') para carregar o parcial. Mas isso dá um problema devido ao pedido extra. Com base nas suas informações, moverei o jquery acima do RenderBody () na minha página mestre
Embora quase todos os sites ainda coloquem o Jquery e outro javascript no cabeçalho: D, verifique o stackoverflow.com.
Eu também sugiro que você coloque antes da etiqueta final do corpo. Você pode verificar o tempo de carregamento após a colocação em qualquer um dos lugares. A tag Script irá pausar sua página da Web para carregar ainda mais.
e depois de colocar o javascript no rodapé, você poderá obter uma aparência incomum da sua página da web até carregar o javascript, então coloque o css na seção do cabeçalho.
Pouco antes </body>é o melhor lugar de acordo com Yahoo Developer Network 's Melhores Práticas para acelerar o seu Web site neste link , faz sentido.
A melhor coisa a fazer é testar sozinho.
Para mim, o jQuery é um pouco especial. Talvez uma exceção à norma. Existem muitos outros scripts que dependem dele, por isso é muito importante que seja carregado cedo, para que os outros scripts que virão depois funcionem conforme o esperado. Como alguém apontou, mesmo esta página carrega o jQuery na seção principal.