← Voltar para o InícioTecnologia & Código

Por que usar 'defer' no seu script?

Publicado em 13 de setembro de 2026

Por que usar 'defer' no seu script?

Olá, devs, programadores e entusiastas do código! 🚀 Eu sou Dani Guimarães, Designer e Programadora, e hoje vamos bater um papo sobre o segredo por trás do carregamento perfeito no desenvolvimento web!

Quem nunca passou pela frustração de escrever um código JavaScript bonitinho, rodar a página e dar aquele erro clássico no console: Cannot read properties of null (reading 'appendChild')? 😩

Geralmente, a primeira reação é olhar se o nome da classe ou do ID está correto. Mas, muitas vezes, o problema não está no nome, mas sim no momento exato em que o seu script está rodando. Vamos entender o porquê disso acontecer, ver como resolver isso com o defer e conhecer as outras formas tradicionais de contornar esse problema!

O comportamento padrão do navegador (e o perigo de travar tudo)

Para entender o defer, primeiro precisamos imaginar como o navegador lê o seu site. Quando um usuário acessa a sua página, o navegador começa a ler o código HTML linha por linha, de cima para baixo (processo conhecido como parsing).

Se você colocar a tag <script src="script.js"></script> lá em cima, no bloco <head>, algo crítico acontece: o navegador para tudo. Ele interrompe imediatamente a construção da página para baixar o arquivo JavaScript e executá-lo na mesma hora.

O grande problema é que, nesse exato instante, o navegador ainda não leu o <body>. Ou seja, os elementos visuais, os botões e as caixas de texto que o seu script precisa manipular simplesmente não existem ainda. Quando o JavaScript tenta procurar um elemento usando document.getElementById, ele acha um belo de um null e a aplicação quebra.

A solução elegante: O atributo defer

Quando você adiciona a palavra defer na sua tag de script, assim: você está basicamente dando uma instrução inteligente para o navegador:

"Ei, pode ir baixando esse arquivo JavaScript em segundo plano, mas continue construindo o HTML da página normalmente. Só execute o script quando todo o documento estiver 100% pronto e carregado."

Isso traz duas vantagens gigantescas para o seu projeto:

Segurança: O seu script só vai rodar quando todos os elementos do HTML já existirem na tela, eliminando aqueles erros chatos de elementos nulos.
Performance: A página carrega de forma fluida e sem travamentos repentinos, melhorando a experiência de quem está acessando o seu site.

As outras formas de resolver isso

Além do defer, existem outras duas abordagens muito comuns no dia a dia do desenvolvimento web que você precisa conhecer:

Colocar o script no final do <body>: Antigamente, a estratégia padrão para evitar que o script rodasse antes do HTML era mover a tag <script> para o finalzinho do documento, logo antes de fechar a tag </body>.

Por que "antigamente"?
Nos primeiros anos da web moderna (especialmente nos anos 2000 e início da década de 2010), a especificação do HTML não possuía atributos nativos eficientes e padronizados como o defer ou o async para controlar o carregamento assíncrono de scripts externos no cabeçalho. Como o navegador lia o código estritamente de cima para baixo e travava a página inteira ao encontrar um <script> no <head>, a única forma de garantir que o documento visual (o DOM) estivesse completamente montado antes do script rodar era empurrar a tag de script para o último lugar possível da página: o finalzinho do <body>.
Por que dizemos que "não se usa mais" (ou por que perdeu espaço)?
Strictamente falando, a prática ainda funciona e muitos sistemas legados ou tutoriais antigos ainda a utilizam. No entanto, ela caiu em desuso em projetos modernos de alta performance pelos seguintes motivos:
- a. Atraso na descoberta de recursos: Quando o script fica escondido no final do arquivo, o navegador só descobre que precisa baixar aquele arquivo JavaScript após ler todo o HTML. Isso atrasa o início do download do script, enquanto o defer permite que o navegador baixe o arquivo em segundo plano logo no início, enquanto o HTML ainda está sendo construído.
- b. Separação de responsabilidades: Manter as tags de importação de scripts no <head> centraliza a configuração do documento (metadados, folhas de estilo e scripts principais) em um único lugar limpo, facilitando a manutenção, em vez de espalhar dependências de comportamento no final do conteúdo estrutural.
Escrever o código JavaScript direto no HTML (Script Inline): Outra alternativa é colocar o código dentro da própria página HTML usando a tag <script> sem o atributo src. No entanto, em projetos profissionais, essa prática não é recomendada para arquivos grandes.

Olha como fica no seu código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Seu título</title>
    <script src="script.js" defer></script> <
</head>
<body>
</body>
</html>

Viu só? Com um simples detalhe, você ganha controle total sobre o fluxo de carregamento da sua aplicação e deixa seu código muito mais robusto. Conta para mim nos comentários qual dessas estratégias você mais usa! 💻✨