Onde posicionar o link para o CSS e JavaScrip?

jQuery

HTML

CSS

JavaScript

06/04/2017

Bom dia pessoal,

Estou começando a desenvolver minha primeira página e tenho tido dificuldade de saber ao certo onde posicionar o link para CSS, JS, JQuery e etc. Vi que algumas pessoas posicionam os links dentro da <head> e outras no final da <body>. Esse posicionamento se dá somente a critério do programador ou existe uma boa prática por trás disso?

Grato desde já.
André Gomes

André Gomes

Curtidas 0

Melhor post

Dayan Barros

Dayan Barros

06/04/2017

Fala André.

Então, o CSS você coloca o link no <head> abaixo das meta tags e os scripts você coloca lá no footer.

O CSS precisa ser lido na página primeiro do que o código HTML, se não na hora de renderizar, ele vai carregar todo o HTML e só depois que vai aparecer os estilos, para o usuário fica bem feio, parece um erro.

O script seria a última coisa a ser carregada. Se colocar ele no <head> o browser vai processar todo seu script, antes de renderizar o html e o css, afinal o css e o javascript foram chamados logo no começo.

Desta forma, o usuário terá a impressão de que o site demorou para carregar, quando a demora foi em renderizar o html, pois o browser tava ocupado processando o javascript.
GOSTEI 4

Mais Respostas

André Gomes

André Gomes

06/04/2017

Fala Dayan,

Agora deu pra eu entender a lógica desse posicionamento e vou passar a desenvolver minhas paginas dessa forma de agora em diante.

Muito obrigado.
GOSTEI 2
Natália

Natália

06/04/2017

Fala André.

Então, o CSS você coloca o link no <head> abaixo das meta tags e os scripts você coloca lá no footer.

O CSS precisa ser lido na página primeiro do que o código HTML, se não na hora de renderizar, ele vai carregar todo o HTML e só depois que vai aparecer os estilos, para o usuário fica bem feio, parece um erro.

O script seria a última coisa a ser carregada. Se colocar ele no <head> o browser vai processar todo seu script, antes de renderizar o html e o css, afinal o css e o javascript foram chamados logo no começo.

Desta forma, o usuário terá a impressão de que o site demorou para carregar, quando a demora foi em renderizar o html, pois o browser tava ocupado processando o javascript.
Oi Dayan, e o script: 
 <script type="text/javascript" src="teste.js"></script>
Eu devo colocar dentro da tag body ou fora da <body> ? Sempre fico nessa dúvida, porque eu sempre coloco no fim da tag body, antes de fechar eu carrego os js, mas uma vez me falaram que o certo era colocar fora da body, mas não entendi o motivo, e nem sei se é verdade. Poderia esclarecer essa dúvida pra mim? Obrigada.
GOSTEI 1
Natália

Natália

06/04/2017

Por exemplo eu sempre faço isso, esse jeito seria o certo ou não?
<script type="text/javascript" src="js/Controllers/IndexCtrl.js"></script>
</body>
</html>
GOSTEI 0
Dayan Barros

Dayan Barros

06/04/2017

Oi Natália, está correto, o script é dentro do body.

Ele também vai funcionar fora dele, mas não é uma boa prática.
GOSTEI 2
Alex Andrade

Alex Andrade

06/04/2017

Somente complementando o assunto, o mais indicado é a tag SCRIPT é ficar na tag HEAD. Se quiser que o código javascript somente seja executado quando o conteúdo HTML já estiver carregado, basta utilizar o código abaixo:
<script>
$( document ).ready(function() {
    console.log( "After page is fully loaded!" );
});
</script>
GOSTEI 0
André Gomes

André Gomes

06/04/2017

Entendi, quanto o link para o Bootstrap, por ser um framework de CSS, acredito que deva ficar dentro da tag <head> também, correto?
GOSTEI 1
Dayan Barros

Dayan Barros

06/04/2017


Somente complementando o assunto, o mais indicado é a tag SCRIPT é ficar na tag HEAD. Se quiser que o código javascript somente seja executado quando o conteúdo HTML já estiver carregado, basta utilizar o código abaixo:


Opa, Alex.

De acordo com as boas práticas, o <script> fica no final da página antes do </body>. Colocando o <script> no <head>, o browser vai ler os documentos inteiros do JS para depois ler o HTML, mesmo você colocando o script de rodar o JS só depois de abrir a página. Além disso, não faz sentido colocar o browser para ler primeiro o script e depois colocar ele para ler após o carregamento do HTML.

Pode verificar no pagespeed do google, ele acusa logo que o <script> é para ser no final da página.

Abs
GOSTEI 0
Dayan Barros

Dayan Barros

06/04/2017

Entendi, quanto o link para o Bootstrap, por ser um framework de CSS, acredito que deva ficar dentro da tag <head> também, correto?


Sim, está correto.
GOSTEI 1
André Gomes

André Gomes

06/04/2017

Muito obrigado pelas dicas Dayan.
GOSTEI 1
Angelo Santos

Angelo Santos

06/04/2017

Olá, André Gomes!

Só para acrescentar: 

<!doctype html>
<!DOCTYPE html">
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
 
        <title>DevMedia</title>

        <link href="" rel="stylesheet" type="text/css" />
    </head>
    <body>
         <h1>Minha primeira página HTML</h1>
         <script src="" type="text/javascript"></script>
    </body>
</html>


Espero que ajude !
GOSTEI 3
André Gomes

André Gomes

06/04/2017

Muito bom o exemplo Angelo,
Muito obrigado.
GOSTEI 0
POSTAR