1. As 3 Formas de Conectar JavaScript ao HTML

Historicamente, existem três métodos para injetar lógica JavaScript em um documento web:

<!-- 1. Inline (Evite em código profissional) -->
<button onclick="alert('Ação inline não recomendada!')">Clique aqui</button>
 
<!-- 2. Interno (Use apenas para scripts mínimos de bootstrap) -->
<script>
  console.log('Script executado internamente');
</script>
 
<!-- 3. Externo (Padrão ouro de produção) -->
<script src="js/app.js"></script>

2. O Gargalo do Parser: Por Que Scripts Comuns Bloqueiam a Página?

Quando o navegador baixa o documento HTML e começa a interpretá-lo linha por linha (processo chamado de HTML Parsing), ele constrói a árvore de elementos (DOM). No entanto, o JavaScript possui a capacidade de alterar o DOM no exato instante em que roda (por exemplo, via document.write()).

Por essa razão histórica de segurança da engine, no momento em que o navegador encontra uma tag <script src="app.js"> clássica no meio do HTML:

1. O parser do HTML é totalmente paralisado.
2. O navegador faz a requisição de rede e aguarda o download completo do arquivo .js.
3. O motor JavaScript compila e executa o código imediatamente.
4. Somente após a execução terminar, o navegador retoma a leitura do restante do HTML.

3. A Revolução Moderna: defer vs async

Para solucionar o bloqueio de renderização sem recorrer a truques antigos (como empurrar scripts para o rodapé do documento), o HTML5 introduziu dois atributos booleanos mágicos para serem usados na tag <head>:

A. O Atributo defer (Adiar Execução)

O atributo defer instrui o navegador a fazer o download do script em segundo plano (em paralelo com a leitura do HTML), mas aguarda a construção completa do DOM antes de executá-lo:

• Download: Paralelo (não bloqueia o parser).
• Execução: Acontece após o término do parsing do HTML, mas antes do disparo do evento DOMContentLoaded.
• Ordem de Execução Garantida: Se você declarar três scripts com defer, eles sempre rodarão na ordem exata em que aparecem no código (ex: lib.js sempre roda antes de app.js).
• Melhor uso: Para todo o código da sua aplicação que precisa manipular elementos da página ou que depende de outros scripts.

<head>
  <!-- Scripts baixam em paralelo e rodam na ordem exata assim que o HTML terminar -->
  <script src="js/biblioteca.js" defer></script>
  <script src="js/main.js" defer></script>
</head>

B. O Atributo async (Assíncrono Independente)

O atributo async também baixa o arquivo em segundo plano, mas executa o código no exato milissegundo em que o download for concluído, interrompendo brevemente o HTML se ele ainda estiver sendo lido:

• Download: Paralelo (não bloqueia o parser durante o download).
• Execução: Imediata pós-download (não espera pelo DOM nem por outros scripts).
• Ordem Não Garantida: Um arquivo menor que terminar de baixar primeiro rodará antes de um arquivo maior, independente da ordem em que foram declarados no HTML.
• Melhor uso: Para scripts independentes de terceiros que não dependem do DOM e nem de outras bibliotecas (Google Analytics, pixels de anúncios, monitoramento de erros como Sentry).

<head>
  <!-- Baixam em paralelo e rodam assim que terminarem, sem travar a tela -->
  <script src="https://www.google-analytics.com/analytics.js" async></script>
  <script src="https://script.hotjar.com/hotjar.js" async></script>
</head>

4. Diagrama Visual: Ciclo de Vida do Carregamento

Observe o comportamento de cada estratégia durante as três fases: Leitura do HTML (Verde), Download do Script (Azul) e Execução do Script (Vermelho):

5. O Comportamento Moderno de type="module"

Quando você utiliza a arquitetura moderna de módulos do ES6 (com import e export), você declara:

<head>
  <!-- Módulos ES6 são automaticamente diferidos (defer) por padrão! -->
  <script type="module" src="js/app.js"></script>
</head>

Ao adicionar type="module", o navegador já aplica automaticamente o comportamento de defer: o arquivo baixa em segundo plano e só é executado quando o documento estiver totalmente construído, mantendo seu código sempre seguro contra acessos prematuros ao DOM!

6. Checklist da Lição 02

• Local de inclusão: Você compreende por que colocar scripts síncronos no <head> bloqueia o parser?
• Domínio do defer: Você sabe que ele mantém a ordem dos scripts e só executa após o DOM estar pronto?
• Domínio do async: Você reconhece que ele roda assim que baixar e é ideal para ferramentas de analytics independentes?
• Módulos ES6: Você aprendeu que type="module" já se comporta como defer nativamente?
• Performance web: Você sabe como escolher a tag certa para atingir notas máximas no Core Web Vitals?