Qual é a diferença de carregar javascript em ou arquivo externo .js?
<script> Código aqui </script>
ou
<script src="caminho"> </script>
Há diferença em performance? Carregamento? Quando usar um ou o outro?
Qual é a diferença de carregar javascript em ou arquivo externo .js?
<script> Código aqui </script>
ou
<script src="caminho"> </script>
Há diferença em performance? Carregamento? Quando usar um ou o outro?
Em questão de performance, há, porque o navegador precisa fazer requisições a outro(s) arquivo(s). Quanto a usar um ou outro, é um juízo de valor que você precisa fazer: você vai se importar com a performance (virtualmente, não é muito grande - depende do tamanho do(s) outro(s) arquivos)? Você quer deixar junto ao HTML?
Eu, pessoalmente, prefiro colocar em arquivos externos, a não ser quando é algo de um formulário ou algo do tipo (inerente as particularidades da página, para não ficar criando um arquivo para cada formulário dos meus aplicativos), por exemplo.
Como disse o Guilherme, quando você aponta para um arquivo JavaScript o browser necessariamente faz mais um request no servidor, seja ele no mesmo domínio ou não.
Isto incorre em latência de rede, ou seja, um maior tempo até a página ficar pronta caso o mesmo arquivo estivesse inserido no HTML.
Porém existe um caso de uso para cada abordagem; a otimização web sugere sempre que você diminua ao máximo o número de requests e isso não significa enfiar tudo no meio do HTML mas sim que em uma etapa de build do seu projeto que você concatene todos os arquivos .js em apenas um ou que você os concatene de uma maneira que faça mais sentido para sua aplicação, o importante é reduzir a quantidade de requests e ficar claro que ter 139 requests para carregar arquivos .js não é saudável.
Uma das desvantagens de ter o JS inserido em meio ao HTML é que fica muito dificil de se aplicar etapas de processamento como minificação, compressão, concatenação, etc, antes de disponibilizar seu projeto em produção.
Por outro lado pode sim fazer sentido ter JS em uma tag script, por exemplo; a aplicação que eu trabalho é bem pesada (~2MB de JavaScript), se o usuário entrasse no site e tivesse que esperar os ~2MB baixarem até saber que a página não travou provavelmente o índice de desistencia de visualização da página seria altissimo, então o que fazemos é pré-inserir o código do jQuery em meio ao HTML dessa maneira assim que o usuário abre a pagina o JQuery já esta carregado e pronto para exibir um plugin de barra de progresso que indica o carregamento desses ~2MB.
A extração do código .JS em arquivos separados também facilita a modularização, ou seja, se você precisar do mesmo código em outra página é só uma questão de importa-lo novamente.