Atributo async e defer em JavaScript.

O atributo async é usado quando você está carregando um script externo e deseja que ele seja executado de forma assíncrona. Aqui estão algumas coisas importantes a saber:

1. Carregamento Assíncrono:

   • Quando você inclui o atributo async em uma tag <script>, o navegador começa a baixar o arquivo JavaScript imediatamente, mas não bloqueia a renderização da página enquanto o arquivo está sendo baixado.
   • Isso é útil para melhorar o desempenho da página, especialmente quando você tem muitos scripts externos. A renderização da página não fica bloqueada esperando que todos os scripts sejam baixados.

2. Ordem de Execução:

   • Scripts com o atributo async não garantem uma ordem específica de execução. O primeiro script que terminar de baixar será executado primeiro.
   • Se a ordem de execução for importante (por exemplo, se você tem dependências entre scripts), é melhor usar o atributo defer em vez de async.

3. Compatibilidade com Navegadores:

   • O atributo async é suportado em navegadores modernos, mas pode não funcionar em navegadores mais antigos.
   • Certifique-se de testar seu código em diferentes navegadores para garantir a compatibilidade.

<script src="script.js" async></script>

O atributo defer é usado em elementos <script> em HTML e tem a seguinte finalidade:
Execução Assíncrona:
Quando você inclui o atributo defer em uma tag <script>, o navegador começa a baixar o arquivo JavaScript imediatamente, mas não bloqueia a renderização da página enquanto o arquivo está sendo baixado.
No entanto, ao contrário do atributo async, o script com defer é executado após o documento HTML ter sido completamente analisado.
Ordem de Execução:
Scripts com o atributo defer garantem que a ordem de execução seja respeitada. Eles são executados na ordem em que aparecem no HTML.
Isso é útil quando você tem vários scripts e precisa que eles sejam carregados e executados sequencialmente.
Evento DOMContentLoaded:
O atributo defer impede que o evento DOMContentLoaded seja disparado até que o script seja carregado e avaliado.
Isso é útil quando você deseja manipular o DOM (árvore de elementos) após o carregamento da página, mas antes que todos os recursos externos (como scripts) tenham terminado de ser carregados.

<script src="script.js" defer></script>



Claro! Vamos falar sobre a diferença entre os atributos async e defer em JavaScript:
async:
O atributo async indica ao navegador que o script deve ser executado assim que for baixado.
Isso significa que o navegador não espera pelo script para continuar carregando a página. Ele baixa o script de forma assíncrona e executa assim que estiver pronto.
É útil para scripts que não são críticos para a renderização inicial da página e não dependem um do outro.
No entanto, a ordem de execução não é garantida, então scripts com async podem ser executados fora de ordem.
defer:
O atributo defer também faz o download do script de forma assíncrona, mas sua execução ocorre apenas quando todo o conteúdo da página tiver sido carregado.
Isso significa que o script é adiado até que o HTML seja completamente analisado e renderizado.
Scripts com defer são executados na ordem em que aparecem no HTML, garantindo que dependências entre scripts sejam respeitadas.
É recomendado para scripts que dependem de outros scripts ou que precisam manipular o DOM após o carregamento da página.
Em resumo:
Use async para scripts não críticos e independentes.
Use defer para scripts dependentes e que precisam ser executados após o carregamento completo da página.