Início /Programação /JavaScript /Async vs Defer no JavaScript: Entenda Como Carregar Scripts sem Travar sua Página

Async vs Defer no JavaScript: Entenda Como Carregar Scripts sem Travar sua Página

Por: Angelo Luis Ferreira | 12/05/2026 Acessos: 110

🎯 Objetivo

Apresentar, de forma técnica e didática, o funcionamento dos atributos async e defer no carregamento de scripts JavaScript, explicando como eles afetam a renderização da página, o processamento do HTML, o desempenho do site e a experiência do usuário.

O artigo demonstra quando utilizar cada abordagem, diferenças práticas entre elas e como otimizar aplicações modernas utilizando carregamento assíncrono de scripts.

📑 Índice do artigo

  • Introdução
  • Como o navegador carrega scripts JavaScript
  • O problema da execução tradicional
  • O atributo async
  • O atributo defer
  • Diferenças entre async e defer
  • Exemplos práticos
  • Quando usar cada um
  • Compatibilidade nos navegadores
  • Boas práticas de performance
  • Ordem de execução e dependência do DOM
  • Conclusão

🧠 Introdução

O JavaScript é um dos pilares da web moderna, responsável por adicionar interatividade, dinamismo e inteligência às páginas. No entanto, o carregamento inadequado de scripts pode causar lentidão, bloqueios na renderização e piora significativa na experiência do usuário.

Por padrão, o JavaScript funciona de forma síncrona. Isso significa que o navegador executa uma tarefa por vez, em sequência, aguardando a conclusão da anterior antes de continuar, ou seja:

👉 uma instrução é executada por vez
👉 em sequência
👉 aguardando a anterior terminar

Isso significa que, durante o carregamento da página, o navegador precisa interromper temporariamente o processamento do HTML sempre que encontra um script JavaScript.

Para resolver esse problema, o HTML5 introduziu dois atributos extremamente importantes:

  • async
  • defer

Esses atributos permitem alterar o comportamento tradicional do carregamento dos scripts, tornando o download dos arquivos assíncrono. Em vez de bloquear completamente o HTML, o navegador pode continuar processando a página enquanto os scripts são baixados em paralelo.

📌 Atenção: Scripts inline vs externos

Os atributos async e defer foram criados exclusivamente para scripts externos carregados através do atributo src="". 

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

👉 Portanto, eles NÃO possuem efeito em scripts inline, pois são ignorados pelo navegador.

⚙️ Como o navegador carrega scripts JavaScript

Antes de entender async e defer, é fundamental compreender o comportamento padrão do navegador (síncrono).

Quando o navegador interpreta o HTML, ele realiza a leitura:

  • da esquerda para direita
  • de cima para baixo

Ao encontrar um script externo:

<script src="script.js"></script>
o navegador:
  • pausa o processamento do HTML
  • baixa o arquivo JavaScript
  • executa o script
  • volta a processar o HTML

Esse comportamento bloqueante (render blocking) pode prejudicar o desempenho da página, principalmente em sites com muitos scripts.

❌ O problema da execução tradicional

Esse modelo pode gerar problemas graves de performance.

Imagine uma página com vários scripts:

<script src="config.js"></script>
<script src="app.js"></script>
<script src="analytics.js"></script>

👉 Cada script interrompe o carregamento da página.

⚠️ Consequências

  • aumento do tempo de carregamento
  • atraso no primeiro paint
  • sensação de lentidão
  • pior experiência do usuário

⚡ O atributo async

O atributo async permite que o script seja carregado em paralelo com o HTML.

📌 Sintaxe

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

🔍 Como funciona

Com async:

  • o HTML continua sendo processado
  • o script é baixado em paralelo
  • assim que terminar de baixar → executa imediatamente

⚠️ Característica importante

O script pode executar:

  • antes do HTML terminar
  • em ordem imprevisível

👉 Isso significa que async NÃO garante ordem de execução

🧩 O atributo defer

O atributo defer também realiza download paralelo, mas possui uma diferença fundamental.

📌 Sintaxe

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

🔍 Como funciona

Com defer:

  • o HTML continua sendo processado
  • o script é baixado em paralelo
  • a execução do script ocorre SOMENTE após o HTML terminar

