Li recentemente o manifesto do Yahoo Melhores práticas para acelerar seu site . Eles recomendam colocar a inclusão de JavaScript na parte inferior do código HTML quando possível.
Mas onde exatamente e quando?
Devemos colocá-lo antes de fechar </html>ou depois? E, acima de tudo, quando ainda devemos colocá-lo na <head>seção?
Respostas:
Existem duas possibilidades para scripts verdadeiramente discretos:
</body></html>)O segundo pode ser mais rápido, pois a pesquisa original do Yahoo mostrou que alguns navegadores tentam carregar arquivos de script quando atingem a tag do script e, portanto, não carregam o resto da página até que tenham terminado. No entanto, se o seu script tiver uma parte 'pronta' que deve ser executada assim que o DOM estiver pronto, você pode precisar tê-lo no cabeçalho. Outro problema é o layout - se o seu script vai alterar o layout da página, você deseja que ele seja carregado o mais cedo possível, para que sua página não perca muito tempo se redesenhando na frente dos usuários.
Se o site de script externo estiver em outro domínio (como widgets externos), pode valer a pena colocá-lo na parte inferior para evitar atrasar o carregamento da página.
E para quaisquer problemas de desempenho, faça seus próprios benchmarks - o que pode ser verdade em um momento quando um estudo é feito pode mudar com sua própria configuração local ou mudanças nos navegadores.
Nunca é tão simples - o Yahoo recomenda colocar os scripts logo antes da </body>tag de fechamento , o que criará a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não bloquearão o download do restante do documento). No entanto, se você tiver algum código que deseja executar no carregamento da página, ele só começará a ser executado depois que a página inteira for carregada. Se você colocar os scripts na <head>tag, eles começarão a ser executados antes - então, em um cache preparado, a página realmente parece carregar mais rápido.
Além disso, o privilégio de colocar scripts na parte inferior da página nem sempre está disponível. Se você precisar incluir scripts embutidos em suas visualizações que dependem de uma biblioteca ou algum outro código JavaScript sendo carregado antes, você deve carregar essas dependências na <head>tag.
Em suma, as recomendações do Yahoo são interessantes, mas nem sempre aplicáveis, e devem ser consideradas caso a caso.
<script>tags embutidas não implicam em javascript intrusivo.
<script>as tags são separadas da marcação e podem ser usadas com código que aprimora a interface, mas não é obrigatório. Portanto, não há nada intrinsecamente intrusivo nas <script>tags embutidas .
<script>tags para codificar esses valores em variáveis javascript, para uso talvez com edição embutida ou outro comportamento semelhante.
Como já foi dito, coloque-o antes das tags html do corpo de fechamento .
Outro dia, recebemos várias ligações de clientes reclamando que seus sites eram extremamente lentos. Nós os visitamos localmente e descobrimos que levavam de 20 a 30 segundos para carregar uma única página. Pensando que era o mau desempenho dos servidores, nós nos conectamos - mas os servidores web e sql estavam com aproximadamente 0% de atividade.
Após alguns minutos, percebemos que um site externo estava fora do ar, ao qual estávamos criando um link para tags de rastreamento Javascript. Isso significava que os navegadores estavam acessando a tag de script na seção principal do site e esperando para baixar o arquivo de script.
Portanto, pelo menos para scripts de terceiros / externos, recomendo colocá-los como a última coisa na página. Então, se eles estivessem indisponíveis, o navegador pelo menos carregaria a página até aquele ponto - e o usuário estaria alheio a isso.
Para resumir, com base nas sugestões acima:
</body>tag.</body>menos que você tenha um motivo de caso extremo para colocar scripts em head.Se você quiser mexer na posição de seus scripts, o YSlow é uma ótima ferramenta para lhe dar uma ideia se isso vai melhorar ou prejudicar o desempenho. Colocar javascript em certas posições de documento pode realmente matar o tempo de carregamento da página.
Não, não deve ser após o, </html>pois isso seria inválido. O melhor lugar para colocar scripts é antes do</body>
Isso ocorre basicamente porque a maioria dos navegadores para de renderizar a página enquanto avaliam o script que você fornece. Portanto, não há problema em colocar código sem bloqueio em qualquer lugar da página (estou pensando principalmente em coisas que anexam funções ao onLoadevento, uma vez que a associação de eventos é tão rápida que é efetivamente gratuita). Um grande assassino aqui está no início da página, colocando algum script de servidor de anúncios, que pode impedir o carregamento da página antes que os anúncios tenham sido totalmente baixados, fazendo com que o tempo de carregamento de sua página tenha um balão
Se você colocá-lo na parte inferior, ele carrega por último, acelerando assim a velocidade com que o usuário pode ver a página. Precisa ser antes da final, </html>caso contrário, não fará parte do DOM.
Se o código for necessário instantaneamente, coloque-o na cabeça.
É melhor colocar itens como widgets de blog na parte inferior para que, se eles não carregarem, não afetem a usabilidade da página.