Onde posicionar o link para o CSS e JavaScrip?

06/04/2017

0

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

Responder

Post mais votado

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.

Dayan Barros

Dayan Barros
Responder

Mais Posts

07/04/2017

André Gomes

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

07/04/2017

Natália

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

07/04/2017

Natália

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>
Responder

07/04/2017

Dayan Barros

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

Ele também vai funcionar fora dele, mas não é uma boa prática.
Responder

10/04/2017

Alex Andrade

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>
Responder

11/04/2017

André Gomes

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

11/04/2017

Dayan Barros


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
Responder

11/04/2017

Dayan Barros

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

12/04/2017

André Gomes

Muito obrigado pelas dicas Dayan.
Responder

12/04/2017

Angelo Santos

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 !
Responder

13/04/2017

André Gomes

Muito bom o exemplo Angelo,
Muito obrigado.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar