Os atributos async e defer em elementos HTML script desempenham um papel crucial em como os arquivos JavaScript são carregados e executados em páginas web. Entendê-los pode melhorar o desempenho do seu site e a experiência do usuário. Quando você inclui um script no seu arquivo HTML, ele fica assim:

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

Quando o navegador encontra esta tag script, ele para de analisar o HTML, baixa o script, executa-o e então continua a analisar o HTML. Isso pode desacelerar o carregamento da sua página web, especialmente se você tiver scripts grandes. É aqui que entram os atributos async e defer. Eles fornecem maneiras de carregar scripts de forma mais eficiente. Vamos começar com o atributo async:

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

Ao adicionar o atributo async a uma tag script, o navegador continuará a analisar o HTML enquanto o script está sendo baixado. Uma vez que o script esteja totalmente baixado, o navegador irá pausar a análise do HTML, executar o script e então retomar a análise do HTML. Isso pode acelerar significativamente o carregamento da página. É importante notar que scripts async são executados assim que são baixados, o que significa que eles podem não rodar na ordem correta que desejamos. É aqui que o atributo defer entra em ação para salvar o dia. Vamos ver como o atributo defer se parece:

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

O atributo defer é semelhante ao atributo async. No entanto, scripts com defer não são executados imediatamente após serem baixados. Em vez disso, eles esperam até que a análise do HTML esteja completa. Além disso, scripts com defer são executados na ordem em que aparecem no código HTML. Em resumo, use async para scripts onde a ordem de execução não importa e use defer quando precisar garantir que os scripts sejam executados na ordem correta. Ambos os atributos podem melhorar significativamente os tempos de carregamento da página ao permitir que o navegador continue a analisar o HTML enquanto os scripts estão sendo baixados em segundo plano.