Qual é a diferença entre as tags <script>, <script async> e <script defer>?

A tag <script> padrão interrompe a análise do HTML, carrega o script e executa-o, depois a análise continua.

<script async> carrega o script de forma assíncrona, enquanto a análise do HTML continua. O script é executado imediatamente após o carregamento. A ordem de execução não é garantida.

<script defer> carrega o script de forma assíncrona, enquanto a análise do HTML continua. O script só é executado após a conclusão da análise do HTML, mas antes do evento DOMContentLoaded. A ordem de execução dos scripts com defer é mantida de acordo com sua aparição no HTML.

Tabela comparativa:

Atributo	Análise do HTML durante o carregamento do script	Execução do script	Manutenção da ordem de execução
Nenhum	Pausa	Imediatamente após o carregamento	Sim
async	Continua	Imediatamente após o carregamento (pode interromper a análise)	Não
defer	Continua	Após a conclusão da análise do HTML	Sim

Exemplo:

<!-- Script normal - bloqueia a análise -->
<script src="script1.js"></script>

<!-- Script assíncrono - não bloqueia a análise, execução imediata após o carregamento -->
<script src="script2.js" async></script>

<!-- Script diferido - não bloqueia a análise, execução após a análise do HTML -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Será executado após script3.js -->