5

Posição da tag script 💻

#HTML #JavaScript
João Silva
João Silva

Olá, amigos! Espero que estejam bem.

Neste primeiro artigo que escrevo, quero compartilhar as possibilidades das posições da tag <script> em nossos projetos.

Se você acompanhou o curso sobre JavaScript aqui da DIO, você viu que podemos colocar esta tag, tanto na head, quanto no body da página, mas qual a melhor opção?

Primeiro, precisamos ter em mente que, o JavaScript, é um bloqueador. Isso significa que, quando estamos carregando uma página, quando o navegador encontra o JavaScript, ele para tudo para poder carregá-lo. Sabendo disso, se <script> estiver na head, o navegador irá começar a carregar o script primeiro, e só depois, irá carregar o body. Agora, se <script> estiver no final do body, o navegador irá carregar toda a página e por fim, carregará o script.

Então, a melhor opção é usar a tag script no final do body, certo? Na verdade, existe duas opções melhores, e elas estão na head. Usamos async e defer.


async:

Quando utilizamos o atributo async dentro da tag script, nós estamos dizendo para o navegador começar a carregar o arquivo JavaScript e continuar a carregar o nosso HTML. Apenas quando o JavaScript for completamente carregado, é que ele irá começar a ser carregado.

	<script type="text/javascript" src="script.js" async>

Uma vez carregado, o JavaScript começará a ser executado, na ordem em que for carregado. Então, no caso de termos duas tags script dentro do nosso código, se o segundo script for carregado primeiro, ele será executando antes do nosso primeiro script.


defer:

Quando utilizamos o atributo defer dentro da tag script, nós dizemos duas coisas para o navegador:

  1. Carregue este arquivo JavaScript de forma assíncrona;
  2. Execute os script na ordem certa.


<script type="text/javascript" src="script.js" defer>


Podemos observar que, tanto defer ,quanto async, mandam o navegador carregar o JavaScript de fundo, enquanto o HTML está sendo carregado. Mas, o defer também garante uma ordem de execução dos scripts. O que significa que, em uma caso onde temos duas tags script, se o segundo script for carregado primeiro, ele irá esperar o primeiro script ser carregado, e executado, e só então o segundo script, que estava esperando, será executado.



E aí, você sabia disso? Eu particularmente não sabia e achei muito interessante e de alto valor para criação de futuras páginas.

Eu vou ficando por aqui galera. Um abraço, e fiquem com Deus!

2
86

Comentários (2)

1
Glauber Fernandes

Glauber Fernandes

13/12/2020 20:13

Olá...


Bom d++ esse artigo.


Eu sabia que era boa prática colocar no final do body, mas esses atributos eu não sabia.


Obrigado pela dica!!

1
Joannyta Reis

Joannyta Reis

13/12/2020 19:53

Olá!

Não sabia disso.

Agradeço por compartilhar!

;)

Aluno de Licenciatura em Matemática, com uma curiosidade enorme no mundo da tecnologia.

Brasil