✅ Grande vantagem

O defer:

  • preserva a ordem dos scripts
  • garante DOM carregado

🔄 Diferenças entre async e defer

💻 Exemplos práticos

Agora que entendemos a teoria, vamos visualizar na prática como cada abordagem funciona no carregamento de scripts JavaScript.

1. Execução normal (tradicional)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Execução Normal</title>

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

</head>
<body>

  <h1>Página HTML</h1>

</body>
</html>

Quando o navegador encontra:

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

ele:

  1. pausa a leitura do HTML
  2. baixa script.js
  3. executa o arquivo
  4. volta para o HTML

❌ Problema

Se o script for grande ou lento:

  • a página demora para aparecer
  • o usuário vê tela branca por mais tempo

👉 Esse é o comportamento bloqueante padrão.

2. Exemplo com async

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Async</title>

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

</head>
<body>

  <h1>Página HTML</h1>

</body>
</html>

Com async:

✔ O HTML continua carregando
✔ O script é baixado em paralelo
✔ Assim que terminar → executa imediatamente

⚠️ Exemplo de problema com async

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

❌ app.js pode executar antes do script.js.

👉 Ordem NÃO garantida.

📌 Melhor uso

Ideal para scripts independentes:

  • Google Analytics
  • anúncios
  • pixels de rastreamento

3. Exemplo com defer

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Defer</title>

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

</head>
<body>

  <h1>Página HTML</h1>

</body>
</html>

Com defer:

✔ O HTML continua carregando
✔ Os scripts são baixados em paralelo
✔ A execução acontece SOMENTE após o HTML terminar

✅ Grande vantagem

O defer:

  • mantém a ordem dos scripts
  • garante DOM carregado, principalmente quando precisam carregar elementos HTML
 <script defer src="script.js"></script>
 <script defer src="app.js"></script>

👉 script.js executa antes de app.js

🧠 Quando usar async

Use async quando:

  • o script é independente
  • não depende do DOM
  • não depende de outros scripts

📌 Exemplos ideais

  • Google Analytics
  • scripts de rastreamento
  • publicidade
  • métricas

🧠 Quando usar defer

Use defer quando:

  • o script manipula o DOM
  • existe dependência entre arquivos
  • a ordem importa

📌 Exemplos ideais

  • aplicações web
  • formulários
  • menus dinâmicos
  • interfaces interativas

⚡ Compatibilidade com navegadores

O suporte para async e defer é excelente nos navegadores modernos.

✔ Chrome
✔ Firefox
✔ Edge
✔ Safari

👉 Ambos são amplamente suportados atualmente.

Boas práticas de performance

✅ Prefira scripts externos

Melhor organização e cache.

✅ Use defer em aplicações

Especialmente quando o script depende do DOM, como usar elementos HTML ou CSS.

✅ Use async para scripts independentes

Analytics e monitoramento são ótimos exemplos.

✅ Evite excesso de scripts bloqueantes

Cada bloqueio aumenta:

  • tempo de carregamento
  • consumo de recursos
  • sensação de lentidão

⚠️ Erros comuns

Misturar scripts dependentes com async.

❌ Exemplo problemático (ordem de execução)

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

👉 main.js pode executar antes de config.js.

❌ Exemplo problemático (dependência DOM)

Muitos scripts precisam acessar elementos HTML:

document.getElementById("menu")

Se o DOM ainda não estiver carregado: ❌ erro

👉 Por isso defer costuma ser a melhor escolha para aplicações modernas, pois o HTML é totalmente renderizado antes de executar o JavaScript.

🧾 Conclusão

Os atributos async e defer representam uma das otimizações mais importantes no carregamento de JavaScript moderno.

Embora ambos permitam carregamento assíncrono, seus comportamentos são diferentes:

  • async prioriza velocidade
  • defer prioriza previsibilidade e segurança

Na maioria das aplicações modernas, defer costuma ser a melhor escolha, principalmente em scripts que manipulam o DOM ou dependem de outros arquivos.

Já async é ideal para scripts independentes, como analytics e monitoramento.

👉 Dominar esses atributos é fundamental para criar páginas mais rápidas, eficientes e alinhadas com as boas práticas de performance da web moderna.

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO