Qual é a diferença no funcionamento dos modos (async, defer ou type) da tag <script>?

<script> sem atributos

• O HTML é analisado até à tag <script>.
• A análise do HTML é suspensa ao detectar a tag <script>.
• O script é carregado.
• O script é executado.
• A análise do HTML retoma após a execução do script.

<script async>

• O HTML é analisado em simultâneo com o carregamento do script.
• A análise do HTML é suspensa ao terminar o carregamento do script.
• O script é executado.
• A análise do HTML retoma após a execução do script.
• A ordem de execução dos scripts com async não é garantida, depende da velocidade de carregamento.

<script defer>

• O HTML é analisado em simultâneo com o carregamento do script.
• O script é executado após a análise do HTML, mas antes do evento DOMContentLoaded.
• A ordem de execução dos scripts com defer é garantida, corresponde à ordem em que aparecem no HTML.
• Comportamento semelhante ao <script> colocado antes do fecho da tag </body>.

<script type="module"> (para módulos ECMAScript)

• É tratado como <script defer> por padrão (execução adiada após a análise, mantém a ordem).
• Pode ser usado com o atributo async.
• Suporta importação/exportação de módulos. Cria um escopo separado.

Atributo	Carregamento do script	Execução do script	Bloqueio da análise HTML	Ordem de execução
Nenhum	Bloqueante	Bloqueante	Sim	Mantém-se
async	Não bloqueante (paralelo)	Não bloqueante (ao terminar o carregamento)	Não	Não garantido
defer	Não bloqueante (paralelo)	Não bloqueante (após a análise HTML)	Não	Mantém-se
type="module"	Não bloqueante (paralelo)	Não bloqueante (após a análise HTML, por padrão)	Não	Mantém-se (por padrão)

// Exemplo de script simples
console.log('Script normal');

// Exemplo de script assíncrono
console.log('Script assíncrono');

// Exemplo de script diferido
console.log('Script diferido');

// Exemplo de módulo
import { someFunction } from './module.js';
someFunction();
console.log('Script módulo');