Jquery no head ou no fim do body?

Olá Jhone. Você deve sempre colocar o import de bibliotecas e arquivos js no final do body pois eles são geralmente arquivos um pouco pesados. Assim o navegador não precisa esperar o carregamento deles lá em cima da página para começar a renderizar a página.

Abraços!

Jhone,

Colocando eles no head, se o jQuery ou qualquer outro arquivo JS tiver algum bug, vai travar o render da página (do body).

Melhor travar e deixar uma tela branca pro usuário ou mostrar o conteúdo do site primeiro, e depois carregar os JS?

Espero ter ajudado,

Abcs!

Complementando a informação dos moderadores, pro jQuery tanto faz um como o outro se você usá-lo corretamente, colocando seu código no evento onLoad. Então pode colocar no final, pelos motivos apresentados, sem se preocupar se o jQuery vai entender ou não.

O evento onLoad também é apresentado como $().

Olá Jhone Dias! Sua pergunta é interessante, vou tentar elucidar a questão ainda mais.

Quando você carrega um script no head da página e ele demorar a ser executado, ele bloqueia a renderização da sua página, ou seja, o usuário verá uma página em branco até que o script termine e libere o navegador para continuar a construir o DOM. Além disso, se você tentar acessar algum elemento do DOM ainda no head da página, ele não existirá e um erro acontecerá. Por isso a recomendação de se colocar o script antes de fechar a tag body.

CONTUDO, quem usa jQuery pode usar um recurso da biblioteca (que podemos fazer com JS puro se assim quisermos) que permite carregar o script no head, mas sua execução é feita apenas quando o DOM é montado (exceto o carregamento de imagens, que o jQuery não espera). Essa sintaxe pode ser:

$(function() {
   // seu código aqui
});

Ou

$(document).ready(function() {
    // seu código aqui
});

CONTUDO, mesmo com esse recurso ainda não é uma boa prática carregar esse script no head. Sabe por qual motivo? Você terá que carregar o jQuery antes dos scripts e o jQuery dependendo do smartphone que você esta pode demorar até um segundo para realizar o parser (o browser baixar..analisar o conteúdo e concluir o download).

Com isso, se você carregar o script antes de fechar a tag body, você nem precisa usar o subterfúgio do jQuery que lhe apresentei. Como o script esta como última tag, os elementos do DOM anterior já terão sido carregados.

A dica é: você só carrega script no head se você tiver um motivo certo e coerente para isso. Por exemplo, se você usa o script HTML5Shiv para permitir estilizações de tags do HTML5 no IE 8 esse script deve ser carregado no head da página para que seu hack funcione.

Por fim, sugiro você dar uma olhada no site browserdiet. Ele foi criado com a participação dos mestres das galáxias em JavaScript e a dica para carregar o script antes do body é indicada.

https://browserdiet.com/pt/

Espeto ter ajudado a engrandecer a discussão.

Só de curiosidade o mesmo código em JavaScript que o jQuery, provavelmente, usa por debaixo dos panos:

document.addEventListenner('DOMContentLoaded', function() {
      // pode carregar seu script no head (eu não faria isso) e o código do script só é executado quando DOM é carregado.
});

Segue ainda um link para você ver o tempo com o parser despendido com o jQuery:

http://modernweb.com/2014/03/10/is-jquery-too-big-for-mobile/