Onde colocar o JavaScript em um arquivo HTML?

210

Digamos que eu tenha um arquivo JavaScript bastante robusto, compactado em aproximadamente 100kb ou mais. Por arquivo, quero dizer que é um arquivo externo que seria vinculado via <script src="...">, não colado no próprio HTML.

Qual é o melhor lugar para colocar isso no HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Haverá alguma diferença funcional entre cada uma das opções?

javascript html optimization nickf
fonte
Possível duplicata de Onde devo colocar as tags <script> na marcação HTML?
Ivar

Respostas:

175

O Yahoo! A equipe de desempenho excepcional recomenda colocar scripts na parte inferior da página devido à maneira como os navegadores fazem o download dos componentes.

É claro que o comentário de Levi "pouco antes de você precisar e logo" é realmente a resposta correta, ou seja, "depende".

Walter Rumsby
fonte
4
Por exemplo, se você estiver fazendo um monte de coisas sobre o jQuery, precisará da biblioteca carregada antes de realmente tentar usá-la.
9119 BryanH
58
Além disso, a razão pela qual o Yahoo EPT recomenda colocar o JS na parte inferior é porque o navegador deve entrar no modo de thread único enquanto o JS é carregado e, em seguida, executado. Se o script estiver na cabeça ou no meio do conteúdo, o navegador "pausará" enquanto lida com o JS. Ao colocar o JS na parte inferior, o conteúdo será carregado e geralmente visível para que o usuário possa começar a lê-lo enquanto o navegador ainda estiver lidando com o JS.
9119 BryanH
1
Oi. $(function () {...})Também colocamos códigos como este na parte inferior da página ou precisam estar dentro <head>?
Thang Pham
7
Espero que a referência ao "fundo da sua página" aqui não esteja além </body>?
Mr_Green
1
Navegadores modernos também podem ler o atributo "adiar". Você pode definir defer = "adiar" em tags de script que não estejam na parte inferior do <body> e, quando o navegador as vir, ele primeiro terminará de carregar o restante do html e depois voltará e interpretará o conteúdo de a tag de script. Isso é útil se você estiver usando algum tipo de estrutura em que não tenha controle total da página. Consulte este artigo e observe que é um documento
ativo,
75

O melhor lugar para isso é um pouco antes de você precisar e o quanto antes.

Além disso, dependendo da localização física dos usuários, o uso de um serviço como o serviço S3 da Amazon pode ajudar os usuários a fazer o download de um servidor fisicamente mais próximo deles do que o seu servidor.

O script js é uma biblioteca comumente usada como jQuery ou protótipo? Nesse caso, existem várias empresas, como Google e Yahoo, que possuem ferramentas para fornecer esses arquivos para você em uma rede distribuída.

Levi Rosol
fonte
60

Como regra geral, o melhor lugar para colocar <script>tags é a parte inferior da página, logo antes da </body>tag. Algo assim:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Por quê?

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. Mais...

CSS

Um pouco fora de tópico, mas ... Coloque as folhas de estilo no topo.

Ao pesquisar o desempenho no Yahoo !, descobrimos que mover folhas de estilo para o documento HEAD faz com que as páginas pareçam carregar mais rapidamente. Isso ocorre porque a inserção de folhas de estilo no HEAD permite que a página seja renderizada progressivamente. Mais...

Leitura adicional

O Yahoo lançou um guia muito legal que lista as melhores práticas para acelerar um site. Definitivamente vale a pena ler: https://developer.yahoo.com/performance/rules.html

mártires
fonte
1
"O problema causado pelos scripts é que eles bloqueiam downloads paralelos". - Isso não é mais verdade: w3.org/TR/html5/scripting-1.html#attr-script-async
Quentin
4

Com 100k de Javascript, você nunca deve colocá-lo dentro do arquivo. Use um arquivo Javascript de script externo. Não há nenhuma chance no inferno de você usar apenas essa quantidade de código em apenas uma página HTML. É provável que você esteja perguntando onde deve carregar o arquivo Javascript. Para isso, você já recebeu respostas satisfatórias.

Mas eu gostaria de ressaltar que comumente os navegadores modernos aceitam arquivos Javascript gzip ped! Apenas gzip o x.jsarquivo para x.js.gze aponte para isso no srcatributo Ele não funciona no sistema de arquivos local, você precisa de um servidor web para que ele funcione. Mas a economia em bytes transferidos pode ser enorme.

Testei com sucesso no Firefox 3, MSIE 7, Opera 9 e Google Chrome. Aparentemente, não funciona dessa maneira no Safari 3.

Para obter mais informações, consulte esta postagem do blog e outra página muito antiga que, no entanto, é útil, pois indica que o servidor da Web pode detectar se um navegador pode aceitar Javascript compactado ou não. Se o lado do servidor puder escolher dinamicamente enviar o gzip ou o texto sem formatação, você poderá tornar a página utilizável em todos os navegadores da web.

