Onde posicionar o link para o CSS e JavaScrip?
06/04/2017
0
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
Post mais votado
06/04/2017
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
Mais Posts
07/04/2017
André Gomes
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.
07/04/2017
Natália
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.
<script type="text/javascript" src="teste.js"></script>
07/04/2017
Natália
<script type="text/javascript" src="js/Controllers/IndexCtrl.js"></script> </body> </html>
07/04/2017
Dayan Barros
Ele também vai funcionar fora dele, mas não é uma boa prática.
10/04/2017
Alex Andrade
<script>
$( document ).ready(function() {
console.log( "After page is fully loaded!" );
});
</script>11/04/2017
André Gomes
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
11/04/2017
Dayan Barros
Sim, está correto.
12/04/2017
Angelo Santos
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 !
Clique aqui para fazer login e interagir na Comunidade :)