Atributo async do HTML
O atributo async é um atributo boolean que especifica que o script será executado de forma assíncrona. Saiba em qual elemento ele pode ser usado.
O atributo async é um atributo boolean usado no elemento <script>. Ele instrui o navegador a baixar um script externo sem interromper a análise do HTML, e a executar esse script assim que o download for concluído.
Ele funciona apenas para scripts externos, portanto deve ser combinado com o atributo src. Adicionar async a um script inline (aquele com JavaScript escrito diretamente entre as tags) não tem efeito — o navegador o ignora.
Por que o async é importante
Normalmente, quando o navegador encontra uma tag <script src="..."> simples, ele interrompe a análise do HTML, baixa o arquivo, executa-o e somente então continua a construção da página. Em uma conexão lenta, isso bloqueia a renderização e torna a página lenta.
O async remove o download do caminho crítico: o navegador continua analisando e construindo a página enquanto o script é buscado em segundo plano. O resultado é um carregamento de script mais rápido e sem bloqueios.
async vs defer vs nenhum
Um script externo pode ser carregado de três formas. A diferença está em quando ele é baixado e quando é executado em relação à análise do HTML.
| Comportamento | Download | Execução | Ordem preservada? |
|---|---|---|---|
| Nenhum (padrão) | Bloqueia a análise | Imediatamente, antes de continuar a análise | Sim |
async | Em paralelo, sem bloqueio | Assim que o arquivo estiver pronto (pode interromper a análise) | Não |
defer | Em paralelo, sem bloqueio | Após a conclusão da análise, antes do DOMContentLoaded | Sim |
<!-- Blocks parsing until downloaded and run -->
<script src="example.js"></script>
<!-- Downloads in parallel, runs the moment it arrives -->
<script src="example.js" async></script>
<!-- Downloads in parallel, runs after the HTML is fully parsed -->
<script src="example.js" defer></script>Pontos-chave:
- Use
asyncpara scripts independentes que não dependem da página nem de outros scripts (analytics, tags de anúncios, rastreadores). - Use
deferquando o script precisar do DOM completo, ou quando vários scripts precisarem ser executados em uma ordem fixa. - Um
<script type="module">é adiado por padrão, portanto não é necessário adicionardefera ele; adicionarasynca um módulo faz com que ele seja executado assim que carregado.
A ordem não é garantida com async
Com async, os scripts são executados na ordem em que terminam o download — não na ordem em que aparecem no HTML. Isso quebra qualquer script que dependa de outro.
<!-- BAD: jquery.js may finish AFTER app.js, so $ is undefined when app.js runs -->
<script src="jquery.js" async></script>
<script src="app.js" async></script>Se o segundo script depender do primeiro, use defer — scripts adiados sempre são executados de cima para baixo:
<!-- GOOD: jquery.js is guaranteed to run before app.js -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>Sintaxe
<script src="example.js" async></script>Exemplo do atributo async do HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="example.js" async></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p>
A browser that doesn’t support JavaScript will display the content inside the noscript element.
</p>
<script>
document.write("My first JavaScript example!")
</script>
</body>
</html>