bart
fonte
8
Você entendeu mal a pergunta do OP. Ele estava perguntando onde no HTML colocar a tag de script. Ele já estava usando um arquivo externo, não embutindo o script. É certo que isso era menos claro antes de sua edição da pergunta em abril de 2009. Talvez exclua esta resposta?
Mark Amery
@Leandro Acho que é porque as pessoas nem sempre mantêm a pergunta real em mente, mas ainda consideram respostas como essa úteis. No entanto, essa resposta é útil, mas não necessariamente relevante. Pode funcionar melhor se a dica de ferramenta de votação contiver palavras mais explícitas, por exemplo, 'Esta resposta é útil e relevante'.
WynandB
1
No Javascript gzipped: você pode configurar seu servidor da Web para compactá-lo também ... (Ou usar algo como o módulo / opção gzip_static do nginx) (e o gunzip para outros clientes) Isso deve pelo menos enviar o cabeçalho do tipo de conteúdo correto, com codificação marcado como gzip, provavelmente resultando em ainda melhor suporte ao navegador
Gert van den Berg
4

Colocar o javascript no topo pareceria mais limpo, mas funcionalmente, é melhor ir atrás do HTML. Dessa forma, seu javascript não será executado e tentará referenciar elementos HTML antes de serem carregados. Esse tipo de problema geralmente só se torna aparente quando você carrega a página em uma conexão de Internet real, especialmente lenta.

Você também pode tentar carregar dinamicamente o javascript adicionando um elemento de cabeçalho de outro código javascript, embora isso só faça sentido se você não estiver usando todo o código o tempo todo.

Matthias Wandel
fonte
3

Usando cuzillion, você pode testar o efeito no carregamento da página de diferentes posicionamentos de tags de script usando métodos diferentes: inline, externo, "tags HTML", "document.write", "elemento JS DOM", "iframe" e "XHR eval" . Veja a ajuda para uma explicação das diferenças. Também pode testar folhas de estilo, imagens e iframes.

Sam Hasler
fonte
1

A resposta é depende de como você está usando os objetos de javascript. Como já foi apontado, o carregamento dos arquivos javascript no rodapé, em vez do cabeçalho, certamente melhora o desempenho, mas deve-se tomar cuidado para que os objetos usados ​​sejam inicializados posteriormente ao carregamento no rodapé. Mais uma maneira é carregar os arquivos 'js' colocados na pasta que estará disponível para todos os arquivos.

GustyWind
fonte
0

Como outros já disseram, provavelmente deve ir em um arquivo externo. Eu prefiro incluir esses arquivos no final do <head />. Esse método é mais amigável ao ser humano do que à máquina, mas dessa forma eu sempre sei onde está o JS. Não é tão legível incluir arquivos de script em qualquer outro lugar (imho).

Se você realmente precisa espremer todos os últimos ms, provavelmente deve fazer o que o Yahoo diz.

Berserk
fonte
0

Os scripts devem ser incluídos no final da tag do corpo, pois assim o HTML será analisado pelo navegador e exibido antes do carregamento dos scripts.

José Salgado
fonte
0

A resposta para a pergunta depende. Existem 2 cenários nessa situação e você precisará fazer uma escolha com base no cenário apropriado.

Cenário 1 - Script crítico / Script necessário

Caso o script que você está usando seja importante para carregar o site, é recomendável que seja colocado na parte superior do seu documento HTML, por exemplo <head>,. Alguns exemplos incluem - código do aplicativo, autoinicialização, fontes etc.

Cenário 2 - Scripts menos importantes / analíticos

Também existem scripts usados ​​que não afetam a exibição do site. É recomendável que esses scripts sejam carregados após o carregamento de todos os segmentos importantes. E a resposta será a parte inferior do documento, ou seja, a parte inferior do seu<body> antes da tag de fechamento. Alguns exemplos incluem - Google analytics, hotjar, etc.

Bônus - assíncrono / adiado

Você também pode informar aos navegadores que o carregamento do script pode ser feito simultaneamente com outros e pode ser carregado com base na escolha do navegador, usando um argumento adiar / assíncrono no código do script.

por exemplo. <script async src="script.js"></script>

Praveen Thirumurugan
fonte
-1

Seus links javascript podem ficar na cabeça ou no final da tag body, é verdade que o desempenho melhora colocando o link no final da tag body, mas, a menos que o desempenho seja um problema, é melhor colocá-los na cabeça para que as pessoas leiam e você saiba onde os links estão localizados e pode referenciá-los mais facilmente.

Timothy Trousdale
fonte
-1

Eu diria que depende de fato o que você planejou alcançar com o código Javascript:

  • se você planejou inserir seu (s) script (s) JS externo, o melhor lugar é o cabeçalho da página
  • se você planejou usar páginas em smartphones, na parte inferior da página, logo antes da tag.
  • mas, se você planejou fazer a combinação de HTML e JS (tabela HTML criada e preenchida dinamicamente, por exemplo), deverá colocá-la onde for necessário.
Ludus H
fonte
O que eu disse para merecer menos !? Nossa.
precisa
O que ser externo tem a ver com colocar o script na cabeça? Por que a parte inferior da página é um bom lugar para colocar scripts especificamente para smartphones? Sua declaração sobre a geração dinâmica de HTML a partir de JS é verdadeira apenas se você estiver usando document.write, o que provavelmente não deveria ser.
Quentin
Você "presumiu" o que eu pensava e devido à minha resposta ter sido negativa? Você acha que provavelmente sua presunção é melhor do que minha explicação, certo? Eu planejei fazer uma breve explicação, se alguém não conseguir entender, ele solicitará mais informações. No meu comentário, sugeri colocar o JS no final da página para telefones e tablets inteligentes, logo antes do final do corpo, porque o carregamento da página inteira é mais rápido, pois o navegador não precisa mudar para o modo "thread único", o conteúdo da página começará a aparecer na tela ... mas você provavelmente sabe disso.
Ludus H