Os atributos async e defer
Carregue scripts sem bloquear a análise do HTML.
Os atributos async e defer é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Comportamento padrão de script
Um <script src="..."> simples, sem async nem defer, bloqueia a análise do HTML enquanto é baixado e executado. A renderização de tudo abaixo do script é pausada, e é por isso que tradicionalmente os scripts ficavam no final de <body>.
async baixa em paralelo
<script async src="..."> baixa o script em paralelo à análise do HTML e o executa assim que chega. A execução ainda pausa a análise do HTML, mas apenas brevemente — o script não bloqueia o download de outros recursos.
A ordem de execução de async é imprevisível
Dois scripts async são executados na ordem em que terminam de baixar. Nunca use async em scripts que dependem uns dos outros (jQuery antes do plug-in do jQuery), pois a dependência pode ser executada antes que o pré-requisito esteja disponível.
defer aguarda o HTML
<script defer src="..."> baixa em paralelo como async, mas a execução é adiada até que o HTML seja totalmente analisado — imediatamente antes do evento DOMContentLoaded. O script nunca bloqueia a análise.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer preserva a ordem
Vários scripts defer são executados na ordem em que foram declarados, assim como os scripts normais no final de body. Isso faz de defer a escolha certa para scripts dependentes: os utilitários são carregados antes dos consumidores sem orquestração manual.
Escolha entre async e defer
Use async para trechos independentes de terceiros (análise de tráfego, anúncios) que não interajam com o DOM e não tenham dependências. Use defer para o código da sua própria aplicação que precise do DOM e dependa de outros scripts.
Módulos usam defer por padrão
<script type="module"> comporta-se automaticamente como defer — é baixado em paralelo, executado após a análise e mantém a ordem. Adicionar defer a um módulo é permitido, mas redundante; adicionar async retorna ao comportamento de async.
Scripts embutidos ignoram async/defer
async e defer aplicam-se apenas a scripts externos (com src). Uma tag <script> embutida é executada imediatamente, independentemente dos atributos, portanto os atributos são ignorados silenciosamente em <script>console.log(1)</script>.
A posição se torna menos importante
Com defer (ou módulos), as tags <script> podem ficar no <head> sem bloquear a análise — e colocá-las ali permite que o navegador as descubra e comece a baixá-las mais cedo do que no final de <body>.
<head>
<script defer src="app.js"></script>
</head>Combinação com preload
Para scripts sensíveis à latência, combine <link rel="preload" as="script" href="..."> no cabeçalho com um <script> adiado abaixo. O preload inicia o download imediatamente, enquanto defer garante que a ordem de execução permaneça correta.
Armadilha comum
Marcar um script como async sem verificar se ele tem zero dependências é a causa mais comum de condições de corrida do tipo "funciona na minha máquina, falha em produção". Em caso de dúvida, prefira defer — ele é tolerante onde async é implacável.
Verificação de conhecimento
Qual é a diferença entre async e defer para dois scripts em que o segundo depende do primeiro?
Resumo
async e defer baixam scripts em paralelo à análise do HTML. async é executado imediatamente ao chegar, em uma ordem imprevisível — use-o para trechos independentes de terceiros. defer é executado após a análise, na ordem de declaração — use-o para código de aplicação com dependências. Módulos usam defer por padrão.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Os atributos async e defer” é grátis?
Sim — o texto completo de “Os atributos async e defer” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Os atributos async e defer”?
Carregue scripts sem bloquear a análise do HTML. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Os atributos async e defer”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Os atributos async e defer
- Preload, Prefetch e Preconnect
- Carregamento tardio de imagens loading=lazy
- Dicas de recursos: modulepreload